[React] CRA 빠르게 시작하기

💡 CRA 후 항상 구글링해서 설정하는 부분을 정리해보자. 나만의 리액트 스타터 템플릿이 되것지 : )

목표

• CRA(Create React App)을 적극 활용할 수 있다.
• 필요에 따라 ESLint, Prettier, Babel 등을 추가 연동 설정 할 수 있다.
• 신규 리액트 프로젝트를 만들 때, 쉽게 따라할 수 있는 가이드를 제공할 수 있다.

 

페이스북에서 개발한 CRA(create react app)을 통해 리액트 프로젝트를 쉽고 빠르게 생성할 수 있다.

CRA 관련 내용은 맨 하단에서 설명하기로 하고, 리액트 스타터 가이드를 작성해보자.

 

📣 CRA 리액트 스타터 가이드

npx create-react-app

# typescript를 사용하실 분들은(권장)
$ npx create-react-app 서비스이름 --template typescript 


# javascript를 사용하실 분들은 
$ npx create-react-app 서비스이름

위와 같은 명령어를 수행하면, 서비스이름으로 리액트 프로젝트를 생성해준다.

cd 서비스이름
npm start

생성된 패키지로 진입하여, 정상적으로 서비스가 수행되는지 확인해보자!

 

여기서 끝낼 순 없잖아?

팀원들과의 협업에서 중요한 코딩 규칙을 정할 수 있는 ESLint를 함께 설정하는 것을 권장한다.

 

🔥 ESLint - Prettier 스타터 가이드

⒈ 패키지 설치

타입스크립트를 사용하는 리액트 프로젝트는 ESLint를 연동하기 위해서 더 많은 패키지를 설치해야 한다.

npm i -D eslint
npm i -D eslint-config-airbnb
npm i -D eslint-config-airbnb-typescript
npm i -D eslint-config-prettier
npm i -D eslint-config-react-app
npm i -D eslint-import-resolver-typescript
npm i -D @typescript-eslint/parser
npm i -D @typescript-eslint/eslint-plugin
npm i -D prettier
npm i -D prettier-eslint
# prettier-eslint-cli → @messageformat/core 로 명칭 변경.
npm i -D prettier-eslint-cli
npm i -D eslint-plugin-prettier

# CRA 에서 기본적으로 설치되는 패키지
npm i -D eslint-plugin-react
npm i -D eslint-plugin-react-hooks
npm i -D eslint-plugin-jsx-a11y
npm i -D eslint-plugin-import

설치 후 번거롭지만 아래와 같이 순차적으로 실행한다. (안 해도 인식하지만, 간혹 버그가...)

npm init @eslint/config

npm i -D typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin

타입스크립트 쓰면, 요게 중요하니깐 다시 한 번 체크는 필수!

 

⒉ ESLint 설정 파일 생성

