프론트엔드 개발을 위한 웹팩 기본 설정 가이드 #2 : webpack react babel eslint

프론트엔드 개발을 위한 웹팩 기본 설정 가이드 #2 : webpack react babel eslint

이번 시간에는 리액트를 사용하기 위한 설정과 바벨을 이용하여 현대적 코딩 기술을 사용할 수 있는 설정에 대해 알아본다. 그리고 협업시 코드가 통일될 수 있고 문제가 될 코드를 사전에 검출하기 위해 eslint 를 적용한는 방법까지 알아본다.

최신 리액트는 바벨에 의존하여 빌드된다. 그래서 바벨과 함께 설정해줘야 한다. 리액트를 설치한다. 리액트는 운영시에도 사용되기 때문에 개발모드가 아닌 의존성에 설치해야 한다.

$ npm i -S react react-dom

바벨을 설치한다. 바벨은 다양한 프리셋과 플러그인이 있는 데 필요한것만 꼭 설치해야 한다. 무분별한 사용은 엔트리(스크립트) 용량만 차지하므로 좋은 방법은 아니다.

최종 결과 스크립트가 용량이 커지면 당연히 첫 페이지 로등속도에 악영향이 발생한다. 느린건 누구에게나 치명적인 약점이 될 수 있는 게 인터넷이다. 그래서 엔트리를 어떻게 나눠야하는 지에 대한 전략도 리액트 개발만큼이나 중요하다. 

바벨은 빌드될때만 사용하기 때문에 배포될때는 필요없다. 그래서 개발자 모드 의존성에 설치하면 된다. 그리고 프리셋은 현대식 코드를 사용하기 위해 설치해야 한다. 하지만 이전에 말했듯이 무분별한 설치보다 필요한 최소한의 것만 설치하는 것이좋다. 프리셋은 스태지 숫자가 높을 수록 포함된 플러그인이 적다. 숫자가 낮아질 수록 높은 숫자의 스태이지를 포함하고 있다.

바벨을 웹팩에서 사용하기 위해 필요한 패키지를 설치한다.

$ npm install -D babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-3

모두 설치하고 웹팩설정은 아래와 같이 추가한다.

< / > webpack.config.js

module: {
    rules: [
      ... skip ...
      {
        test: /\.js$/, // 여러개 [/\.js$/, /\.jsx$/]
        include: path.resolve(__dirname, 'src'),
        loader: 'babel-loader',
        query: {
          presets: [ 'react', 'es2015', 'stage-3' ]
        }
      }
    ]
}

만약 플러그인을 추가적으로 사용한다면 아래와 같이하면 된다.

module: {
    rules: [
      ... skip ...
      {
        test: /\.js$/, // 여러개 [/\.js$/, /\.jsx$/]
        include: path.resolve(__dirname, 'src'),
        loader: 'babel-loader',
        query: {
            presets: [ 'react', 'es2015', 'stage-3' ],
            plugins: [ ... ] // <---- 여기 플러그인 추가한다.
        }
      }
    ]
}

만약 데이터를 관리하기 위한 컬랙션 프레임워크중 lodash 를 사용한다면 주의해야할 것이 있다. 

import _ from 'lodash'

위와 같이 사용한다면 모든 기능을 사용한다는 의미이므로 필요없는 기능들까지 스크립트에 포함된다. lodash 는 의외로 용량이 크다. 이전에도 말했듯이 용량은 최소화하는 것이 중요하다. 그래서 아래와 같이 필요한것만 임포트해야하는 데...

import _ from 'lodash/필요한기능'

이런식으로 한다면 얼마나 귀찮은 일인지... 그래서 lodash 같은 경우 바벨 플러그인을 이용하면 import 는 lodash 모두를 하더라도 꼭 사용하는 것만 호출되게 자동으로 처리해주는 것이 있다.

$ npm i -D babel-plugin-lodash

설치를 하고 웹팩은 다음과 같이 설정해준다.

plugins: ['lodash'] // lodash 를 추가한다.

