[Jenkins][React+TypeScript] eslint가 배포 빌드에 영향을 미치는 점..

프론트엔드 개발환경 세팅할때 다들 자동설정되는 eslint 파일.. 아시죠..?

현재 제가 하고 있는 프로젝트는 Jenkins로 배포가 되어 있는 상황이라 브랜치로 push 하면 바로 빌드가 되어 배포 사이트에서 확인이 가능한데요,, 오늘 글은 제가 한 eslint 설정과 이것이 배포환경에 미치는 영향을 알아보도록 하겠습니다..

 

우선 저는 eslint.config.js 파일을 다음과 같이 작성했습니다

import js from '@eslint/js';
import globals from 'globals';
import reactHooks from 'eslint-plugin-react-hooks';
import reactRefresh from 'eslint-plugin-react-refresh';
import tseslint from 'typescript-eslint';
import prettier from 'eslint-plugin-prettier';
import eslintConfigPrettier from 'eslint-config-prettier';
import simpleImportSort from 'eslint-plugin-simple-import-sort';
import checkFile from 'eslint-plugin-check-file'; //파일명 체크 플러그인 import

export default tseslint.config(
  { ignores: ['dist'] },
  {
    extends: [
      js.configs.recommended,
      ...tseslint.configs.recommended,
      eslintConfigPrettier,
    ],
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
    plugins: {
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
      'simple-import-sort': simpleImportSort,
      'check-file': checkFile, // 플러그인 등록
      prettier: prettier,
    },
    rules: {
      ...reactHooks.configs.recommended.rules,

      // * import 정렬 규칙
      'simple-import-sort/imports': 'error',
      'simple-import-sort/exports': 'error',

      // * 파일명 규칙 (Jenkins 고려)
      'check-file/filename-naming-convention': [
        'error',
        {
          // ? .tsx: PascalCase
          '**/*.{tsx}': 'PASCAL_CASE',
          // ? .ts (유틸, 훅 등): camelCase
          '**/*.{ts}': 'CAMEL_CASE',
        },
        {
            // index.ts 같은 파일은 예외 처리하지 않아도 규칙에 맞으면 통과됨
            // 파일 중간의 확장자(.test.tsx 등)는 무시
            ignoreMiddleExtensions: true 
        }
      ],
      // * 폴더명 규칙
      'check-file/folder-naming-convention': [
        'error',
        {
          'src/**/': 'KEBAB_CASE', // ? src 하위 폴더: kebab-case
        },
      ],

      'prettier/prettier': 'warn',
      
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
      
      '@typescript-eslint/no-unused-vars': 'warn',
      
      '@typescript-eslint/no-explicit-any': 'error', 
      
      'no-console': 'off',
    },
  },
);

 

올리고 보니 뭔가 길어보이는데요? 사실 크게 많은 설정이 있지 않습니다.

일반 기업에서 설정하는 eslint보다는 많이 약한.. 기본적인 코드 규칙들만 적용해둔 상태입니다.

처음에는 기본 eslint 세팅해둔 것이 너무 느슨하고 기본만 되어있기도 했고,
인프라-백엔드 팀원분께서 React에서 지정하는 파일 폴더명과 함수명의 케이스(케밥, 파스칼 등등)을 다르게 해도
리액트 안에서는 돌아가지만 배포되어있는 지금 상황에서는 다 에러가 뜰거라고 하시더라구요.

 

그래서 미리 eslint 설정으로 파일명, 폴더명 규칙을 정해버렸습니다!

.tsx는 PascalCase, .ts는 camelCase, 폴더명은 kebab-case 이렇게!

이거랑 더 추가로 한건 import 문 정렬정도였습니다..
import문 깔끔하게 두는건 그냥 기본인데 이건 설정만 해두면
vscode에서 자동으로 import문 정렬 안된걸 에러라고 인식하기 때문에 제가 뭐 수정한다고 애쓸 필요가 없어요..
그니까 이렇게 설정한건 개발과 배포환경에서 문제될 게 없을 거라는거죠 ㅋ

 

근데 지금 제가 마주한 배포 에러가 있습니다.

이게 뭐냐고요?

 

 

자, 여기 제가 선언해놓고 안쓴 놈이 있습니다.

 

그리고
음악 자동재생 기능이 있었는데 이 기능 관련해서 바꾼 설정이 있었거든요..
이걸 수정하면서 여기에 연관된 store와 hook들을 수정안했어요!

스불재라는 말이 딱 저에게 어울리죠?

 

 

 

 

수정하겠습니다..

.

.

.

.

.

.

 

 

 

develop으로 merge하고...

기다립니다...

 

 

 

 

 

SUCCESS

 

 

 

 

 

 

 

그래서 이번 글을 요약하지만,

프론트 개발 시 eslint 규칙을 잘 생각하고 코드 확인을 잘하자!

입니다.

 

 

언젠가 eslint에 대해 더 공부해서 글을 써보기로 하겠습니다.. 언젠간....

 

그럼 이만 저는 다시 개발하러 갑니데이...