Namkun

그날 배운거 올리는 블로그

LearningJS-CH02

3 분 소요

자바스크립트 개발도구

  • 깃 : 버전 컨트롤 도구
  • 노드 : 브라우저밖에서도 자바 스크립트를 실행할 수 있게하는 도구. 같이 설치되는 npm은 리스트의 다른 도구를 설치할 때 필요하다.
  • 걸프(gulp) : 반복적인 개발 작업을 자동화하는 빌드 도구이다.
  • 바벨(babel) : ES6 코드를 ES5코드로 변환하는 트랜스 컴파일러이다.
  • ESLint : 자주하는 실수를 피하고 더 나은 프로그래머가 되도록 돕는 프로그램

git 설치하는 부분 패스

2.5.2 npm패키지 관리

여기서는 npm을 이용해서 빌드 도구와 트랜스컴파일러를 설치해봅시다.

우선 node를 설치하고, 잘 동작하는지 확인해봅니다.

$ node -v
v10.14.1
$ npm -v
6.4.1

npm을 설치할 때는 전역, 또는 로컬로 설치할 수 있다. 전역으로 설치하는 패키지들은 보통 개발 과정에서 사용하는, 터미널에서 실행하는 도구들입니다. 로컬 패키지는 각 프로젝트에 종속되는 패키지입니다. 패키지를 설치할때는 npm install이라는 명령어를 사용합니다.

이제 이를 underscore이라는 패키지를 설치해보면서 어떻게 동작하는지 알아봅시다.

npm install underscore

위의 명령어를 실행하면, node_modules라는 폴더가 생성되는 것을 볼 수 있다. 이곳에 로컬 모듈이 설치되는 곳입니다.

설치하는 모듈이 많아지면, 모듈을 추적하고 관리할 방법이 필요해집니다. 프로젝트에 설치하고 사용하는 모듈을 의존성(dependency)라 부릅니다. npm은 package.json 파일을 통해 의존성을 관리합니다. 해당 파일은 npm init이라는 명령어를 통해서 만들어집니다. 우선 모든 질문에 엔터를 눌러 기본값을 사용해봅시다. 완료하면 package.json파일이 생성됩니다.

의존성은 일반 의존성과 개발 의존성으로 나뉩니다. 개발 의존성은 앱을 실행할 때는 필요없지만, 프로젝트를 개발할 때 필요하거나 도움이 되는 패키지를 말합니다. 지금 부터는 로컬 패키지를 설치할 때에는 --save 또는 --save-dev플래그를 사용합니다. 사용하지 않아도 설치는 되지만, 이것들을 사용해야지만 package.json 파일에 등록이 됩니다.

다시한번 underscore를 설치해보겠습니다.

npm install --save underscore

그러면 이제 package.json파일에 다음과 같이 의존성 리스트에 underscore가 있는 것을 알 수 있습니다. package.json

  "dependencies": {
    "underscore": "^1.9.1"
  },

다시 node_modules를 지우고 npm install을 해주면 의존성부분에 있는 underscore이 다시 설치되는 것을 볼 수 있습니다.

2.2.6 Build Tools : gulp & Grunt

걸프와 그런트는 개발 과정에서 피할 수 없는 반복작업을 자동화해주는 빌드 도구들입니다.

이 중 우리는 걸프를 사용해보도록합니다.

먼저 걸프를 npm을 통해 전역 install해봅니다. 전역 인스톨할때 -g를 붙여줍시다.

$ npm install -g gulp

그리고 프로젝트마다 로컬 걸프가 필요하므로, 프로젝트 루트에서 npm install --save-dev gulp명령을 실행합니다.

걸프는 최종 사용자에게는 필요없지만, 개발 과정에서 도움이 되는 개발 의존성에 속합니다. 걸프가 없어도 앱은 잘 작동되지만, 개발할 때, 걸프가 있으면 작업이 편해집니다. 걸프가 설치되면 gulpfile.js를 만들어줍니다.

const gulp = require("gulp");
// 걸프 의존성을 여기 씁니다.

gulp.task("default", function(done) {
  // 걸프 작업을 여기에 씁니다.
  done();
});

걸프에 할일을 정해주지는 않았지만, 설치가 잘되었는지 확인은 할 수 있습니다

terminal에 gulp라고 쳐봅시다.

책에 있는 것과 다르게 작성한 이유는 gulp가 3.x.x에서 4.x로 넘어가면서 사용하는 방법이 바뀌었기 때문입니다.

2.2.7 프로젝트 구조

