javaScript 모듈의 양대 산맥,CommonJS vs AMD

JavaScript 표준을 위한 움직임 : CommonJS 와 AMD 범용적인 목적으로 JavaScript를 사용하기 위해 필요한 선결 조건은 모듈화입니다. Node.js도 이런 모듈화 작업때문에 탄생할 수 있었습니다. JavaScript 모듈화 작업의 선두 주자는 CommonJS와 AMD입니다. 이글에서는 CommonJS와 AMD의 JavaScript 모듈화에 대해 간략하게 설명합니다. CommonJSCommonJS(http://www.commonjs.org/)는 JavaScript를 브라우저에서뿐만 아니라, 서버사이드 애플리케이션이나 데스크톱 애플리케이션에서도 사용하려고 조직한 자발적 워킹 그룹이다. CommonJS의 'Common'은 JavaScript를 브라우저에서만 사용하는 언어가 아닌 일반적인..
Web Tech/RequireJS 2015. 6. 11. 11:46

CSS @import 인한 성능과 문제점

import 규칙 문제점 일반적으로 @import 규칙을 많이 사용하고 있지만 css 성능 향상을 생각한다면 그렇게 좋은 방법은 아니다. 그 이유는 @import 규칙으로 불러들인 CSS 파일은 그 갯수 만큼 서버에서 요청(request)이 늘어남으로써 로딩 속도에 상당한 악영향을 미친다. 소규모 프로젝트에서는 크게 상관이 없을지도 모르지만 @import 규칙은 병렬방식이 아닌 직렬 방식으로 다운로드하기 때문에 전체 로딩시 그 만큼의 로딩 시간도 길어지는 문제점이 있다. 심지어 인터넷 익스플로러(IE)에서는 다운로드 순서가 다르게 작동하는 문제가 발생하기도 한다. 다시 말해서, 각 역할에 따라 분리한 CSS 파일을 웹 문서에 적용할 때는 @import 규칙으로 호출하면 안되고, HTML 문서에서 요소를 ..
StyleSheet/CSS 2015. 5. 12. 16:33

GRUNT(그런트) 시작하기

Getting started (프로그램 시작하기) Grunt 와 Grunt 플러그인(모듈)들의 설치와 관리는 npm( node package maneger) 통해서 실행한다. npm 은 Node.js 의 패키지를 관리하는 도구이다. sublime text의 package control 과 비슷한 것으로 이해하면 된다. Grunt 의 CLI 설치하기 Grunt 를 사용하려면 우선적으로 console(콘솔), 즉 커맨드 인터페이스(like cmd) 기반의 어디에서나 실행 할 수 있는 Grunt's Command line interface(CLI)를 설치해야 한다. 이때 OSX 나 *nix 에서는 sudo(super user) 가 windows 에서는 administrator 권한이 필요 할 수 있음에 유의하..
Web Tech/node.js 2015. 5. 12. 11:44

nodeJS express(웹서버), SSI(server side include)

nodeJs 웹 서버 & SSI(server side include) 설정 전의 포스팅 중에 nodeJs 로 웹 서버를 구현하는 내용을 다루어 보았는데 이번에는 SSI(server side include) 까지 함께 다루어 보고자 한다. nodeJs 가 설치되어 있다는 가정하에 아래 구문을 실행합니다. $ npm install -g express 전역 옵션플래그로 express 모듈을 설치한다. 그리고 아래와 같이 해당 프로젝트 폴더에 다시 express 모듈을 다시 설치한다. 아직까지 왜 전역에 설치하고 나서 해당 프로젝트 디렉터리에 다시 express 를 install 해야하는지는 모르겠다. ㅠ $ npm install express 다음으로 ssi 모듈을 설치한다. $ npm install ssi ..
Web Tech/node.js 2015. 5. 11. 18:33

프론트 엔드 웹 개발을 위한 빌드 시스템(Grunt, Yeoman, Bower)

Yeoman, Grunt, Bower 개인적으로 Grunt 와 Bower, Yeoman 을 사용하여 간단한 프로젝트를 진행했는데 나름대로의 재미와 만족을 느끼고 있다. 이 세 가지는 요멘 사이트에 가보면 패키지로 사용하기를 권장하고 있으며 그 중 Grunt는 프론트 엔드 웹 개발을 위한 자동 빌드 시스템 관리 툴이다. 순수 퍼블리셔란 직군으로 일하면서 그리고 아직 미진한 실력으로 이 관리 툴을 이용하는데 많은 시간과 노력이 필요했고 아직 이 시점에서도 무지함 투성이지만 개인적으로 이해한 것들을 정리하는 시간을 가져볼까 한다. 이 관리 도구들은 기본적인 구조를 잡는 것부터 시작하여 각종 라이브러의 설치와 의존성 관리, 그리고 각종 작업들( 소스코드 합치기, 압축, 배포)을 편리하게 수행하고 관리할 수가 있..
Web Tech/node.js 2015. 5. 11. 13:59

jQuery 플러그인 개발 및 $.extend()

플러그인 개발 서드파티 플러그인이 코딩을 발전시키는 데 큰 역할을 하는 건 사실이지만, 가끔은 한발 더 나아가고 싶을 때도 있다.다른 개발자가 재사용할 수 있거나 스스로 재사용할 수 있는 필요에 의해 새로운 플러그인으로 제작하고 싶을 수도 있을 것이다. 이 포스팅에서는 일반적인 jQuery 플러그인을 제작하는 방법에 대해 살펴보겠다. 플러그인을 작성할 때에는 jQuery 라이브러리가 로드됐다고 가정해야 한다. 하지만 jQuery 플러그인에서 $ 별칭을 사용할 수 있다고 단정지을 수는 없다. 물론 $.noConflict() 메소드로 $ 별칭에 대한 제어를 양도할 수는 있다.많은 개발자들은 jQuery 플러그인을 제작하는데 있어서 $를 사용하지 않으면 코드의 가독성이 떨어져 불편하고 다른 라이브러리와의 충돌..
Web Tech/jQuery 2015. 3. 17. 16:55

Screen 객체와 MouseEvent객체의 위치 프로퍼티와 메소드

Screen 객체의 위치 프로퍼티와 메소드 아래 표의 프로퍼티 중에 width, height 인 프로퍼티는 현재 자신의 모니터 해상도를 기준으로 하고, availWidth, availHeight는 운영체제의 작업표시줄 영역의 크기를 뺀 크기이다. 프로퍼티 / 메소드 내용 screen.width, screen.height - 모니터(screen)해상도의 전체 넓이와 높이(작업표시줄 포함) screen.availWidth, screen.availHeight - 작업 표시줄이 포함되지 않은 모니터 해상도의 넓이와 높이 MouseEvent 객체의 위치 프로퍼티와 메소드 MS IE 에서는 아래의 표 중 클릭한 지역 위치가 담긴 offsetX, offsetY 프로퍼티를 제공하지만 비표준입니다. ( 단, 파이어폭스에..
JavaScript/위치 프로퍼티와 메서드 2015. 3. 16. 16:18

HTML Element 객체에서 제공하는 크기 및 위치 프로퍼티와 메소드

HTML Element 객체 HTML Element 겍체는 다섯 객체(window객체, document객체, html element객체,screen객체, mouseEvent객체)중에 위치 및 크기와 관련된 프로퍼티와 메소드를 가장 많이 포함한 객체이며 브라우저 화면에 보이는 대부분의 객체는 HTMLElement객체를 상속받았기 때문에 동적으로 요소를 움직여야 하는 경우 대부분이 이 객체의 프로퍼티와 메소드를 사용한다. 그룹 프로퍼티 / 메소드 내용 offset 그룹 offsetParent - offsetLeft, offsetTop의 기준이 되는 부모 엘리먼트 offsetWidth, offsetHeight - 해당 엘리먼트의 너비와 높이 ( 보더, 패딩, 스크롤바 포함 단, 마진은 제외) offsetLef..
JavaScript/위치 프로퍼티와 메서드 2015. 3. 16. 15:01

이메일 코딩시의 주의할 점

■ 이메일 코딩시 알아둘 점 기본적으로 table tr td 만을 가지고 코딩하길 권유하고 그 외 일부 코드는 메일 서비스 회사에서 막아놓는 경우나 각 브라우저마다 기본적인 마진 패딩의 차이가 있으므로 다른 코드를 이용한 마크업으로 최소화한다. ■ CSS 기본 css 를 사용하는 방식, 상단에 스타일을 선언하는 방식은 메일 제공업체가 막는 경우가 있으므로, 스타일은 각 코드안에 인라인으로 넣어준다. center 메일폼의 제일 바깥에 감싸져 있는 코드에 를 넣어줘서 메일을 받는 사람이 메일을 열었을때 메일폼이 가운데 정렬이 되도록 한다. background style="background:~~~" 방식이 안되는 곳이 있으므로 background="~~~" 로 작업을 권장.. background="~~~" ..
StyleSheet/CSS 2015. 3. 16. 13:11

VCS & Git/Github

VCS(Version Control System) - 버전관리 시스템 (형상관리, 소스관리라고 다양한 용어로 사용) 버전관리 시스템이란? 한마디로 정의하긴 어려우나 굳이 정의하자면, 의미있는 변화들 기능 개선, 버그 수정, 고객의 요구사항에 따른 수정사항들에 대한 변화들을 관리하는 것이 버전관리이다. 즉, 소스코드의 중요한 변화들을 기록하는 행위이며 이것은 어떤 문제가 발생했을 때 문제의 맥락을 파악 할 수 있도록 도와주고, 변화에 실패했을 때 과거의 상태로 쉽게 돌아갈 수 있도록 해준다. 결과적으로 실패에 대한 부담이 줄어들면서 백업,협업과 같은 중대한 장점을 제공해 준다. ( 문서나 코드의 변경사항을 저장해서 과거의 상태를 열람, 복원 할 수 있도록 한다. 또 협업시에 협업자들의 변경사항을 자동으로 ..
Dev Environment/Git 2015. 3. 4. 18:03

쿠키(Cookie)

쿠키(Cookie) 인터넷 웹사이트의 방문기록을 남겨 사용자와 웹사이트 사이를 매개해 주는 정보. (웹사이트에 접속할 때 자동적으로 만들어지는 임시 파일로 이용자가 본 내용, 상품 구매 내역, 신용카드 번호, 아이디(ID), 비밀번호, IP 주소 등의 정보를 담고 있는 일종의 정보파일)쿠키라는 명칭은 파일 용량이 작고, 이용자의 방문정보들이 마치 과자를 먹으면 으레 남겨지는 과자부스러기와 같다고 해서 붙여진 이름이다. 대부분의 웹브라우저는 쿠키 기능을 갖고 있으며, 네티즌이 쿠키를 받을 것인지 아닌지를 선택할 수 있는 기능도 포함돼 있다. 고객이 특정 홈페이지를 접속할 때 생성되는 정보를 담은 임시 파일로 크기는 4KB 이하로 작다. 쿠키는 애초 인터넷 사용자들의 홈페이지 접속을 돕기 위해 만들어졌다. ..
JavaScript/Core & 개념ㆍ용어 2015. 2. 26. 09:40