-
CRA 없이 React 설정하기 1프론트엔드 2023. 5. 20. 15:58728x90반응형SMALL
이 글을 쓰게 된 배경
CRA가 나타난 배경
Creat React App이 없는 이전에는 여러 도구를 설치하고, 개발 환경을 구성하고, 여러 사전 설정을 한 뒤 린트를 구성하는 등의 개발 전에 해야할 것들이 굉장히 많았습니다. 이런 구성을 프로젝트 시작마다 하는 것은 굉장히 까다로운 일이었을 것입니다.
이에 사람들은 자신만의 보일러 플레이트를 만들어 공유함으로써 대처할 수 있었습니다. 하지만, 여기서도 문제점이 발생했습니다. 각 프로젝트마다 달라지는 설정에 따라 변경이 요구되고, 오래된 설정은 업데이트를 해야하며 다른 라이브러리와의 호환하여 동작하도록 하기 위해서도 많은 노력이 필요했습니다.
이를 보완하기 위해 Creat React App이 등장하였고, CRA는 필요한 라이브러리를 묶어 패키지로 결합하고 합리적인 구성을 통해 비호환성을 덮어내어 이전의 문제점들을 해결할 수 있었습니다.
CRA의 문제점
CRA는 등장 이후 시간이 많이 흐르면서 정체되어 있습니다. 현재 문제점으로 지적받는 부분이 대안으로 제시된 방법보다 좋지 않은 성능을 나타내고 있고 다른 인기있는 라이브러리들의 지원도 되고 있지 않습니다. 이러한 경우 eject한 뒤 설정을 수정하여 사용할 수 있지만 이러한 부분은 CRA의 장점을 무효한 경우이므로 효율적으로 CRA를 사용했다고 할 수 없습니다.
위와 같은 문제점과 SSR/SSG 지원의 어려움이 CRA의 사용을 지양하고 직접 설정하여 사용하는 것이 좀 더 변화에 대응 가능한 옵션이될 것이라고 생각합니다.
React팀도 CRA를 런쳐로 전환하여 이전의 장점을 충분히 활용할 수 있는 방향을 생각하고 있는 것 같습니다.
(위의 글은 (번역) ‘Create React App 권장을 Vite로 대체’ PR 대한 Dan Abramov의 답변 글을 참조하였습니다.)
이 글의 목표
- CRA 없이 React 세팅하기
- eslint, prettier 설정
- webpack과 babel 설정
위의 목표를 이루고 끝으로는 테스트 환경을 위한 jest 설정으로 마무리해보도록 하겠습니다.
1. CRA 없이 React 세팅하기
1.1 React 관련 dependency 추가
// project 시작 yarn init // react 관련 dependency 설치 yarn add react react-dom yarn add -D @types/react @types/react-dom typescript1.2 html 파일 추가
<!--public/index.html --> <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <title>react without CRA</title> </head> <body> <div id="root"></div> </body> </html>2. eslint, prettier 설정
2.1 eslint 설정
//eslint 설치 yarn add -D eslint //eslint 설정 npx eslint --init-> 원하는 옵션으로 eslint 설정해줍니다.
옵션 중 Does your project use Typescript? 를 yes 로 설정한다면
@typescript-eslint/eslint-plugin@latest와@typescript-eslint/parser@latest가 자동적으로 설치됩니다.옵션 중 which frame work does your project use를 React로 설정한다면
eslint-plugin-react@latest가 자동적으로 설치됩니다.아래는 설정 결과 입니다.
{ "env": { "browser": true, "es2021": true }, "extends": [ "eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/recommended" ], "overrides": [], "parser": "@typescript-eslint/parser", "parserOptions": { "ecmaVersion": "latest", "sourceType": "module" }, "plugins": ["react", "@typescript-eslint"], "rules": { "react/react-in-jsx-scope": "off", "react/jsx-filename-extension": [ 1, { "extensions": [".ts", ".tsx"] } ] } }2.2 prettier 설정
//prettier plugin 설치 yarn add -D eslint-plugin-prettier2.2.1 eslint에 prettier plugin을 추가해줍니다.
//eslit 설정 추가 { ..., extends:[ ..., "plugin:prettier/recommended" ] }2.2.2 "import/no-unresolved" 에러 해결
typescript path alias를 사용하면 eslint는 이를 이해하지 못합니다. 그러므로 패키지를 추가해줍니다.// 관련 패키지 추가 yarn add -D eslint-import-resolver-typescript2.2.3 eslint에 관련 설정 추가
{ ..., "settings":{ "import/resolver":{ "typescript":{} } } }오늘은 react의 기본 설정과 eslint, prettier 설정을 했습니다. 다음 글에서는 webpack과 babel을 사용하여 번들러를 구성해보도록 하겠습니다.
반응형LIST'프론트엔드' 카테고리의 다른 글
CRA 없이 React 설정하기 2 (0) 2023.05.22 Storybook Addons (2) 2023.04.26 Storybook 스냅샷 테스트 (0) 2023.04.24 Storybook 화면 구성하기 (0) 2023.04.20 Storybook 데이터 연결하기 (0) 2023.04.19