[최신 웹 프론트엔드 개발환경 세팅] 4. 개발환경 세팅

4) 개발환경 세팅

 

대표적으로 ES6+ 문법이 실행되지 않는 브라우저인 인터넷 익스플로러(IE)에서 ES6+로 작성된 코드가 정상적으로 실행되도록 만들기 위해, 개발환경을 세팅해보도록 하겠습니다. 이 글은 윈도우를 기준으로 작성되었으며, 따라서 사용된 명령어들은 cmd 명령어임을 미리 말씀드립니다. 

 

(1) Babel 설치

//프로젝트 폴더 생성
mkdir es6-demo
 
//package.json 생성
npm init -y
 
//babel 설치
npm install --save-dev @babel/core @babel/cli

바벨을 설치하기 앞서 npm 프로젝트를 먼저 생성합니다. 프로젝트마다 환경이 상이하기 때문에, 로컬로 설치하기 위하여 프로젝트 폴더를 생성해줍니다.

기본 필수 패키지인 바벨 코어와 커맨드라인 인터페이스인 cli 패키지를 설치해주겠습니다.

이렇게 babel까지 설치하게 되면 폴더에는 아래와 같이 node_modules와 package.json 파일이 생성됩니다. 

package-lock.json?
node_modules와 package.json은 익숙하지만 package-lock.json은 무엇인지 잘 모르실 수 있습니다. ( node_modules :현재 프로젝트에 설치된 모듈들, package.json: 프로젝트의 정보와 사용중인 모듈 관리)
package-lock.json은 안정성을 위해 함께 설치되는 것으로, 프로젝트에 설치된 노드 모듈들의 의존성 트리를 기록하고 있습니다. 추후 npm install로 모듈을 재설치할 때 모두 개발시와 동일한 버전으로 설치되는 것을 보장해주는 역할을 합니다. 

 

이렇게 생성된 package.json을 열어보면 아래와 같습니다. 

{
  "name": "es6-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.7.0",
    "@babel/core": "^7.7.2"
  }
}

여기에서 중요한 설정은 name과 version, devDependencies이며 나머지는 굳이 필요하지 않다면 삭제해도 상관없습니다.

 

이제 Babel을 사용하기 위해 필수적이라고 말할 수 있는 babelrc 설정 파일을 작성해주어야 합니다. 위에서 설치한 것은 바벨의 코어이고, 이 프로젝트에 작성된 코드가 어떻게 변환되어야 하는지 알려줄 필요가 있습니다. 이를 위해 @babel/preset-env를 설치해야 합니다. 우리는 es6 문법을 변환하는 것이기 때문에 preset-env를 설치하는 것이며, 이외에 Babel이 제공하는 공식 프리셋(Official Preset)은 아래와 같습니다. 

• @babel/preset-env
• @babel/preset-flow
• @babel/preset-react
• @babel/preset-typescript

 

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

설치가 완료되면, 프로젝트 루트에 .babelrc 파일을 생성하고, 어떤 프리셋을 사용할지 기재해 주어야 합니다. 

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

여기까지 했다면, 바벨을 위한 설정은 끝났습니다. 이제 웹팩을 설정하도록 하겠습니다.

 

 

(2) Webpack 설치

npm install --save-dev webpack webpack-cli

바벨과 유사하게 webpack과 webpack-cli를 설치하면 package.json의 devDependencies에 해당 패키지가 추가된 것을 확인할 수 있습니다. 

{
  "name": "es6-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.7.0",
    "@babel/core": "^7.7.2",
    "@babel/preset-env": "^7.4.5",
    "webpack": "^4.32.2",
    "webpack-cli": "^3.3.2"
  }
}

바벨과 웹팩을 연동하고자 한다면, 즉 웹팩이 모듈을 번들링 할 때 바벨을 이용하여 ES6+ 코드를 ES5 코드로 트랜스파일링하도록 하려면, babel-loader 패키지를 설치해주어야 합니다. 

npm install --save-dev babel-loader

이제 남은 것은 webpack.config.js 를 설정하는 것입니다. 프로젝트 루트에 webpack.config.js 파일을 만들고 아래와 같이 기재합니다. 

const path = require('path');
 
module.exports = {
  // enntry file
  entry: './src/js/main.js',
  output: {
    path: path.resolve(__dirname, 'dist/js'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: [
          path.resolve(__dirname, 'src/js')
        ],
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

웹팩을 실행하여 트랜스파일링 및 번들링을 실행하면, bundle.js라는 파일이 생성됩니다. 그러면 우리는 이렇게 생성된 결과물을 script로 추가해주기만 하면 됩니다. 이는 다음 글에서 예제를 구현하며 자세히 살펴보도록 하겠습니다.