[AngularJS] 1. 프로젝트 및 개발환경 구성 - AngularJS 강좌

프로젝트 및 개발환경 구성

 

---

 1.개발환경 구성

  당연히 AngularJS 예제를 작성하려면 필요한 도구들을 챙겨야 합니다. 여기서는 Node.js, grunt.js를 설치해보도록 하겠습니다.

  1-1. Node.js 설치

   AngularJS를 사용하는데 필수적인 요소는 아니지만, 간단한 웹 서버 구동용으로 쓰신다고 보시면 되겠습니다. 아래 주소로 접속하면 아래 화면처럼 구성되어 있습니다. 윈도우에서 접속해서 그런지, 아래와 같이 바로 잡아주네요. 

   이전에는 LTS와 Stable로 나뉘어져 있지 않았는데,,, 

 

   아무튼. Stable 버전으로 받겠습니다.

   http://www.nodejs.org/ 

 

   다운받으신 후, 설치 가볍게 해주시면 됩니다. 설치가 완료되었다면, 버전 확인을 통해, 마지막 확인을 합니다.

   $ node --version

  1-2. Grunt.js 설치

   node.js를 설치했다면 간단하게 Grunt.js를 이용해서 node.js 웹 서버를 구동할 수 있습니다. 

   여기서 잠깐, Grunt.js란 js 프로젝트를 위한 태스크 기반의 커맨드 라인 빌드 툴입니다. 

   설치를 위해 아래 명령어를 cmd 창에서 입력합니다.

npm install -g grunt-cli

   위 명령어 실행 완료 후, 해당 예제 코드가 있는 파일 내의 경로로 이동하여 아래 명령어를 실행합니다. 명령어 수행 경로 내에 package.json 파일이 있어야 합니다. 예제 코드는 아래 링크에 나와있습니다.

   https://github.com/jeado/ngbook

   npm install

   위 명령어를 통해 실행한 뒤, 웹 서버를 구동합니다. 

grunt webserver

   다음으로 인터넷 브라우저에서 확인합니다.

 localhost:8800 

 2. 프로젝트 구성

  프로젝트를 구성하는 방법은 AngularJS lib 파일을 직접 받아 구성할 수도 있고, Bower를 이용해 받을 수 있습니다. 이외에도 AngularJS에서 직접 제공하는 샘플 또는 요맨(Yeoman)과 같은 도구의 스케폴딩 방식을 이용해 구성할 수 있습니다. 

  2-1. AngularJS에서의 구성

   기존 프로젝트에 AngularJS만 적용하고 싶을 때는 매우 친근하고 용이한 방식인 공식 사이트를 통한 구성을 할 수 있습니다.

 

   AngularJS 공식 사이트(https://angularjs.org/)에 접속해서 다운로드 버튼 클릭합니다.

   버튼을 누르면 아래와 같이 뜨는데, Branch, Build, CDN, Bower, npm, extra 등 의 라벨을 볼 수 있습니다. Branch만 Stable로 선택하고 다운로드하면 간단하게 angular.js 파일을 받을 수 있습니다.

 

  2-2. 스케폴딩을 이용한 구성

   스케폴딩은 요맨 툴을 이용해서 구성해보겠습니다. 아래 명령어로 요맨을 설치합니다. 

   npm install -g yo

   요맨은 특정 스케폴딩을 위한 Generator가 필요합니다. 따라서 AngularJS용 Generator를 설치해줘야 합니다. 

   npm install -g generator-angular

 

   제너레이터를 설치완료 했으면, 해당 프로젝트 폴더에서 요맨 제너레이터를 실행시킵니다.

   yo angular sample

   아래처럼 몇 가지 질문 절차가 이어집니다. 각 질문은 여러분의 기호에 맞게 Yes Or No 해주시면 됩니다.

   해당 생성 작업이 끝나면 아래와 같이 경로에 구성된 모습을 볼 수 있습니다.

   초기에 Gulp 사용을 Yes를 하셨다면 따로 gulp를 설치하시고 아니면 grunt를 이용해서 스케폴딩으로 구성된 프로젝트를 실행해봅니다.

   grunt server 또는 gulp start:server

   이렇게 스케폴딩을 구성해서 app 폴더 내의 views 폴더에 HTMl 파일을 추가하시고, scripts에 js 파일을 추가하는 방식으로 프로젝트를 구성하실 수 있습니다. 

* 이 포스팅은 '시작하세요! AngularJS 프로그래밍'을 바탕으로 작성하였습니다.