chapter2. 자바스크립트 개발 도구

2.1 자바스크립트 개발 도구

1) 깃 (git) : 프로젝트가 커져도 쉽게 관리할 수 있고 다른 개발자와 협력할 수 있게 하는 버전 컨드롤 도구
2) 노드(node): 브라우저 밖에서 자바스크립트를 실행 가능하게 하는 도구
3) 걸프 (Gulp) : 반복적인 개발 작업을 자동화하는 빌드 도구
4) 바벨 (babel) : ES6 ->ES5 로 변환하는 트랜스컴파일러
5) ES린트 (ESLint) :자주하는 실수를 피하고 더 나은 프로그래머가 되도록 돕는 린트 프로그램

2.2.1 GIT 설치

• 깃설치
  link: https://git-scm.com/downloads

2.2.2 gitbash 설치

• \ : 일반 윈도우에서는 /(역슬래시) 로 디렉터리를 표시하지만 gitbash에서는 (슬래시)로
• ~ : 홈 디렉터리
• cd : 다른 디렉터리로 이동
• pwd : 현재 디렉터리 경로 출력
• mkdir test : 현재 디렉터리에서 test 라는 서브 디렉터리를 만든다.
• cd .. : (..) 은 부모 디렉터리로 한 단계 위 디렉터리로 이동하게

2.2.6 걸프와 그런트

gulp : 반복 작업을 자동화 해주는 도구

1) 터미널에 각각 명령어를 입력해 걸프를 설치한다.

1
2

npm install -g gulp
npm install --save-dev gulp

2) 설치 후 프로젝트 루트에 gulpfile.js를 만든다.

1
2
3
4
5
6

const gulp = require('gulp');
//걸프 의존성을 여기 씁니다.
 
gulp.task('default', function() {
    //걸프 작업을 여기 씁니다.
});

2.3 트랜스컴파일러 - 바벨

1) 바벨을 설치해준다.

1

npm install --save-dev gulp-babel @babel/core @babel/preset-env

2) 프리셋 설치 후에 프로젝트 루트에 .babelrc 파일을 만든다.

1
2
3

{ "presets": ["es2015"] }  
#위와 같이 작성하는 프리셋내용도 아래와 같이 변경이 필요하다.
{ "presets": ["@babel/preset-env"] }

2.3.1 바벨을 걸프와 함께 사용하기

1) gulp-babel 패키지를 설치한다.

1

npm install --save-dev gulp-babel

2) gulpfile.js를 수정한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

const gulp = require('gulp');
const babel = require('gulp-babel');
 
gulp.task('default', function() {
    //노드소스
    gulp.src('es6/**/*.js')
    .pipe(bable())
    .pipe(gulp.dest('dist'));
    //브라우저 소스
    gulp.src('public/es6/**/*.js')
    .pipe(babel())
    .pipe(gulp.dest('public/dist'));
 
    done();
});

2.4 린트

1
2

npm install -g eslint
npm install --save-dev gulp-eslint