모던 웹 개발을 위한 필수 도구 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

V Ctrl + 단축키 기능 안됨

마우스 우 클릭 후 붙여 넣기로 삽입

이동키로 기 작성된 명령어 불러오기 ↑ ↓

<명령어>

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