[javascript] Webpack을 이용한 코드 품질 검사

29 Nov 2023

javascript

코드 품질은 소프트웨어 개발에서 아주 중요한 요소입니다. 효율적이고 안정적인 코드를 작성하는 것은 유지보수성과 확장성을 높일 수 있는 핵심입니다. 이런 이유로 코드 품질 검사 도구를 사용하여 코드의 일관성과 오류를 검출하는 것은 매우 중요합니다.

Webpack은 자바스크립트 모듈 번들러로, 여러 개의 모듈을 하나의 번들로 묶을 수 있습니다. 이렇게 번들링된 자바스크립트 파일을 사용하여 코드 품질 검사를 수행할 수 있습니다.

ESLint를 통한 코드 스타일 검사

ESLint는 자바스크립트 코드의 일관성과 오류를 검사해주는 도구입니다. ESLint를 Webpack과 함께 사용하면 빌드 시 자동으로 코드 스타일 검사를 수행할 수 있습니다.

ESLint 설치:

npm install eslint --save-dev

.eslintrc.js 파일 생성:

module.exports = {
  extends: 'eslint:recommended',
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  rules: {
    // 원하는 규칙을 설정합니다.
  },
};

Webpack 설정에 ESLint 플러그인 추가:

module.exports = {
  // ...
  plugins: [
    new ESLintPlugin({
      files: 'src/**/*.js',
      extensions: ['js'],
    }),
  ],
};

Prettier를 통한 코드 포맷팅

Prettier는 코드의 포맷팅을 자동으로 처리해주는 도구입니다. ESLint와 함께 사용하여 코드의 일관된 스타일을 유지할 수 있습니다.

Prettier 설치:

npm install prettier --save-dev

.prettierrc 파일 생성:

{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  // 기타 선호하는 옵션을 설정합니다.
}

Webpack 설정에 Prettier 플러그인 추가:

module.exports = {
  // ...
  plugins: [
    new PrettierPlugin(),
  ],
};

위의 설정을 따르면 Webpack 빌드 시 자동으로 ESLint와 Prettier를 통해 코드 품질 검사와 포맷팅을 수행할 수 있습니다. 코드 품질 검사를 통해 더욱 안정적이고 효율적인 프로젝트를 개발할 수 있습니다.

ESLint를 통한 코드 스타일 검사

Prettier를 통한 코드 포맷팅

참고 자료