[javascript] Webpack과 코드 품질 도구 연동하기

29 Nov 2023

javascript

이 글에서는 JavaScript 프로젝트에서 Webpack과 코드 품질 도구를 연동하는 방법에 대해 알아보겠습니다. 코드 품질 도구는 프로젝트의 코드를 분석하여 잠재적인 문제점을 찾아내고 개선해주는 도구입니다. 주로 linting(린팅), 테스트 커버리지(coverage), 정적 타입 체크 등을 수행합니다. 이를 통해 코드의 가독성과 유지 보수성을 향상시킬 수 있습니다.

Webpack의 기본 설정

Webpack은 모듈 번들러로 JavaScript 파일을 하나로 결합하여 웹 애플리케이션을 구성할 수 있게 해줍니다. 먼저 Webpack을 설정해야 합니다. webpack.config.js 파일을 생성하고 다음과 같이 기본 설정을 추가합니다.

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
    ],
  },
};

이 설정에서는 src/index.js 파일을 진입점으로 하여 번들링하여 dist 폴더에 bundle.js 파일로 출력합니다. 또한, Babel을 사용하여 ES6 문법을 변환하는 로더를 등록합니다.

ESLint 연동

ESLint는 자바스크립트의 린트 도구로, 코드 스타일의 일관성을 유지하고 오류를 예방하는 데 도움을 줍니다. ESLint를 사용하려면 다음과 같이 패키지를 설치합니다.

npm install eslint --save-dev

eslint-config-airbnb와 eslint-plugin-import도 함께 설치합니다.

npx install-peerdeps --dev eslint-config-airbnb

다음으로 .eslintrc.js 파일을 생성하고 다음과 같이 설정합니다.

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: 'airbnb',
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
  },
  rules: {
    semi: ['error', 'always'],
    'no-console': 'warn',
  },
};

이제 Webpack의 설정에 ESLint를 추가해보겠습니다. webpack.config.js 파일을 다음과 같이 수정합니다.

const path = require('path');

module.exports = {
  // ... 이전 설정
  module: {
    rules: [
      // ... 이전 로더 설정
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader', 'eslint-loader'],
      },
    ],
  },
};

이렇게하면 Webpack 번들링 과정에서 ESLint로 코드를 검사할 수 있습니다. 코드에 ESLint의 규칙에 위반되는 부분이 있다면 오류 메시지가 표시됩니다.

Jest 연동

Jest는 테스트 프레임워크로, JavaScript 코드의 단위 테스트, 통합 테스트, 스냅샷 테스트 등을 지원합니다. Jest를 사용하려면 다음과 같이 패키지를 설치합니다.

npm install jest --save-dev

테스트 파일은 __tests__ 폴더에 작성하거나 파일명을 .test.js로 지정하여 작성합니다. 예를 들어, src/math.js에 대한 테스트 파일 src/math.test.js를 작성해보겠습니다.

const math = require('./math');

test('adds 1 + 2 to equal 3', () => {
  expect(math.add(1, 2)).toBe(3);
});

test('subtract 4 - 2 to equal 2', () => {
  expect(math.subtract(4, 2)).toBe(2);
});

이제 Webpack의 설정에 Jest를 추가해보겠습니다. webpack.config.js 파일을 다음과 같이 수정합니다.

const path = require('path');

module.exports = {
  // ... 이전 설정
  module: {
    rules: [
      // ... 이전 로더 설정
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader', 'eslint-loader'],
      },
    ],
  },
  // ... 이후 설정
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    compress: true,
    port: 3000,
  },
  // ... 이후 설정
  plugins: [
    // ... 기존 플러그인 설정
    new HtmlWebpackPlugin({
      template: 'src/index.html',
    }),
  ],
  // ... 이후 설정
  devtool: 'inline-source-map',
};

이제 package.json 파일에 다음과 같은 스크립트를 추가하여 Jest를 실행할 수 있습니다.

{
  "scripts": {
    "test": "jest"
  }
}

이제 npm test 명령으로 Jest를 실행할 수 있습니다.

결론

이렇게하면 Webpack과 코드 품질 도구를 연동하여 프로젝트의 코드 품질을 향상시킬 수 있습니다. ESLint로 코드 스타일을 체크하고 Jest로 테스트를 작성하여 안정성과 신뢰성을 높일 수 있습니다. 이러한 도구를 적극 활용하여 개발 생산성을 높이고 코드의 유지 보수성을 향상시키는 데 도움이 되기를 바랍니다.

Webpack의 기본 설정

ESLint 연동

Jest 연동

결론

참고 자료