러닝 자바스크립트 스터디 자료 - CHAPTER 2. 자바스크립트 개발 도구

CHAPTER 2. 자바스크립트 개발 도구에서는 제목 그대로 개발도구들에 대해서 설명하고 세팅하는 방법에 대해서 나와있었다. 책에있는 개발도구들을 정리해보면 아래와 같다.

  1. Git : 컴퓨터 파일의 변경사항을 추적하고 여러 명의 사용자들 간에 해당 파일들의 작업을 조율하기 위한 분산 버전 관리 시스템
  2. node.js : 확장성있는 네트워크 애플리케이션 개발에 사용되는 소프트웨어 플랫폼
  3. npm(노드 패키지 매니저/Node Package Manage ) : 자바스트립트 프로그래밍 언어를 위한 패키지 관리자
  4. gulp : 반복작업을 자동화하는 빌드도구의 하나
  5. babel : ES6/ES7 코드를 ECMAScript5 코드로 트랜스파일링(transpiling) 하기 위한 도구
  6. ESlint : ES + Lint입니다. ES는 EcmaScript, 즉 자바스크립트를 의미. Lint는 보푸라기라는 뜻인데 프로그래밍 쪽에서는 에러가 있는 코드에 표시를 달아놓는 것을 의미. 자바스크립트 소스 코드가 코딩 규칭을 준수하는지 확인하기 위해 소프트웨어 개발에 사용되는 정적코드분석 도구

Git


Git의 관련 내용은 이전에 정리한 포스팅으로 대체한다.
Git의 기본적인 명령어

빌드도구: 걸프(gulp)와 그런트(grunt)


이 책에서는 그런트에 대한 설명은 없고 걸프만을 사용한다. 반복 작업을 자동화해주는 빌드 도구들이다.

먼저 걸프를 전역으로 설치합니다.

bash
1
npm install -g gulp

*걸프의 전역설치는 개발에 사용할 컴퓨터에서 한 번만 하면된다.

프로젝트 루트에서 아래명령어를 통해 사용한다.

bash
1
npm install --save-dev gulp

--save-dev 명령어는 최종 사용자에게는 필요없는 dev 버전임을 뜻한다.
걸프는 최종 사용자에게는 필요없지만, 개발 과정에서 도움이 되는 개발 의존성에 속합니다.

설치가 완료되면 프로젝트 루트에 gulpfile.js를 만듭니다.

gulpfile.js
1
2
3
4
5
6
const gulp = require('gulp');
//걸프 의존성을 작성합니다.

gulp.task('default', function() {
//걸프 작업을 작성합니다.
});

gulp를 실행하면 정상적으로 작동해야 하는데 아래와 같이 정상적으로 실행되지 않는다.

1
2
3
4
5
$ gulp
[17:03:41] Using gulpfile c:\LearningJS\gulpfile.js
[17:03:41] Starting 'default'...
[17:03:41] The following tasks did not complete: default
[17:03:41] Did you forget to signal async completion?

원인을 찾아보니 책출판 당시와 지금의 걸프버전이 바뀌면서 변화가 있었다고 한다. 이 부분은 바벨과 같이 엮어서 다시 살펴보기로 한다.
일단 실행을 된다.

트랜스컴파일러 - 바벨(babel)

바벨을 ES5를 ES6로 바꾸는 트랜스컴파일러로 시작했고, 프로젝트가 성장하면서 ES6와 리액트, ES7등 여러 가지를 지원하는 범용 트랜스 컴파일러가 됐다.
바벨 버전6부터는 ES5를 ES6로 변환하려면 ES6변환 프리셋을 설치하고 바벨이 해당 프리셋을 사용하게끔 설정을 해야 한다.

ES6 프리셋 설치는 아래와 같다.

bash
1
npm install --save-dev babel-preset-es2015

실행하면 중간에 경고 문구가 하나 뜬다.

1
npm WARN deprecated babel-preset-es2015@6.24.1: 🙌  Thanks for using Babel: we recommend using babel-preset-env now: please read https://babeljs.io/env to update!

babel-preset-env로 업데이트가 되었으니 업데이트를 사용하는 것을 권하는 멘트이다.
babel-preset-es2015대신 babel-preset-env를 설치하여준다. @babel/core도 같이 설치 해줘야 정상적으로 실행이 된다.

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

프리셋 설치 후에 프로젝트 루트에 .babelrc 파일을 만들고 파일 내용을 작성해 줍니다.

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

파일 내용도 프리셋 버전에 맞춰서 새롭게 바꿔서 작성하여 준다.

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


책의 내용대로 gulpfile.js를 작성하려다 간편하게 바꿔서 작성하였다.

gulpfile.js
1
2
3
4
5
6
7
8
9
10
const gulp = require('gulp');
const babel = require('gulp-babel');

gulp.task('default', function(){

gulp.src("public/es6/**/*.js")
.pipe(babel())
.pipe(gulp.dest("public/es5"));

});

그리고 책의 예제대로 ES6샘플파일을 만들고 걸프 명령어를 실행해주면 오류가 난다. ㅎㅎㅎ;;;;
위에서 언급한대로 걸프의 버전이 달라져서 변화가 있었다.
이리저리 해매이다가 구글링으로 해결 방법을 찾았다.
해결방법원문

여러가지 해결책중에서 가장 간단하다는 콜백함수를 추가하는 방법을 사용하여 문제를 해결하였다.

gulpfile.js
1
2
3
4
5
6
7
8
9
10
11
const gulp = require('gulp');
const babel = require('gulp-babel');

gulp.task('default', function(done){

gulp.src("public/es6/**/*.js")
.pipe(babel())
.pipe(gulp.dest("public/es5"));

done();
});

콜백함수에 done을 추가하고 함수 끝 부분에서 실행해 줍니다.

린트(ESlint)

ESlint는 책에서 소개한 예제대로 정상작동하였다. 하나라도 그냥 넘어가서 다행이었다 ㅎㅎㅎ;;

ESlint 설치
1
npm install -g eslint

프로젝트 루트에서 eslint --init명령을 실행해주면 질문들이 나오는데 모든 질문에 답하면
.eslintrc파일이 생성됩니다. 린트 설정에 관련해서는 나중에 따로 포스팅하면 좋을것 같다.

걸프와 같이 eslint를 실행하기 위해 다음 명령을 실행합니다.

bash
1
npm install --save-dev gulp-eslint

gulpfile.js파일을 책의 예제대로 수정하고 gulp를 실행하면 정상 작동합니다.

댓글

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×