함수형 자바스크립트의 기초

2017년 03월 15일


실습 환경 구축하기

앞으로 이어지는 강좌는 Node 환경에서 ES6 문법(혹은 그 이상의 확장)을 사용합니다.

강좌에서는 최적화나 번들링이 필요하지 않기 때문에 간단히 babel-node를 이용해서 실습을 진행합니다.

패키지 매니저는 yarn을 사용합니다. 여기서 설치법을 확인할 수 있습니다. Alternative의 npm을 이용한 설치를 추천합니다.

바로 시작하기

환경설정보단 당장 개발에 집중하고 싶으시다면 완성된 코드를 사용할 수 있습니다.

프로젝트를 만든 뒤, package.json를 작성하고 yarn install를 입력합니다.

package.json

{
  "name": "merong",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.6.1"
  },
  "scripts": {
    "start": "node_modules/.bin/babel-node index.js"
  },
  "babel": {
    "presets": [
      "env"
    ]
  }
}

index.js 파일을 작성합니다.

index.js

import fs from 'fs';

console.log('Hello Babel');

마지막으로 yarn start로 실행합니다.

[merong-shell] $ yarn start
Hello Babel

모든 실습의 준비가 끝났습니다.

babel 프로젝트 만들기

직접 실습을 위한 환경을 셋팅할 수 있습니다.

새로운 디렉터리를 만든 뒤 yarn init을 입력해서 프로젝트를 시작합니다.

지금까지 문제가 없다면 다음과 같은 package.json 파일이 생성됐을 것 입니다.

{
  "name": "merong",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

이제 ES6 코드를 실행시켜줄 babel-node가 필요합니다. babel-node는 babel-cli를 설치해서 사용할 수 있습니다.

babel-node를 컴퓨터에 전역으로 설치하는 방법과 프로젝트에 설치하는 방법이 있습니다.

전역으로 설치하는 것이 간단하지만, 개인적으로 프로젝트에 설치하는 것을 추천드립니다.

두 가지 모두 설명하지만 프로젝트에 설치하는 것을 기준으로 진행합니다.

전역 환경에 설치

다음의 명령어를 쉘에 입력합니다. 설치가 완료되면 쉘에 babel-node를 입력해서 실행이 되는지 살펴봅니다.

[merong-shell] $ yarn global add babel-cli
[merong-shell] $ babel-node
> console.log('Hello Babel');

잘 실행되지 않는다면 설치시 sudo를 붙입니다.

그래도 안되면 환경변수를 설정해야 하기 때문에 프로젝트에 설치하는 방법으로 넘어갑니다.

프로젝트에 설치

여러 환경에서 같은 프로젝트를 공유할 때는 babel-node를 프로젝트에 설치하는 편이 좋습니다.

전역으로 설치하는 것과 비슷하지만, 실행하는 과정이 약간 복잡합니다.

yarn으로 패키지를 설치하면 node_modules에 추가되고, 실행할 수 있는 패키지는 node_modules/.bin이라는 디렉터리에 따로 실행파일을 제공합니다.

babel-cli를 설치하면 node_modules/.bin/babel-node라는 실행파일이 제공되기 때문에 이를 직접 실행할 수 있습니다.

[merong-shell] $ yarn add babel-cli
[merong-shell] $ node_modules/.bin/babel-node
> console.log('Hello Babel');

이러한 방식은 프로젝트를 배포할때 유리합니다.

전역으로 babel-node가 설치되있지 않아도 yarn install 명령어로 개발환경이 준비되고, 버전 문제가 발생할 일이 없습니다.

ES6 코드 사용하기

이제 거의 준비가 끝났습니다. 프로젝트에 index.js 파일을 만들어서 babel-node가 제대로 작동하는지 확인해봅시다.

index.js

import fs from 'fs';

console.log('Hello Babel');

전역으로 설치한 경우

[merong-shell] $ babel-node index.js

프로젝트에 설치한 경우

[merong-shell] $ node_modules/.bin/babel-node index.js

잘 동작하기를 바랬지만 에러가 발생합니다

(function (exports, require, module, __filename, __dirname) { import fs from 'fs';
                                                              ^^^^^^

SyntaxError: Unexpected token import

import 구문을 babel-node가 이해하지 못한 것 같습니다.

실제로 그렇습니다. 지금까지 babel-node를 설치하기만 했지, 어떻게 ES6 코드를 해석할지 명시하지 않았습니다.

이 역할을 하는 것이 babel-preset-env 패키지입니다. 다음과 같이 패키지를 추가해줍니다.

[merong-shell] $ yarn add babel-preset-env

이제 babel-node가 babel-preset-env를 인식할 수 있도록 설정합니다.

package.json에 babel 필드를 추가해서 설정할 수 있습니다.

package.json

{
  "name": "merong",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.6.1"
  },
  "scripts": {
    "start": "node_modules/.bin/babel-node index.js"
  },
  "babel": {
    "presets": [
      "env"
    ]
  }
}

babel 필드를 package.json에 추가하면 babel-node가 실행될 때 참조해서 설정이 입력됩니다.

프로젝트에 babel-node를 설치했기 때문에 매번 실행할때 입력하는 명령어가 너무 깁니다.

scripts 필드에서 start 명령어를 만들면 다음과 같이 간단히 실행할 수 있습니다.

[merong-shell] $ yarn start
> Hello Babel

이제 모든 준비가 끝났습니다.