이제 편하게 통으로 import 를 하고 webpack-bundle-analyzer 통해 전부가 사용되지 않고 있는 것을 확인한다.

webpack-bundle-analyzer 는 웹팩으로 빌드된 것들을 자세하게 확인할 수 있는 아주 좋은 빌드 분석 툴이다.

엔트리마다 무엇이 포함되어 있고 용량은 얼마인지 쉽게 확인할 수 있는 통계표이다.

https://github.com/th0r/webpack-bundle-analyzer

사용하려면 아래와 같이 한다.

$ npm i -D webpack-bundle-analyzer

웹팩 설정에서 플러그인부분에 추가해준다.

plugins: [
  new BundleAnalyzerPlugin()
]

시작하면 서버가 구동되어 자동으로 브라우저를 실행해 웹페이지가 출력된다. 

$ webpack --profile --json > stats.json

일반적으로 코딩을 개발하다보면 내가 올바르게 개발하고 있는 건지에 대해 의문이 생길때도 있고 실수를 할때도 있다. 불필요한 코드나 더 나은 방법을 제시하거나 그리고 협업할때 여러 사람이 코딩하면 개인마다 스타일이 틀려 가독성이 떨어지는 코드를 접할때는 집중도가 현저하게 떨어지거나 일하기 싫어질정도로 괴로워지기도 한다.

이런 코드를 통일화 시키고 문제가 될듯한 코드를 찾아 주는 것을 eslint 에서 도와준다. 무엇보다 vscode 같은 툴을 이용하면 표시까지 되어 쉽게 오류를 알 수 있고 문제된 코드를 자동으로 치환까지 해주니 아주 똑똑한 지원군이 아닐수 없다.

http://eslint.org/

문제를 검출하기 위해 eslint 에서는 다양한 규칙들을 제공한다. 하지만 규칙들이 너무 많에 도입하기도 전에 규칙을 분석하다가 포기할지도 모른다. 그래서 이런 규칙들을 이미 정립해둔 플러그인이 있다.

airbnb 라는 회사에서 만든 플러그인인데 이제 eslint 를 도입하는 곳이라면 이 플러그인을 먼저 사용하고 추후 하나하나 정립해나는 것도 큰 도움이 될 것이다.

https://github.com/airbnb/javascript

우선 기본적인 eslint 를 사용하기 위해 아래와 같이 진행한다.

$ npm i -D eslint eslint-loader

$ npm i -D eslint-config-airbnb eslint-plugin-import eslint-import-resolver-webpack eslint-plugin-jsx-a11y eslint-plugin-promise eslint-plugin-react

첫번째 설치는 eslint 에 관한 것이고 두번째는 airbnb eslint 를 사용하기 위해 필요한 설치이다.

.eslintrc 파일을 만들고 아래와 같이 설정한다. .eslintrc 를 만들면 vscode 같은 툴에서 사용되는 설정이다. 파일위치는 eslint 가 적용될 최상위 위치에 폴더에 넣으면 되고 하위 폴더 모두에게 적용된다.

{
  "extends": "airbnb",
  "env": { "browser": true },
  "settings": {
    "import/resolver": "webpack"
  },
  "rules": {
    "react/jsx-filename-extension": [
      1,
      { "extensions": [".js", ".jsx"] }
    ]
  }
}

vscode 인 경우 마켓플레이스에서 eslint 를 검색하거나 dbaeumer.vscode-eslint 설치하면 된다.

마지막으로 웹팩이 구동될때 실행되게 하려면 아래와 같이 플러그인에 추가한다.

module: {
    rules: [
        {
            test: [/\.jsx$/, /\.js$/],
            enforce: 'pre',
            loader: 'eslint-loader',
            include: path.join(__dirname, 'react/src') // <--- eslint 에 의해 검출된 소스 경로
        }
    ]
}

ps. 하기싫은거 억지로한 느낌.... 그래도 했네 ㅜ,.ㅜ

Syaku Blog by Seok Kyun. Choi. 최석균.