ݺߣ

ݺߣShare a Scribd company logo

Yeoman(모던웹 개발을 위한 관리도구)설치사용가이드

•
•
수정 김
수정 김

모던 웹 개발을 위한 필수 도구 YEOMAN 설치사용가이드

1 of 24
Downloaded 50 times
모던 웹 개발을 위한 필수 도구 YEOMAN 설치사용가이드
2 ㈜교원 디자이너 김수정 facebook : emotion.987
3
4 • Front-End 개발을 도와주는 자동화 도구. (비교 : 자바의 엔트, 메이븐, 그랜들) • 자바스크립트 MV*, html5 web component 모듈별 버전 의존성 관리를 위한 기본 도구 • BSD License (Berkeley Software Distribution) *다음 페이지에 라이선스에 대한 설명 첨부 : 소스코드 공개의 의무가 없으며 상용(상업적) 소프트웨어에서도 무제한 사용 가능한 라이센스 • Yeoman의 구성은 YO, BOWER, GRUNT 세 가지로 구성되어 있다. http://yeoman.io/ - Yo(스케폴딩 생성) : 기본적인 코드 골격을 만들어 준다. - Bower(라이브러리 의존성 관리) : 다양한 jquery 모듈, angular.js 모듈의 설치 및 버전 관리를 한다 . - Grunt(테스트 및 빌드 자동화) : 테스트 수행(테스트코드 작성해야함) 및 문법오류 검사 그리고 배포파일을 생성한다.
5 * 첨부 <공개 SW 라이선스 비교> https://wiki.kldp.org/wiki.php/OpenSourceLicenseGuide • GPL(General Public License) - Free Software Foundation(FSF)에서 만든 Free 소프트웨어 라이센스 - GPL 코드를 사용한 SW를 내부적인(개인, 기관, 단체 등) 목적으로만 사용할 때에는 소스코드를 공개 의무 없음 - 어떤 형태로든(유료든 무료든) 외부에 공표/배포할 때에는 전체 소스코드를 공개해야 함. • LGPL(Lesser General Public License) - LGPL은 GPL보다는 훨씬 완화된(lesser) 조건의 공개 소프트웨어 라이센스 - 소스코드를 공개의무 없음. LGPL 코드를 사용했음을 명시해야 함 - 파생된 라이브러리를 개발하여 배포하는 경우에는 전체 코드를 공개. • BSD(Berkeley Software Distribution) - 소스코드 공개의 의무가 없음 - 상용(상업적) 소프트웨어에서도 무제한 사용 가능한 라이센스 - 아무런 제한이 없는 라이센스
6 Yeoman을 설치하려면 기본적으로 아래의 Node.JS와 Git이 설치되어 있어야 한다. 해당 사이트를 방문해서 아래 표시된 버튼을 클릭하면 OS에 맞는 인스톨러를 알아서 다운로드 해준다.(*) Node.JS (http://nodejs.org/) Git (http://git-scm.com/)
7 Node.JS는 설치 시 디폴트로 선택 된 그대로 Next 진행하면 설치 완료 Git 설치 시 디폴트로 선택 된 상태 그대로 Next 진행하다가 해당 선택부분에서 옆의 이미지처럼 두번째 영역 선택 후 인스톨 진행
8 • Node.js가 설치되었다면 아래처럼 node.js 그룹 안에 속한 command prompt를 열어서 명령어 작성 초보자(디자이너)를 위한 cmd창 기본 작성 팁 #1 VCtrl + 단축키 기능 안됨 마우스 우 클릭 후 붙여 넣기로 삽입 이동키로 기 작성된 명령어 불러오기↑ ↓ <명령어> mkdir : 디렉토리(폴더)를 만듬 cd : guswo 디렉토리 이름을 보여주거나 변경 copy : 하나 이상의 파일을 다른 위치로 복사 dir : 디렉토리에 있는 파일과 하위 디렉토리 목록 del : 하나 이상의 파일을 삭제 find : 파일에서 텍스트 문자열을 찾음 exit : cmd.exe 프로그램을 마침
9 내가 선택한 폴더에서 cmd창을 열고 싶을때 – 해당 폴더를 선택하고 (Shift+우클릭 )해서 ‘여기서 명령 창 열기’ 선택 + 우클릭 초보자(디자이너)를 위한 cmd창 기본 작성 팁 #2
10 • Node.js 버전확인 > node --version && npm –version • Git 설치 및 버전확인 > git –version
11 Yeoman 이란?
12 • 프론트앤드 개발을 위한 기본 구조(Scaffolding)를 만들어 준다. • Yo는 yeoman팀에서 만들었으나 Bower와 Grunt는 기존에 존재했던 의존성 관리 도구를 통합한 것임. Yeoman 이란? >npm install -g yo //yo 설치 Yeoman Generator <Yo 기본 설치 명령어>
13 >npm install -g generator-angular // 제너레이터 설치 >mkdir myApp // myApp이라는 폴더를 만들고 >cd myApp // myApp 폴더로이동 >yo angular myApp //myApp에 앵귤러 프로젝트 생성 Yeoman Generator http://yeoman.io/generators/ Yeaman팀의 공식적인 generator에는 수염아이콘이 표시되어 있음 스케폴딩 파일을 생성하려면 목적에 맞는 제너레이터를 사전에 설치해야 함. 1) 제너레이터 명칭 구성 : generator-<UserDefine> 예) generator-angular 2) npm 을 통하여 글로벌 설치한다. 3) yo 명령 다음에 항시 해당 UserDefine 명령이 온다. yo angular <Subject> 또는 yo angular:<SubCommand> <Subject>
14 Yeoman Generator myApp폴더에 angular 기본 구조를 설치하겠다는 명령어를 치면 아래와 같은 yeoman 캐릭터가 출력됨.
15 캐릭터가 출력된 후 아래 이미지처럼 몇 가지 추가 사항 체크. Y/N 체크 후 엔터를 치면 설치가 시작됨.
16 Yeoman Generator 설치가 끝나면 해당 디렉토리에 아래와 같은 구조로 구성되어 있음을 확인할 수 있다.
17 Yeoman Generator
18 • http://bower.io/ • 트위터에서 개발한 오픈소스 • Yeoman으로 통합되기 전부터 독자적으로 사용되고 있었음. • Yo를 통해 스케폴딩 파일을 생성하면 bower 사용을 위한 기본 환경파일도 자동 생성됨. • 프론트엔드 라이브러리 설치 및 버전 의존성 관리 도구이다. • 환경파일은 bower.json으로 라리브러리 명칭, 버전 자동 기록한다. • 기본적으로 ‘bower_component’ 폴더를 생성, 저장한다. • 라이브러리 설치 위치정보는 .bowerrc에서 변경가능 >npm install -g bower //bower 설치 <bower 기본 설치 명령어>
19 • 라이브러리 설치 : bower install <package> • http://bower.io/search/ bower package 리스트 >bower install angular-larest // 설치방법 --save (또는 --save-dev)“ >bower –save angular-larest >bower search <package> // 검색 >bower list // 보기 >bower help // 도움말 bower help <명령어>
20 { "name": “myApp", "version": "0.0.0", "license": "MIT", "dependencies": { "angular": "1.2.15", … // }, "devDependencies": { "angular-mocks": "1.2.15", … // } } • bower.json 해당 프로젝트의 전반적인 정보와 프로젝트가 의존하고 있는 라이브러리 목록등을 작성
21 • .bowerrc 내려받은 라이브러리들이 위치하게 될 디렉토리 경로를 작성 { "directory": "app/bower_components“ } // 기본 설치 경로는 bower_components이나 디렉토리 경로를 해당 파일에서 변경가능
22 Yeoman Generator
23 • http://gruntjs.com/ • 자바스크립트 빌드 도구 • 자바의 ant와 같은 기능을 수행한다. • 환경파일은 Gruntgile.js • Yo를 통해 스케폴딩 골격 생성시 Gruntfile.js 환경파일이 기본 설치됨. • 다양한 플러그인을 통해 기능을 첨부, 확장 가능 • 기본적으로 사용되는 플러그인은 node_module 폴더에 자동 설치됨. >npm install -g grunt-cli //grunt 설치 <Grunt 기본 설치 명령어>
24 >grunt test // 테스트 >grunt build // 빌드 >grunt server // 프리뷰 • http://gruntjs.com/plugins 그런트 플러그인 리스트 그런트 팀의 공식 플러그인에는 ★아이콘 표시 >npm install grunt-contrib-less --save-dev // contrib-less 플러그인 설치 grunt.loadNpmTasks('grunt-contrib-less'); 플러그인이 설치되면, 그것은 자바 스크립트의이 라인으로 Gruntfile 내에서 사용할 수 있음

More Related Content

Yeoman(모던웹 개발을 위한 관리도구)설치사용가이드

  • 1. 모던 웹 개발을 위한 필수 도구 YEOMAN 설치사용가이드
  • 3. 3
  • 4. 4 • Front-End 개발을 도와주는 자동화 도구. (비교 : 자바의 엔트, 메이븐, 그랜들) • 자바스크립트 MV*, html5 web component 모듈별 버전 의존성 관리를 위한 기본 도구 • BSD License (Berkeley Software Distribution) *다음 페이지에 라이선스에 대한 설명 첨부 : 소스코드 공개의 의무가 없으며 상용(상업적) 소프트웨어에서도 무제한 사용 가능한 라이센스 • Yeoman의 구성은 YO, BOWER, GRUNT 세 가지로 구성되어 있다. http://yeoman.io/ - Yo(스케폴딩 생성) : 기본적인 코드 골격을 만들어 준다. - Bower(라이브러리 의존성 관리) : 다양한 jquery 모듈, angular.js 모듈의 설치 및 버전 관리를 한다 . - Grunt(테스트 및 빌드 자동화) : 테스트 수행(테스트코드 작성해야함) 및 문법오류 검사 그리고 배포파일을 생성한다.
  • 5. 5 * 첨부 <공개 SW 라이선스 비교> https://wiki.kldp.org/wiki.php/OpenSourceLicenseGuide • GPL(General Public License) - Free Software Foundation(FSF)에서 만든 Free 소프트웨어 라이센스 - GPL 코드를 사용한 SW를 내부적인(개인, 기관, 단체 등) 목적으로만 사용할 때에는 소스코드를 공개 의무 없음 - 어떤 형태로든(유료든 무료든) 외부에 공표/배포할 때에는 전체 소스코드를 공개해야 함. • LGPL(Lesser General Public License) - LGPL은 GPL보다는 훨씬 완화된(lesser) 조건의 공개 소프트웨어 라이센스 - 소스코드를 공개의무 없음. LGPL 코드를 사용했음을 명시해야 함 - 파생된 라이브러리를 개발하여 배포하는 경우에는 전체 코드를 공개. • BSD(Berkeley Software Distribution) - 소스코드 공개의 의무가 없음 - 상용(상업적) 소프트웨어에서도 무제한 사용 가능한 라이센스 - 아무런 제한이 없는 라이센스
  • 6. 6 Yeoman을 설치하려면 기본적으로 아래의 Node.JS와 Git이 설치되어 있어야 한다. 해당 사이트를 방문해서 아래 표시된 버튼을 클릭하면 OS에 맞는 인스톨러를 알아서 다운로드 해준다.(*) Node.JS (http://nodejs.org/) Git (http://git-scm.com/)
  • 7. 7 Node.JS는 설치 시 디폴트로 선택 된 그대로 Next 진행하면 설치 완료 Git 설치 시 디폴트로 선택 된 상태 그대로 Next 진행하다가 해당 선택부분에서 옆의 이미지처럼 두번째 영역 선택 후 인스톨 진행
  • 8. 8 • Node.js가 설치되었다면 아래처럼 node.js 그룹 안에 속한 command prompt를 열어서 명령어 작성 초보자(디자이너)를 위한 cmd창 기본 작성 팁 #1 VCtrl + 단축키 기능 안됨 마우스 우 클릭 후 붙여 넣기로 삽입 이동키로 기 작성된 명령어 불러오기↑ ↓ <명령어> mkdir : 디렉토리(폴더)를 만듬 cd : guswo 디렉토리 이름을 보여주거나 변경 copy : 하나 이상의 파일을 다른 위치로 복사 dir : 디렉토리에 있는 파일과 하위 디렉토리 목록 del : 하나 이상의 파일을 삭제 find : 파일에서 텍스트 문자열을 찾음 exit : cmd.exe 프로그램을 마침
  • 9. 9 내가 선택한 폴더에서 cmd창을 열고 싶을때 – 해당 폴더를 선택하고 (Shift+우클릭 )해서 ‘여기서 명령 창 열기’ 선택 + 우클릭 초보자(디자이너)를 위한 cmd창 기본 작성 팁 #2
  • 10. 10 • Node.js 버전확인 > node --version && npm –version • Git 설치 및 버전확인 > git –version
  • 12. 12 • 프론트앤드 개발을 위한 기본 구조(Scaffolding)를 만들어 준다. • Yo는 yeoman팀에서 만들었으나 Bower와 Grunt는 기존에 존재했던 의존성 관리 도구를 통합한 것임. Yeoman 이란? >npm install -g yo //yo 설치 Yeoman Generator <Yo 기본 설치 명령어>
  • 13. 13 >npm install -g generator-angular // 제너레이터 설치 >mkdir myApp // myApp이라는 폴더를 만들고 >cd myApp // myApp 폴더로이동 >yo angular myApp //myApp에 앵귤러 프로젝트 생성 Yeoman Generator http://yeoman.io/generators/ Yeaman팀의 공식적인 generator에는 수염아이콘이 표시되어 있음 스케폴딩 파일을 생성하려면 목적에 맞는 제너레이터를 사전에 설치해야 함. 1) 제너레이터 명칭 구성 : generator-<UserDefine> 예) generator-angular 2) npm 을 통하여 글로벌 설치한다. 3) yo 명령 다음에 항시 해당 UserDefine 명령이 온다. yo angular <Subject> 또는 yo angular:<SubCommand> <Subject>
  • 14. 14 Yeoman Generator myApp폴더에 angular 기본 구조를 설치하겠다는 명령어를 치면 아래와 같은 yeoman 캐릭터가 출력됨.
  • 15. 15 캐릭터가 출력된 후 아래 이미지처럼 몇 가지 추가 사항 체크. Y/N 체크 후 엔터를 치면 설치가 시작됨.
  • 16. 16 Yeoman Generator 설치가 끝나면 해당 디렉토리에 아래와 같은 구조로 구성되어 있음을 확인할 수 있다.
  • 18. 18 • http://bower.io/ • 트위터에서 개발한 오픈소스 • Yeoman으로 통합되기 전부터 독자적으로 사용되고 있었음. • Yo를 통해 스케폴딩 파일을 생성하면 bower 사용을 위한 기본 환경파일도 자동 생성됨. • 프론트엔드 라이브러리 설치 및 버전 의존성 관리 도구이다. • 환경파일은 bower.json으로 라리브러리 명칭, 버전 자동 기록한다. • 기본적으로 ‘bower_component’ 폴더를 생성, 저장한다. • 라이브러리 설치 위치정보는 .bowerrc에서 변경가능 >npm install -g bower //bower 설치 <bower 기본 설치 명령어>
  • 19. 19 • 라이브러리 설치 : bower install <package> • http://bower.io/search/ bower package 리스트 >bower install angular-larest // 설치방법 --save (또는 --save-dev)“ >bower –save angular-larest >bower search <package> // 검색 >bower list // 보기 >bower help // 도움말 bower help <명령어>
  • 20. 20 { "name": “myApp", "version": "0.0.0", "license": "MIT", "dependencies": { "angular": "1.2.15", … // }, "devDependencies": { "angular-mocks": "1.2.15", … // } } • bower.json 해당 프로젝트의 전반적인 정보와 프로젝트가 의존하고 있는 라이브러리 목록등을 작성
  • 21. 21 • .bowerrc 내려받은 라이브러리들이 위치하게 될 디렉토리 경로를 작성 { "directory": "app/bower_components“ } // 기본 설치 경로는 bower_components이나 디렉토리 경로를 해당 파일에서 변경가능
  • 23. 23 • http://gruntjs.com/ • 자바스크립트 빌드 도구 • 자바의 ant와 같은 기능을 수행한다. • 환경파일은 Gruntgile.js • Yo를 통해 스케폴딩 골격 생성시 Gruntfile.js 환경파일이 기본 설치됨. • 다양한 플러그인을 통해 기능을 첨부, 확장 가능 • 기본적으로 사용되는 플러그인은 node_module 폴더에 자동 설치됨. >npm install -g grunt-cli //grunt 설치 <Grunt 기본 설치 명령어>
  • 24. 24 >grunt test // 테스트 >grunt build // 빌드 >grunt server // 프리뷰 • http://gruntjs.com/plugins 그런트 플러그인 리스트 그런트 팀의 공식 플러그인에는 ★아이콘 표시 >npm install grunt-contrib-less --save-dev // contrib-less 플러그인 설치 grunt.loadNpmTasks('grunt-contrib-less'); 플러그인이 설치되면, 그것은 자바 스크립트의이 라인으로 Gruntfile 내에서 사용할 수 있음