Skip to content

CRA vs VITE

Jump to bottom
subsub-e edited this page Aug 25, 2024 · 2 revisions

CRA

💡 Create-React-App의 약자 리액트 애플리케이션을 손쉽고 빠르게 초기세팅이 가능하다.

주요 기능 및 특징

  1. 초기 설정 간소화 : “npx create-react-app my-app” 명령어를 통해 쉽게 생성 가능
  2. 개발 서버 : 코드 변경 시 페이지를 새로고침 하지 않아도 실시간으로 반영하는 핫 리로드 지원
  3. Webpack 및 Babel : Webpack과 Babel을 미리 설정해둔 상태로 제공하여 모듈 번들링과 최신 JavaScript 문법 변환을 자동으로 처리

장점

  1. 빠른 시작 : 복잡한 설정 없이 바로 프로젝트 시작
  2. 일관된 환경 : 동일한 설정으로 여러 프로젝트 관리 가능

단점

  1. 제한된 커스터마이징 : 기본 설정에서 벗어난 고급 설정을 위해서는 ‘eject’ 가 필요
  2. 의존성 : CRA에 의존하면 내부 동작 완전히 이해하기 어려움

VITE

💡 VITE 는 최신 웹 개발을 위해 설계된 도구로서 빠르고 효율적인 개발 환경을 제공한다.

주요 기능 및 특징

  1. 빠른 개발 서버 : Vite는 JavaScript 모듈의 기본 ES방식을 사용해 브라우저가 직접 모듈을 처리하게 함 ⇒ 초기 번들링 과정 없이 빠르게 개발 서버 시작 가능
  2. 최소한의 번들링 : 개발 중에는 필요한 모듈만 동적으로 로드함 ⇒ 더 빠른 페이지 로드와 업데이트 속도를 제공 + 핫 리로드 지원
  3. 최적화된 프로덕션 빌드 : RollUp 기반의 플러그인을 사용해 다양한 플러그인을 활용해 기능 확장 가능 + 코드 스플리팅과 트리 쉐이킹을 통해 최적화된 번들 제공

장점

  1. 빠른 초기 로드 및 HMR : 개발 서버가 매우 빠르게 시작하며 HMR(핫 모듈 리로딩) 이 매우 빠르게 작동해 개발 속도 향상 가능
  2. 최신 기술 채택 : ESM 과 같은 최신 웹 기술을 채택해 최신 브라우저에서 최적의 성능을 발휘
  3. 플러그인 생태계 : RollUp 기반의 플러그인 시스템을 활용해 다양한 기능을 쉽게 추가 가능

단점

  1. 레거시 브라우저 지원 제한 : 최신 웹 기술을 사용해 레거시 브라우저에 대한 지원이 제한될 수 있음
  2. 대규모 프로젝트에서의 한계 : 작은 규모에서는 굉장히 빠르지만, 대규모 프로젝트에서는 설정과 최적화가 더 필요함

VITE를 채택한 이유

원래는 CRA로 초기 세팅를 마치고 깃허브에 올리기까지 했지만, 같은 프론트엔드 동료들의 조언으로 VITE로 바꾸게 됨.

  1. VITE의 단점으로 레거시 브라우저의 지원 제한이나 대규모 프로젝트에서의 한계는 현재 진행중인 프로젝트와 관련 없으므로 단점이 없다고 생각함
  2. 개발 서버 및 빌드 속도에서 VITE가 압도적인 성능을 자랑함
  3. CRA 방식에서는 webpack을 건드리기 어려우나 VITE에서는 커스터마이징에 있어 굉장히 유연함
  4. CRA에 현재 등록된 이슈만 1500개가 넘는데 관리가 없다. ⇒ 페이스북에서 관리를 못하고 유지보수가 없다 ⇒ 미래가 없음.. VITE를 사용합시다.

VITE 초기 설정 중 겪었던 에러

VITE 초기 설정으로는 구글링하면 굉장히 많이 나오므로,, 생략하고 ESLint 설정 중 겪었던 오류를 적겠습니다.

ESLint 초기 설정 중 문제사항을 겪었다.

yarn lint

를 통해 ESlint 가 제대로 설정되었는지 확인해보려고 했으나

스크린샷 2024-07-22 오후 6 16 39

위와 같은 오류가 발생했다. 구글링해본 결과 eslint.config.js 대신 eslintrc.cjs 를 활용하라고 해서

스크린샷 2024-07-22 오후 6 16 52

했더니 무슨 extends 에서 flat config 가 필요하다는 에러를 다시 마주했다.

열심히 찾아본 결과 eslint 9버전 이상에서 플러그인 및 설정 호환성 문제가 발생한다고 배울 수 있었다.

따라서 설정파일의 규칙 적용 방식이 이전과 달라졌다는 말이다.

원래 CRA를 통해 초기세팅 된 eslintrc.js 파일을 가져온거라 문제가 생겼던 것이였다.

따라서 eslint 버전을 8버전으로 다운그레이드 한 뒤 해결할 수 있었다.

module.exports = {
  extends: [
    'airbnb', // Airbnb의 JavaScript 스타일 가이드 규칙을 사용합니다.
    'airbnb/hooks', // Airbnb의 React Hooks 관련 규칙을 추가합니다.
    'plugin:react/recommended', // React 관련 권장 규칙을 추가합니다.
    'plugin:react-hooks/recommended', // React Hooks 관련 권장 규칙을 추가합니다.
    'plugin:import/errors', // import 관련 오류 규칙을 추가합니다.
    'plugin:import/warnings', // import 관련 경고 규칙을 추가합니다.
    'plugin:prettier/recommended', // Prettier와 통합하여 코드 스타일을 자동으로 맞춥니다.
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true, // JSX 문법을 지원하도록 설정합니다.
    },
    ecmaVersion: 2021, // ECMAScript 2021(ES12) 문법을 지원하도록 설정합니다.
    sourceType: 'module', // ES 모듈을 사용하도록 설정합니다.
  },
  env: {
    browser: true, // 브라우저 환경을 설정합니다.
    es2021: true, // ES2021 환경을 설정합니다.
  },
  settings: {
    react: {
      version: 'detect', // React 버전을 자동으로 감지합니다.
    },
    'import/resolver': {
      node: {
        paths: ['src'], // 모듈 해석 경로에 'src' 디렉토리를 포함합니다.
        extensions: ['.js', '.jsx', '.ts', '.tsx'], // 모듈 해석 시 확장자를 생략할 수 있도록 합니다.
      },
    },
  },
  rules: {
    'prettier/prettier': 'error', // Prettier 규칙을 따르지 않으면 오류를 발생시킵니다.
    'import/no-extraneous-dependencies': ['error', { devDependencies: true }], // devDependencies에 있는 모듈을 import할 수 있도록 허용합니다.
    'import/extensions': [
      'error',
      'ignorePackages',
      {
        js: 'never', // JavaScript 파일 import 시 확장자를 생략하도록 설정합니다.
        jsx: 'never', // JSX 파일 import 시 확장자를 생략하도록 설정합니다.
        ts: 'never', // TypeScript 파일 import 시 확장자를 생략하도록 설정합니다.
        tsx: 'never', // TSX 파일 import 시 확장자를 생략하도록 설정합니다.
      },
    ],
  },
};

최종 .eslintrc.cjs 파일

Clone this wiki locally