SCSS/SASS(CSS Preprocessor) & Sass install

SASS (Syntactically Awesome StyleSheets) Sass는 css전처리기로써 css 파일 중간에 위치하는 하나의 계층입니다. 전처리기란 웹 브라우저는 프로세서(Processor)로서 웹 데이터(HTML, CSS, JS 등)를 다운로드 받아 해석하여 화면에 해석된 데이터를 랜더링됩니다. Sass, LESS 등 ‘CSS 확장 언어’를 활용할 경우, 웹 브라우저에서 해석되기 전에 CSS로 변경되는 과정이 필요합니다. 이를 ‘브라우저에서 해석되기 전에 프로세싱한다’고 해서 프리프로세싱(Pre-Processing)한다고 부릅니다. Sass는 보다 간결하고 격식을 갖춘 css 문법을 제공하며, 스타일시트를 쉽게 관리할 수 있는 다양한 기능을 구현합니다.” 라고 정의하고 있다. 다시 말해서,..
StyleSheet/SASSㆍSCSS 2015. 8. 6. 15:55

sublime text3 스마트하게 사용하기

Sublime Text3 사용 방법 sublime text3 [Mac & Window] 에서의 단축키 및 유용한 플러그인의 설치 및 사용방법에 대해 알아보겠습니다. Keyboard shortcut (단축키 정리) Window 용 Mac 용 내 용 ctrl + shift + k ctrl + shift + k 라인 삭제하기 ctrl + shift + d cmd + shift + d 라인 복사하기 F11 전체 화면(Full Screen) shift + F11 편집 집중모드 ctrl + shift + p cmd + shift + p 명령어 팔레트(Command Palette) ctrl + ' ctrl + ' 콘솔 보기(show console) ctrl + k + b cmd + k + b 사이드바 토글(show/..
Dev Environment/sublimeText3 2015. 8. 6. 09:12

Java/JSP 기본 개발 환경 구축

Java 개발 환경 구축 JDK(Java Development Kit) - 자바 엔진JDK 1.6.xhttp://www.oracle.com/technetwork/java/index.html (오라클 사이트로 이동)포스팅을 하는 시점 → Java SE(Standard Edition) 8u51 ( 8버전의 업데이트가 51번 이루어진...) 를 다운로드 [JRE(java runtime engine) 는 엔진(자바를 실행할 목적일 경우에)만 포함, JDK 는 jre(엔진)과 개발관련 소스까지 포함] Eclipse (개발 도구 IDE)http://www.eclipse.org 본인 OS 에 적합한 이클립스를 다운받습니다. 이클립스는 설치형이 아니라 실행파일형이기 때문에 압축을 해제한 폴더를 자주 사용하는 C 드라이..
Dev Environment 2015. 7. 27. 18:31

jQuery Navi Menu 플러그인 제작 고려사항

jQuery Navigation Menu 플러그인 제작 고려사항 내비게이션 위젯에 접근성 향상을 위한 WAI-ARIA 적용 WAI-ARIA는 RIA 웹 애플리케이션의 취약한 접근성을 개선하기 위한 목적으로 개발된 표준 접근성 API로, Javascript를 사용하여 HTML 문서에 역할, 속성, 상태 등을 정의할 수 있습니다. 이를 통해 웹 제작자는 웹 애플리케이션의 접근성을 향상시킬 수 있습니다. WAI-ARIA 퀵 레퍼런스 보기 웹 사이트 글로벌 내비게이션 제작가이드 보기 역할(Roles) 설정 ㆍ 네비게이션 요소 ( or ) 에 role="navigation" 역할 설정 ㆍ 네비게이션바 요소 ( ) 에 role="menubar" 역할 설정 ㆍ 레벨 2Depth 메뉴 컨테이너 요소 ( ) 에 role..
Web Tech/jQuery 2015. 7. 9. 13:27

jQuery 플러그인 디자인 패턴

jQuery 플러그인 디자인 패턴jQuery 플러그인 설계시에 기본적으로 고려해야 할 점들을 알아 보겠습니다. 1. 플러그인 이름 2. 플러그인 제작 기본 패턴 (function())(); 을 활용한 $ 별칭을 보호 체이닝 설정 3. 사용자 정의 옵션 설정 4. 네임스페이스 플러그인 이름 작성 jquery.{{플러그인이름}}.js 또는 jquery.{{플러그인이름}}.1.0.0.js 플러그인 제작 기본 패턴 (function(global, $){ 'use strict'; $.fn[{{pluginName}}] = function() { var _this = this; return _this; // return _this.each(function(index, item){}); // return _this.p..
Web Tech/jQuery 2015. 6. 30. 14:15

jQuery 인스턴스 객체를 참조했을 때와 참조하지 않을 때의 성능차이

$() 팩토리 함수의 참조 vs 비참조$() 에서 반환되는 인스턴스 객체(jQuery 객체) 를 참조했을 경우와 참조하지 않고 사용했을 경우의 성능 차이를 콘솔 타임으로 보도록 하겠습니다. jQuery 인스턴스 객체를 참조하지 않은 경우 console.time('Non Cached'); var i = 0; for(; i < 10000; i++) { var $test = $('div'); } console.timeEnd('Non Cached'); jQuery 인스턴스 객체를 참조한 경우 console.time('Cached'); var i = 0, $test = $('div'); for(; i < 10000; i++) { var s = $test; } console.timeEnd('Cached'); 콘솔창..
Web Tech/jQuery 2015. 6. 30. 12:55

오브젝트(Object)와 인스턴스(instance),instanceof

Object 와 instance 의 차이점 처음 Object 를 공부할 때 Object 와 인스턴스에 대한 개념이 어렵게 느껴집니다. 오브젝트가 인스턴스이고 인스턴스가 오브젝트가 아닌가? 하고 말이죠. 오브젝트를 사용하여 오브젝트를 생성하면 Object 가 반환된다. 이때 반환된 Object 를 인스턴스(instance)라고 부른다. ES5 명세서에도 인스턴스로 표기하고 있다. new 연산자를 사용하여 오브젝트를 생성하여 변수에 할당할 수 있으며 변수에 할당된 오브젝트가 인스턴스인 것이다. 다음의 아래 코드를 보자. // new 연산자를 사용하여 Object를 생성 var obj = new Object(); // 변수 obj에 오브젝트를 생성한 것을 할당 // 이렇게 변수에 할당,반환된 오브젝트가 인스턴..
JavaScript/연산자ㆍ메서드ㆍ프로퍼티 2015. 6. 27. 17:54

tab menu - 함수 단위 Vs 프로토타입의 클래스 단위

함수단위와 프로토타입의 탭 메뉴 만들기 함수단위의 탭 메뉴 기본 마크업 구성 html Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor. 함수단위 탭 메뉴 로직 javascript $(function() { tabMenu("#t..
Code Lab 2015. 6. 23. 17:55

[STEP 04] 기초 플러그인 제작 가이드

jQuery PlugIn 기초 이번 단계에서는 플러그인 사용자를 위한 간단한 유효성 검사항목을 추가하여 제작해 보도록 하겠습니다. STEP 04 JavaScript // 전역이 오염되지 않도록 별도의 공간을 생성 // 스코프 함수 (즉시 실행되는 함수 내부) (function(global, $){ 'use strict'; // $.fn.radioClass 플러그인이 존재하지 않는다면? if ( !$.fn.radioClass ) { /** * $.fn.radioClass 플러그인 정의 * @param {string} name radioClass 를 적용할 class 속성 이름 * @param {string} context radioClass 를 적용할 컨텍스트 선택자 * @return {jQuery Obj..
Web Tech/jQuery 2015. 6. 23. 15:25

[STEP 03] 기초 플러그인 제작 가이드

jQuery PlugIn 기초 이번 단계에서는 사용자가 정의한 클래스 속성을 원하는 요소에 설정하도록 제작해보도록 하겠습니다. 마크업은 이전과 동일한 형태입니다. STEP 03 JavaScript / 전역이 오염되지 않도록 별도의 공간을 생성 // 스코프 함수 (즉시 실행되는 함수 내부) (function(global, $){ 'use strict'; // $.fn.radioClass 플러그인이 존재하지 않는다면? if ( !$.fn.radioClass ) { $.fn.radioClass = function(name, context) { // 클래스 속성이 설정될 context 의 기본 값을 설정합니다. // 사용자 정의 값이 있으면 덮어쓰기 context = context ? context : null..
Web Tech/jQuery 2015. 6. 23. 15:18

[STEP 02] 기초 플러그인 제작 가이드

jQuery PlugIn 기초 STEP 01 단계에서는 a 태그가 없는 li 에 class 를 추가하는 플러그인이었습니다. 하지만 li 요소는 탭포커스가 이동되지 않기 때문에 접근성을 위한 탭포커스를 위해 마크업에 a 태그를 추가하여 접근성까지 고려한 플러그인을 제작해보도록 하겠습니다. Mark-up Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor. STEP 02 JavaScript // 전역이 오염되지 않도록 별도의 공간을 생성 // 스코프 함수 (즉시 실행되는 함수 내부) (functi..
Web Tech/jQuery 2015. 6. 23. 14:59

[STEP 01] 기초 플러그인 제작 가이드

jQuery Plugin 기초 제이쿼리 플러그인에 대한 기초 단계부터 심화단계까지 포스팅해 보겠습니다. 간단하게 class 를 붙였다 지웠다하는 radio 와 같은 역할을 하는 플러그인을 단계별로 작성해보도록 하겠습니다. STEP 01 JavaScript if (!$.fn.radioClass) { // $.fn 객체의 radioClass 메소드 정의 // $ 가 jQuery 의 Alias(별칭)이듯이 fn 은 prototype 의 Alias(별칭) 입니다. // console.log($.fn === $.prototype); // true $.fn.radioClass = function(name) { // 플러그인 함수 내부에서 this 는 jQuery 인스턴스 객체를 가리킵니다. // $('li.sele..
Web Tech/jQuery 2015. 6. 23. 14:57

jQeury 의 래퍼 객체의 실체

jQuery 래퍼(wrapper)객체 : $() $() == jQuery() 의 $, jQuery 는 생성자 함수(클래스)입니다. 우리가 흔히 쓰는 $() 은 함수를 호출하는 것이고 팩토리(공장) 함수입니다. $() 는 내부적으로 new jQuery() 를 init 하여 공장처럼 찍어내는 것입니다. 예를 들어 $() 에 인자값으로 DOM Object 를 넣으면 제이쿼리 객체로 반환해 주는 것입니다. 실제로 너무 당연하다고 쓰고 있기 때문에 $() 이 함수를 호출한다고 생각 못하는 사용자들도 있을 것입니다. $() 팩토리 함수는 생성자(클래스)이기 때문에 주의해서 사용해야할 필요성이 있습니다. 다음과 같은 코드가 있다고 가정해 봅니다. javascript $('p').css('border' , '1px s..
Web Tech/jQuery 2015. 6. 20. 13:47

Git 개념

형상 관리 도구(Configuration Management Tool)로서의 GIT 소프트웨어를 중심으로 하는 프로젝트에서 빈번하게 발생하는 이러한 문제를 해결하기 위해 등장한 도구가 바로 형상 관리 도구(Configuration Management Tool)입니다. 소프트웨어 공학의 프로젝트 진행 및 관리 방법에서 비중 있게 다뤄 지는 영역 중 하나이기도 합니다. 오늘날 많이 사용되는 형상 관리 도구의 두 축이 있는데, 바로 SVN과 GIT입니다. 한때 SVN이 널리 사용되었지만, 근래에 들어 GIT이 등장하고 나서부터 SVN을 사용하던 많은 기업들이 GIT으로 갈아타고 있는 추세라고 합니다. SVN과 GIT은 모두 소스코드의 효율적인 관리를 위한 형상 관리 도구이지만, 비슷하면서도 많은 점이 다릅니다..
Dev Environment/Git 2015. 6. 15. 16:51

RequireJS - AMD의 이해와 개발

AMD 방식의 RequireJSJavaScript 개발은 웹 사이트의 규모가 커질수록 소스를 관리하고 배포하는 비용이 커지는 경향이 있습니다. 또한 오래된 소스의 의존성 파악이 어려워 섣불리 수정하지 못하는 상황에 처하기도 합니다. 더 나은 웹 사이트 혹은 웹앱을 위해서는 해결해야 할 과제이며, 이는 RequireJS를 사용하여 라이브러리 차원에서 보완할 수 있습니다. 이 글에서는 RequireJS의 바탕이 되는 AMD(Asynchronous Module Definition)의 기본 개념을 살펴보고 RequireJS를 이용한 개발 가이드를 제시합니다. AMDAMD는 동적 로딩, 의존성 관리, 모듈화가 톱니바퀴처럼 아름답게 맞물린 API 디자인 패턴을 제시합니다. AMD의 자세한 배경과 연관 기술에 관해서..
Web Tech/RequireJS 2015. 6. 11. 13:48