🤔 ESLint와 Prettier의 차이점

• ESLint: 코드 품질 및 버그 예방을 중점
• Prettier: 코드 스타일 일관성에 중점
  • 한눈에 이쁘게 보이는 코드 일관
  • 시각적 스타일을 담당한다고 보면 편할 듯

🤔 근데 둘 다 겹치는 규칙도 있지 않나?

• 맞다.
  • ex) Prettier의 printWidth와 ESLint의 max-len 모두 한 줄 길이 제한을 설정할 수 있다.
  • 안겹치게 둘 중 하나를 비활성화 해야한다.

🤔 'prettier/prettier': 'error', ESLint에서 결국 왼쪽 코드로 합치는데 왜 파일 나누지?

• 각각의 역할을 명확히 하기 위해 나눈다.

🤔 개발 환경? 프로덕션 환경?

• 개발 환경에서는 디버깅 편의를 위해 일부 규칙을 완화.

• 프로덕션 환경에서는 코드 품질을 높이기 위해 엄격한 규칙 적용.

      // 프로덕션 환경에서만 적용되는 규칙
      ...(isProduction && {
        'no-console': 'error', // 콘솔 로그 사용 금지
        'no-debugger': 'error', // 디버거 사용 금지
      }),
  

• 그럼 어떻게 개발이랑 프로덕션 나눠?

  • 아 나누기 귀찮네 ㅋ

  • .env 파일 두개로 관리 (한 레포지토리 내에 배치)

    // .env.development
    NODE_ENV=development
    REACT_APP_API_URL=https://dev-api.example.com
    REACT_APP_API_KEY=your_development_api_key
    

    // .env.production
    NODE_ENV=production
    REACT_APP_API_URL=https://api.example.com
    REACT_APP_API_KEY=your_production_api_key
    

  • dotenv 같은 라이브러리가 process.env.NODE_ENV 값에 따라 해당 환경 변수를 로드

    https://ko.vite.dev/guide/env-and-mode

    • dotenv 설치

      npm install dotenv
      

    • dotenv 설정 코드 작성

      • 프로젝트의 진입 파일 (예: index.js 또는 app.js)에서 dotenv를 사용해 환경에 따라 .env 파일을 자동으로 로드하도록 설정.

        // app.js 또는 index.js
        const dotenv = require('dotenv');
        
        // `process.env.NODE_ENV`에 따라 다른 `.env` 파일을 로드
        dotenv.config({
          path: process.env.NODE_ENV === 'production' ? '.env.production' : '.env.development',
        });
        
        // 이제 `process.env`로 환경 변수를 사용할 수 있습니다.
        console.log('Environment:', process.env.NODE_ENV);
        console.log('API URL:', process.env.REACT_APP_API_URL);
        
        

  • GitHub Actions 설정 파일 구성

    • .github/workflows 폴더에 브랜치별 CI/CD 설정 파일을 작성하여, 브랜치에 따라 자동으로 배포 환경을 구분할 수 있습니다.
    • develop.yml (개발 환경 배포용)
      • develop 브랜치로 푸시될 때 개발 환경으로 배포하는 설정입니다.
    • main.yml (프로덕션 환경 배포용)
      • main 브랜치로 푸시될 때 프로덕션 환경으로 배포하는 설정입니다.

📏 그라운드룰로 정한 코드 컨벤션을 기반하였습니다.

• 링크 👉 [FE/BE Convention]

.prettierrc

{
  "printWidth": 100, // 한줄 길이 Airbnb 80자, 네이버 100자인데 우리는 100자로.
  "tabWidth": 2, // 들여쓰기 2칸
  "singleQuote": true, // ' ' 작은 따옴표 사용
  "trailingComma": "es5", // 배열, 객체 등 마지막 요소 뒤에 쉼표
  "semi": true, // 모든 문장 끝에 세미콜론 ; 추가
  "arrowParens": "always" // 화살표 함수 매개변수에 항상 괄호
}