여러가지 방법을 이용해 프로젝트 구성하기

프로젝트 구성하기

1.http://angularjs.org에 접속하여 파일을 직접 다운받는 방법.

- node.js나 bower같은 새로운 기술이나 툴에 거부감이 들거나 새로운 프로젝트를 구성하지 않고 기존 프로젝트에 angularJS만 적용하고 싶을 때 직접 파일을 내려받아 프로젝트를 구성함. (stable 버전의 zip 빌드 형태로 내려받아 압축을 푼다)

<AngularJS에서 제공하는 파일>

(파일 중에 *.map으로 끝나는 파일은 압축된(minified) 파일을 크롬 인스펙터와 같은 디버거에서 확인할 수 있게 도와주는 파일이다.)

2. Bower를 이용한 프로젝트 구성 방법.

- 매번 프로젝트를 구성할 때마다 사이트에 접속해서 내려받으려면 매우 번거롭다.

이럴 때 bower를 이용해 간단하게 프로젝트를 구성할 수 있다.

<bower란?>

- 트위터에서 만든 웹을 위한 패키지 관리도구. 즉, 제이쿼리, AngularJS, Require.js등과 같이 자바스크립트 라이브러리를 하나의 패키지로 보고 이런 패키지를 쉽게 추가/삭제할 수 있게 해준다.

<bower 설치하기>

- 콘솔 창에 $ npm install -g bower 입력 (윈도우 - npm install -g bower)

- sample-app 이라는 폴더를 만들고 해당 경로로 이동해 다음과 같이 명령어 입력

$ bower install angular

$ bower install jqeury

(윈도우 콘솔창에 이렇게 입력하니 "ENOGIT git is not installed or not in the PATH" 라고 메세지가 뜬다. 

구글링 결과 .. gif shell 을 켜고 거기에 sample-app 폴더로 이동해 위 명령어를 치니 제대로 동작됨. bower_components 라는 폴더가 생성되고 그 안에 각각 angular, jquery 폴더가 생성되어 파일이 설치되었다.)

위 처럼 bower의 install 커맨드를 이용해 라이브러리를 일일이 등록할 수도 있지만 sample-app프로젝트 자체를 bower의 패키지로 등록할 수도 있다.

$ bower init 입력

이름은 sampleApp으로 하고 나머지는 엔터키로 넘어감.

[출 ㄹㅇ처] bower install이 안먹힐 때|작성자 눈보라소

위 내용의 bower.json 파일이 생성됨.

중요하게 봐야할 내용 dependencies 부분. - 해당 패키지가 참조하는 다른 패키지 목록을 의미함.

(반대로 bower.json 을 먼저 작성하고 dependencies를 수동으로 작성한 후 bower install 명령어만 입력해 참조 라이브러리를 모두 설치 할 수도 있다.)

3. Scaffolding을 이용한 프로젝트 구성 방법.

- 스케폴딩(Scaffolding) : 대체로 건설에서 주로 사용하는 용어로 큰 건물이나 시설물을 건설하거나 보수하기 위해 사람이나 장비, 자재 등을 올려 작업할 수 있게 임시로 설치한 가시설물을 뜻함.

웹 애플리케이션 개발에서도 비슷한 의미로 해석되는데, 소스코드나 구조나 개발에 필요한 여러가지 모듈을 가시설물을 설치하는 것처럼 처음에 설치하고 이를 기반으로 필요한 코드를 추가해 나가면서 하나의 웹 애플리케이션을 개발하는것. 

<요맨(Yeoman)이라는 도구를 이용해 스케폴딩을 구성>

1. 요맨 설치

$ npm install -g yo 

2. angularJS 제너레이터 설치

$ npm install -g generator-angular

3. 프로젝트 폴더를 만들고 해당 폴더로 이동

$ mkdir sampleApp && cd $_

4. 요맨 제너레이터 실행

yo angular sampleApp

5. Sass나 Bootstrap 을 이용할 것인지 묻는다. Sass는 no로 트위터 부트스트랩은 yes 를 선택.

다른 모듈은 스페이스바를 눌러 전부 선택 해제.

6. $ grunt server 라고 입력하면 브라우저에서 스케폴딩을 기반으로 제공되는 샘플 웹 애플리케이션을 볼 수 있다.

app 폴더의 views 폴더에 html 파일을 추가하고, scriptㄴ 폴더에 자바스크립트 파일을 추가하며, styles 폴더에 css 파일을 추가해가면서 목표하는 애플리케이션을 개발할 수 있다.