퍼옴 :: JavaScript/[책]시작하세요 Angularjs 프로그래밍
스케폴딩은 대체로 건설에서 주로 사용하는 용어로 큰 건물이나 시설물을 건설하거나 보수하기 위해 사람이나 장비,자재등을 올려 작업 할 수 있게 이미로 설치한 가 시설물을 뜻한다. 웹 어플리케이션에ㅓ도 비슷한 뜻으로 통용되고 있으며 여러 모듈이나 소스코드 및 폴도 구조등을 기본 구성하여 이른 기반으로 필요한 코드를 추가하면서 어플리케이션을 개발하는 것이다. 책에서는 yeoman을 이용하여 구성한다고 한다.
우선 요맨을 설치 한다.
npm install -g yo
아래와 같은 화면이 출력 되면 설치 완료되었다.
0.13.1)yo@1.1.2 C:\Users\pion4\AppData\Roaming\npm\node_modules\yo
├── open@0.0.4
├── async@0.2.10
├── shelljs@0.2.6
├── lodash@2.4.1
├── nopt@2.1.2 (abbrev@1.0.5)
├── chalk@0.4.0 (has-color@0.1.7, strip-ansi@0.1.1, ansi-styles@1.0.0)
├── sudo-block@0.3.0 (chalk@0.3.0)
├── findup@0.1.5 (commander@2.1.0, colors@0.6.2)
├── update-notifier@0.1.10 (semver@2.3.0, request@2.36.0, configstore@0.3.0)
├── insight@0.3.1 (object-assign@0.1.2, lodash.debounce@2.4.1, request@2.27.0
, configstore@0.2.3, inquirer@0.4.1)
└── yeoman-generator@0.16.0 (dargs@0.1.0, debug@0.7.4, diff@1.0.8, class-exte
nd@0.1.1, rimraf@2.2.8, findup-sync@0.1.3, text-table@0.2.0, mime@1.2.11, mkdirp
@0.3.5, isbinaryfile@2.0.1, underscore.string@2.3.3, iconv-lite@0.2.11, glob@3.2
.11, file-utils@0.1.5, request@2.30.0, download@0.1.17, inquirer@0.4.1, cheerio@
0.13.1)
├── open@0.0.4
├── async@0.2.10
├── shelljs@0.2.6
├── lodash@2.4.1
├── nopt@2.1.2 (abbrev@1.0.5)
├── chalk@0.4.0 (has-color@0.1.7, strip-ansi@0.1.1, ansi-styles@1.0.0)
├── sudo-block@0.3.0 (chalk@0.3.0)
├── findup@0.1.5 (commander@2.1.0, colors@0.6.2)
├── update-notifier@0.1.10 (semver@2.3.0, request@2.36.0, configstore@0.3.0)
├── insight@0.3.1 (object-assign@0.1.2, lodash.debounce@2.4.1, request@2.27.0
, configstore@0.2.3, inquirer@0.4.1)
└── yeoman-generator@0.16.0 (dargs@0.1.0, debug@0.7.4, diff@1.0.8, class-exte
nd@0.1.1, rimraf@2.2.8, findup-sync@0.1.3, text-table@0.2.0, mime@1.2.11, mkdirp
@0.3.5, isbinaryfile@2.0.1, underscore.string@2.3.3, iconv-lite@0.2.11, glob@3.2
.11, file-utils@0.1.5, request@2.30.0, download@0.1.17, inquirer@0.4.1, cheerio@
0.13.1)
요맨은 특정 스케폴딩을 위한 제네레이터가 필요하다. 따라서 다음과 같은 angular 제네레이터를 설치한다.
npm install -g generator-angular
설치를 완료 하였으면 프로젝트 폴더를 만들고 이동한다.
D:\>mkdir sampleApp
D:\>cd sampleApp
D:\>cd sampleApp
이제 다음과 같이 요맨 제네레이터를 실행한다.
D:\sampleApp> yo angular sampleApp
콘솔 내용중에 Sass를 이용할 것인지 묻는 질문이 나오면 n 입력후 엔터를 눌러 넘어가고 부트스트랩 이용할 건지 묻는 화면이 넘어가면 y 입력후 엔터를 눌러 넘어간다.
그리고 다른 angularjs 모듈 선택 하는 화면이 나오는데 스페이스 바로 모두 체크 해제 한 후 엔터를 누르도록 한다.
책에서는 요맨의 프로젝트 생성 작업이 끝나고 해당 폴더를 보면 grunt.js 파일과 karma 파일이 생성된 모습을 확인 할 수 있다. 라고 하는데 karma 파일은 확인이 안된다.. 뭔가 또 설정 해줘야 하나???
yo angular sampleApp 명령어 실행시 마지막 중간에 ERR 메세지가 나오면 D:\sampleApp 안에 debug 파일을 확인해 본다.4481 error Error: ENOENT, lstat 'D:\sampleApp\node_modules\grunt\node_modules\async\package.json'
4482 error If you need help, you may report this *entire* log,
4482 error including the npm and node versions, at:
4482 error <http://github.com/npm/npm/issues>
4483 error System Windows_NT 6.1.7601
4484 error command "C:\\Program Files\\nodejs\\\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "karma-phantomjs-launcher" "karma-jasmine" "grunt-karma" "--save-dev"
4485 error cwd D:\sampleApp
4486 error node -v v0.10.28
4487 error npm -v 1.4.9
4488 error path D:\sampleApp\node_modules\grunt\node_modules\async\package.json
4489 error fstream_path D:\sampleApp\node_modules\grunt\node_modules\async\package.json
4490 error fstream_type File
4491 error fstream_class FileWriter
4492 error code ENOENT
4493 error errno 34
4494 error fstream_stack C:\Program Files\nodejs\node_modules\npm\node_modules\fstream\lib\writer.js:284:26
4494 error fstream_stack Object.oncomplete (fs.js:107:15)
이런 내용이 있다면 async 모듈이 없기 때문에 나타나는 문제이므로 async 모듈을 설치해 준 다음 다시 실행 하도록 한ㄷ.
npm install async 하면 된다.
4482 error If you need help, you may report this *entire* log,
4482 error including the npm and node versions, at:
4482 error <http://github.com/npm/npm/issues>
4483 error System Windows_NT 6.1.7601
4484 error command "C:\\Program Files\\nodejs\\\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "karma-phantomjs-launcher" "karma-jasmine" "grunt-karma" "--save-dev"
4485 error cwd D:\sampleApp
4486 error node -v v0.10.28
4487 error npm -v 1.4.9
4488 error path D:\sampleApp\node_modules\grunt\node_modules\async\package.json
4489 error fstream_path D:\sampleApp\node_modules\grunt\node_modules\async\package.json
4490 error fstream_type File
4491 error fstream_class FileWriter
4492 error code ENOENT
4493 error errno 34
4494 error fstream_stack C:\Program Files\nodejs\node_modules\npm\node_modules\fstream\lib\writer.js:284:26
4494 error fstream_stack Object.oncomplete (fs.js:107:15)
이런 내용이 있다면 async 모듈이 없기 때문에 나타나는 문제이므로 async 모듈을 설치해 준 다음 다시 실행 하도록 한ㄷ.
npm install async 하면 된다.
터미널에 다음과 같이 입력하면 스케폴딩으로 제공되는 웹 어플리케이션을 볼 수 있다.
grunt serve책에서는 grunt server 라고 나오지만 버전업 되면서 deprecated 된 듯 하다.
지금까지 npm을 이용하여 grunt,yeoman 사용 법을 알아보았다. 실제 책에서 angularjs 에 관련 설명을 할때 거의 사용하지 않는 듯 싶다. 사용하지도 않을 꺼 왜 넣어놨는지 이해 불가지만.. 그래도 이렇게 환경 구성을 해보라는 의도가 있는게 아닐까??? 싶다..
이렇게 스케폴딩을 이용하여 기본 구조를 잡고 개발 하고 싶으면 위와 같은 방법으로 하면 되겠다. app폴더의 views폴더에는 html 파일을 추가하고 scripts폴더에 자바스크립트 파일을 추가하며 styles 폴더에 css파일을 추가해 가면서 목표로 하는 어플 개발을 할 수 있다.
댓글 없음:
댓글 쓰기