📌 자율 프로젝트, MOA는 React Native Cli를 사용한 모바일 앱으로 만들게 되었습니다. 멀고도 험한 프로젝트 셋팅. 천리길도 한 걸음부터! 프론트엔드 개발자에겐 필수템인 ESLint, Prettier 설정부터 시작해봅시당

EsLint란?

✅ JavaScript와 TypeScript 코드에서 문법 오류와 잠재적인 버그를 찾아내고, 코드 규칙을 강제하는 도구 프로그래밍 언어의 문법 검사기(linter)

Prettier란?

✅ Prettier는 코드의 스타일을 자동으로 포맷팅해주는 도구
ESLint가 주로 코드의 문제를 잡아주는 데 초점이 맞춰져 있다면, Prettier는 코드의 가독성과 스타일 정리에 집중

ESLint와 Prettier의 차이점

특징	ESLint	Prettier
목적	코드의 문제(오류, 버그)를 감지하고 규칙 강제	코드 스타일을 자동으로 포맷팅
역할	문법 검사와 코드 품질 유지	가독성과 스타일 통일성 확보
중점	코드의 "문제 해결"	코드의 "스타일 개선"
규칙 적용 방식	세부적으로 설정 가능 (사용자가 룰 추가 가능)	간단한 설정으로 스타일 통일
자동 수정 여부	일부 자동 수정 가능	완전 자동 포맷팅 지원

EsLint & Prettier 설치

npm install --save-dev prettier@latest
npm install --save-dev eslint

// React Native와 ESLint의 통합을 위해 추가적인 플러그인
npm install --save-dev eslint-plugin-react eslint-plugin-react-native
// 타입스크립트 사용시 추가 
npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin

• @typescript-eslint/parser: TypeScript 코드를 ESLint로 분석할 수 있도록 지원
• @typescript-eslint/eslint-plugin: TypeScript 전용 ESLint 규칙 플러그인

설치할 것도 많군요... 설치만 하면 끝일까요?

EsLint 설정

📌 프로젝트 루트 디렉토리에 .eslintrc.js 파일 생성
moa/.eslint.js

module.exports = {
  root: true, // 프로젝트의 최상위 ESLint 설정 파일로 지정
  parser: '@typescript-eslint/parser', // TypeScript 코드를 분석
  extends: [
    '@react-native', // React Native 프로젝트에 적합한 기본 ESLint 규칙
    'plugin:@typescript-eslint/recommended', // TypeScript에 특화된 권장 규칙 추가
    'plugin:react/recommended', // React 관련 규칙 적용. 잘못된 JSX 작성이나 기타 문제를 방지
    'plugin:prettier/recommended', // Prettier 설정 추가
  ],
  plugins: ['@typescript-eslint', 'react', 'prettier'],
  parserOptions: {
    ecmaFeatures: {
      jsx: true, // JSX 구문을 파싱할 수 있도록 허용. 필수 옵션
    },
  },
  rules: {
    // Example rules
    '@typescript-eslint/no-unused-vars': 'warn', // 사용되지 않는 변수가 있을 때 경고
    'react/jsx-boolean-value': ['warn', 'always'], //  JSX에서 불리언 값의 기본값을 명시적으로 지정하도록 경고
    'react/self-closing-comp': 'warn', // 내용이 없는 태그는 셀프 클로징 태그로 작성하라는 경고 표시
    'react/jsx-key': 'warn', // 리스트 렌더링 시 key 속성이 없는 경우 경고 표시
    // 'no-console': 'warn', // console.log와 같은 콘솔 사용을 경고
    'prettier/prettier': 'warn', // Prettier 규칙을 따르지 않는 경우 경고
  },
  settings: {
    react: {
      version: 'detect', // 로젝트에서 사용 중인 React 버전을 자동으로 탐지
    },
  },
};

Prettier 설정

📌 프로젝트 루트 디렉토리에 .prettierrc.js 파일 생성
moa/.prettierrc.js

module.exports = {
  arrowParens: 'avoid', // 화살표 함수의 매개변수가 하나일 경우 괄호 생략
  // bracketSameLine: true,
  bracketSpacing: false, // 중괄호와 내부 텍스트 사이에 공백 추가
  singleQuote: true, // 작은 따옴표 사용
  trailingComma: 'all', // 여러 줄로 나열된 데이터에 마지막 쉼표를 추가
  tabWidth: 2, // 탭 간격을 2칸으로 설정
  semi: true, // 세미콜론 사용
};

난 이제 지쳤어요... 아직 끝나지 않은 설정!

Prettier와 EsLint충돌 방지

📌 최신 버전 설치 필요

npm install --save-dev prettier@latest eslint-config-prettier eslint-plugin-prettier

🔥 주의) 아래 처럼 설치시 warning 발생할 수 있음!

• React Native CLI 프로젝트에서 eslint-plugin-prettier가 요구하는 Prettier 버전(3.0.0 이상)과, 현재 프로젝트에 설치된 Prettier 버전(2.8.8) 간의 버전 충돌로 인해 발생

npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

$ npm install --save-dev eslint-config-prettier eslint-plugin-prettier
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: moa@0.0.1
npm error Found: prettier@2.8.8
npm error node_modules/prettier
npm error   dev prettier@"2.8.8" from the root project
npm error
npm error Could not resolve dependency:
npm error peer prettier@">=3.0.0" from eslint-plugin-prettier@5.2.1
npm error node_modules/eslint-plugin-prettier
npm error   dev eslint-plugin-prettier@"*" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error
npm error
npm error For a full report see:
npm error
npm error For a full report see:
npm error C:\Users\SSAFY\AppData\Local\npm-cache\_logs\2024-10-29T08_07_04_300Z-eresolve-report.
npm error A complete log of this run can be found in: C:\Users\SSAFY\AppData\Local\npm-cache\_lo024-10-29T08_07_04_300Z-debug-0.log

저장시 자동 프리티어 적용

VSCode에서 ctrl + P → settings.json
아래와 같이 설정

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "terminal.integrated.defaultProfile.windows": "Git Bash"
}

여기까지 하면 진짜진짜 끝!!! 이제 본격적으로 필요한 라이브러리들을 셋팅해봅시다!