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

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

2. 2
㈜교원
디자이너 김수정
facebook : emotion.987

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

11. 11
Yeoman 이란?

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
설치가 끝나면 해당 디렉토리에 아래와 같은 구조로 구성되어 있음을 확인할 수 있다.

17. 17
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이나 디렉토리 경로를 해당 파일에서 변경가능

22. 22
Yeoman Generator

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 내에서 사용할 수 있음