반응형

1. node.js 설치 

- http://www.nodejs.org에 접속하여 사이트 중앙의 install 버튼을 클릭하면 자신의 운영체제에 해당하는 설치 파일을 내려받을 수 있음.

($ node --version 입력 // 윈도우 콘솔창에는 node --version 이라 입력하여 node.js의 버전이 출력된다면 제대로 설치됐다는 증거)


2. grunt.js 클라이언트 설치

- Grunt.js는 자바스크립트 프로젝트를 위한 태스크 기반의 커맨드 라인 빌드 툴이다.

다양한 플러그인을 제공하고 있고 grunt-contrib-connet 플러그인으로 간단히 node.js 웹서버를 구동할 수 있다.


- 콘솔창에 $ sudo npm install -g grunt-cli 입력 (윈도우 계열에서는 $sudo를 입력하지 않아야 정상 출력 됨.)



<< 이하는 위키북스 angular.js 책 예제코드 실행하기 위한 셋팅>>


- 1. https://github.com/jeado/ngbook에서 파일을 다운받아 압축 푼 위치 중 package.json 파일과 같은 위치로 콘솔창 폴더 이동 후 명령어 $ npm install 입력 (윈도우 - npm install)  : package.json에 명시된 다른 node.js 모듈을 인터넷을 이용해 내려받아 로컬 디렉터리에 위치 시켜주기 위함.

- 2. $ grunt webserver 입력 (윈도우 - grunt webserver


설치가 제대로 완료되었다면 웹 서버가 정상적으로 구동됐다는 메세지가 뜸. 

브라우저에서 해당 url (127.0.0.1:8800 또는 localhost:8800)로 접속하면 예제 페이지를 열어볼 수 있다.





반응형

'# Work > Javascript' 카테고리의 다른 글

userAgent 에이전트를 이용한 모바일 페이지로 자동 이동  (0) 2015.10.15
Node.js란  (0) 2015.05.26
if문의 축약형  (0) 2015.02.16
자바스크립트 기초-7 object,DOM  (0) 2012.01.02
자바스크립트 기초-6 이벤트  (0) 2011.12.30
호정찐
반응형

Angular.js란?

- 구글이 만든 차세대 자바스크립트 MVC 프레임워크

- 웹 애플리케이션 개발에 필요한 여러 기능을 제공하는 오픈 소스 자바스크립트 프레임워크.



Angular.js를 선택해야만 하는 이유?

1. 코드량을 줄일 수 있다.


2. AngluarJS의 데이터 모델은 단순 자바스크립트 객체다.

- 다른 프레임워크처럼 별도의 모델 클래스가 없이 그저 단순한 자바스크립트 객체이며, 모델 데이터와 뷰 데이터가 양방향 데이터 바인딩이 됨.


3. 재사용할 수 있는 UI 컴포넌트를 만들 수 있다. 

- 지도, 그래프, 정렬할 수 있는 테이블과 같이 html에서 기본적으로 제공하지 않는 ui 컴포넌트를 각각 <map>, <graph>, <table sortable="true">와 같은 html태그로 만들수 있게 해줌.


4. 의존관계 주입을 이용해 웹 애플리케이션 자바스크립트 개발을 할 수 있다.

- 이전의 다량의 스크립트 코드처럼 엉킨 실타래와 같은 코드를 작성하지 않게 의존관계 주입을 이용해 웹 애플리케이션을 개발할 수 있다. 

서비스 프로바이더를 이용해 특정 서비스 컴포넌트가 사용하는 다른 서비스 컴포넌트를 직접 참조하는것이 아닌 의존관계 주입을 이용해 사용하게 함.


5. HTML&CSS 개발자와 자바스크립트 개발자간의 협업을 쉽게 해준다.

- 이전에는 DOM조작과 이벤트 처리를 위해 자바스크립터가 HTML 구조를 잘 알고 있어야만 했고, HTML 코드를 수정하면 스크립트 코드가 동작하지 않아 두 개발자 사이의 협업이 어려웠지만, 뷰 코드와 로직 코드를 명확히 분리하여 자바스크립터가 HTML의 구조를 알아야 할 필요가 없어졌음.





반응형

'# Work > └ Angular.js' 카테고리의 다른 글

여러가지 방법을 이용해 프로젝트 구성하기  (1) 2015.06.03
호정찐
반응형
1. https://translate.google.co.kr/community


반응형

'# Work > └ Google Polymer' 카테고리의 다른 글

Polymer란  (0) 2015.05.28
웹 컴포넌트란? (web components)  (0) 2015.05.28
호정찐