.eslintrc.js 및 .eslintignore 설장 파일을 프로젝트 경로에 생성하자.

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
    es6: true,
  },
  extends: [
    'plugin:react/recommended',
    'airbnb',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  settings: {
    react: {
      version: 'detect',
    },
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      },
    },
  },
  plugins: [
    'react',
    '@typescript-eslint',
  ],
  rules: {
    'react/jsx-filename-extension': [2, { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
    indent: ['error', 2],
    curly: 'error',
    '@typescript-eslint/indent': ['error', 2],
    'jsx-a11y/anchor-is-valid': ['error', {
      aspects: ['invalidHref', 'preferButton'],
    }],
    'no-console': ['error', {
      allow: ['error', 'info'],
    }],
    'react/no-danger': 0,
    'no-trailing-spaces': 'error',
    'brace-style': 'error',
    'no-multi-spaces': 'error',
    'space-infix-ops': 'error',
    'space-unary-ops': 'error',
    'no-whitespace-before-property': 'error',
    'func-call-spacing': 'error',
    'space-before-blocks': 'error',
    'keyword-spacing': ['error', { before: true, after: true }],
    'comma-spacing': ['error', { before: false, after: true }],
    'comma-style': ['error', 'last'],
    'comma-dangle': ['error', 'always-multiline'],
    'space-in-parens': ['error', 'never'],
    'block-spacing': 'error',
    'key-spacing': ['error', { mode: 'strict' }],
    'linebreak-style': 'off',
    'no-proto': 'off',
  },
};

위 설정은 개인적으로 사용하는 .eslintrc.js 이다.

ESLint의 모든 설정은 여기서 이뤄지고, 각각의 의미는 공식 페이지에서 찾거나 구글링하자.

다음은 .eslintignore 설정이며, 파일명 그대로 eslint가 무시할 파일 혹은 디렉토리를 설정할 수 있다.

// .eslintignore
build/*
public/*
src/react-app-env.d.ts
src/serviceWorker.ts

복붙해서 쓰려고 기록해둔다.
복붙 복붙!!

 

⒊ 트러블슈팅

그러하다. 적용이 잘 안 될 때가 있다 🤣

 

1) 특정 확장자인 파일만 ESLint가 동작하지 않을 때,
예시 확장자: *.js, *.jsx, *.ts, *.tsx

rules: {
    'react/jsx-filename-extension': [2, { 
    	extensions: ['.js', '.jsx', '.ts', '.tsx'] 
    }],
    'import/extensions': [
      'error',
      'ignorePackages',
      {
        js: 'never',
        jsx: 'never',
        ts: 'never',
        tsx: 'never',
      },
    ],
    ...
}

대부분의 경우, .eslintrc.js 파일에서 rules를 위와 같이 설정하면 된다.

'import/extensions'는 지정한 확장자를 모두 import에 확장자명을 안 써되 되게 해준다.

( 'import/no-unresolved': 'off', )

 

2) 1)을 했음에도 Auto fixed 가 되지 않을 때,

예시 확장자: *.js, *.jsx, *.ts, *.tsx

# VSCode settings.json
"eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],

VSCode의 문제일 수 있다.

에디터를 재가동해도 안 될 경우, settings.json에 위와 같은 설정이 있는지 확인해보자.

추가해도 안 된다면, 아래의 설정들도 확인해보자.

"javascript.updateImportsOnFileMove.enabled": "always",
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
},
"editor.formatOnSave": true,
"eslint.enable": true,
"eslint.alwaysShowStatus": true,
"eslint.probe": ["javascript", "html"],
"eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
"eslint.workingDirectories": [{ "mode": "auto" }],
"eslint.nodeEnv": "",
"eslint.format.enable": true,
"typescript.updateImportsOnFileMove.enabled": "always",

 

 

🌈 Babel 스타터 가이드

추후에 정리할 예정...

 

 

CRA 사용 이유

페이스북에서 개발한 CRA 보일러 플레이트를 통해 간편하게 리액트 프로젝트를 시작할 수 있게 되었다. CRA는 리액트 프로젝트 실행에 필요한 여러 가지 의존 라이브러리나 Webpack의 설정 없이 간편하게 시작할 수 있게 도와준다.

 

CRA 사용 시, 장점은 무엇일까?

1. One Dependency: one build dependency를 가지게 되므로 React프로젝트를 구성할 때 필요한 Webpack, Babel, ESLint 등 간의 설정, 연결에 대해서 신경쓰지 않아도 된다.
2. No Configuration Required: 위 나열한 Webpack, Babel, ESLint는 처음 프로젝트를 구성할 때 설정이 반드시 필요한 패키지들이다. 이를 처음 설정할때 상당한 시간이 소요될 수 있는데, CRA는 프로젝트에 필요한 설정을 대신 해준다.
3. No Lock-In: CRA는 Auto Prefixer를 지원해준다. 즉, 일반적인 CSS코드 생성을 하게 되면 자동으로 -webkit-, -ms- 등을 자동으로 적용해준다.

 

npx를 써야하는 이유는 무엇일까?

$ npm i -g create-react-app
$ create-react-app HelloReact
$ npm uninstall -g create-react-app

먼저, crate-react-app 패키지를 npm으로 글로벌 설치를 했다고 가정하자. (일반적으로 이런 방식을 주로 씀)

CRA 관련 패키지가 글로벌하게 설치되어 어느 디렉토리에서든 바로 사용할 수 있다.

 

글로벌 설치 방식은 다음과 같은 단점이 존재한다.

• CRA에 포함된 수 많은 의존성 라이브러리들이 컴퓨터에 계속 남게 된다.
• CRA 버전 업데이트(변경사항)에 따라, 글로벌 설치된 패키지를 지우고 재설치를 해야한다.

 

npx를 사용하게 되면, 이러한 단점을 해결할 수 있다.

$ npx create-react-app HelloReact

npx는 다운받은 최신 CRA 패키지를 통해 CRA 프로젝트를 생성 후, 설치된 패키지는 곧바로 삭제한다. 이러한 방식 때문에 PC에는 CRA의 무거운 패키지들을 남기지 않게 되는 것을 물론 항상 최신 버전의 CRA를 사용할 수 있다.

 

 

출처

• Online react lecture of Comento, 구민정 멘토님, 2022-07-03
• How to set up Eslint with Typescript in VS Code, Pavel Sušický, 2019-11-16
• typescript - JSX not allowed in files with extension '.tsx'eslint, StackOverflow, 2019-11-13
• facebook/create-react-app, CRA 공식 Github, Lastest Realease 2022-04-12

 

Last Updated. 2022. 07. 09.