서버 쪽 코드는 프로젝트 루트의 es6 디렉터리에 저장하고 브라우저 코드는 public/es6 디렉터리에 저장합니다.

브라우저에 보내는 자바스크립트는 원래 공개된(public) 것이고, 이런 식으로 저장하는 프로젝트가 아주 많습니다.

public 폴더를 만들고 안에 es6, dist 폴더를 만들어줍니다. 그리고 프로젝트 경로에도 es6, dist 폴더를 만들어줍니다.

2.3 트랜스 컴파일러

여기서는 트랜스 컴파일러로 BABEL을 사용하기로 합니다.

먼저 ES6 프리셋을 설치해줍니다.

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

이제 프로젝트 루트에 .babelrc파일을 만들고 그안에 다음과 같은 내용을 넣습니다.

{
    "presets": ["@babel/preset-env"]
}

책에서는 babel 6버전 기준이기에 아래와 같이 하라고 하지만, 우리는 babel 7 버전을 사용하고 있기 때문에 위처럼 넣어줘야 작동합니다.

{
    "presets": ["es2015"]
}

이 파일이 있다면 프로젝트에서 바벨을 사용할 때 ES6를 사용한다는 것을 인식하게 됩니다.

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

이제 걸프로 유용한 일을 해봅시다. 바로 ES6를 ES5로 바꾸는 일입니다.

es6와 public/es6에 있는 코드를 es5로 변환해서 dist와 public/dist에 저장할겁니다.

npm install --save-dev gulp-babel 명령으로 gulp-babel패키지를 설치합니다.

그리고 다음과 같이 gulpfile.js를 수정합니다. 우리는 여전히 gulp 4.x.x에 맞춰줘야하기때문에 다음과 같이 해줍시다.

const gulp = require('gulp');
//걸프 의존성
const babel = require('gulp-babel');

gulp.task('default', function () {
    //걸프 작업
    //노드 소스
    return gulp.src('es6/**/*.

    ')
        .pipe(babel())
        .pipe(gulp.dest('dist'));
});

gulp.task('default', function () {
    //브라우저 소스
    return gulp.src('public/es6/**/*.js')
        .pipe(babel())
        .pipe(gulp.dest('public/dist'));
});

걸프는 파이프라인 개념으로 작업을 처리합니다. 우선 변환할 파일을 (src("es6/**/*.js")) 이렇게 지정했습니다.

여기서 **은 ‘서브 디렉터리를 포함한 모든 디렉터리’를 의미합니다. 즉, es6 밑의 모든 파일 중 .js의 확장자를 갖는 녀석을 선택합니다. 그 다음 선택한 파일들을 pipe로 바벨에 연결해줍니다. 연결하면, 바벨은 선택된 파일들을 ES5로 변형합니다. 그 다음 다시 pipe를 통해 gulp.dest를 통해 컴파일 된 파일들의 목적지를 설정해줍니다.

따라서 es6에 있는 ES6 js 파일들은 dist로 ES5가 되어 저장되고, 마찬가지로 public/es6에 있는 js는 public/dist로 컴파일됩니다.

이제 이를 터미널에서 실행해봅시다.

$ node es6/test.js
JavaScript is great
Elephants are large

$ node dist/test.js
JavaScript is great
Elephants are large

잘 된 다!

2.4 ESLint

린트는 우리가 코드를 작성하며 발생하는 사소한 틀림을 잡아줄 수 있는 프로그램이다. ES Lint를 설치해보자!

npm install -g eslint

이제 프로젝트에 쓸 설정파일인 .eslintrc를 만들어줘야한다. 프로젝트마다 다른 표준이나 규칙에 따라 작업해야할 수도 있고, 그에 맞게 .eslintrc 를 만들어 린트 규칙을 적용할 수 있다.

.eslintrc은 eslint --init명령을 내리고 몇가지 질문에 답하면 만들어진다.

우리는 빌드할때마다 걸프를 실행해야 하므로, 걸프파일에 코드를 더해줘야한다.

우선 다음 코드를 통해 gulp-eslint를 설치해준다. npm install --save-dev gulp-eslint

그 다음 gulpfile.js에 다음과 같이 바꿔준다.

...
const eslint = require('gulp-eslint');

gulp.task('default', function () {
    // eslint를 실행합니다.
    return gulp.src(['es6/**/*.js', 'public/es6/**/*.js'])
        .pipe(eslint())
        .pipe(eslint.format());
});
...
  • + prettier 플러그인을 쓰고있기 때문에, 나는 eslint-plugin-prettier를 따로 깔아줘야한다…

댓글남기기

참고