git repository

아래의 모든 과정을 통해 만든 boilerplate입니다!
바쁘신 분은 여기서 가져가세요~😊

• https://github.com/suhyunified/react-ts-boilerplate

React Typescript

1. 프로젝트 생성

$ npx create-react-app [project name] --template typescript

// ex
$ npx create-react-app react-ts-boilerplate --template typescript

2. (React18일 경우) index.tsx 아래의 코드로 변경

// src/index.tsx
import React from 'react'
import * as ReactDOM from 'react-dom/client'
import './index.css'
import App from './App'
import reportWebVitals from './reportWebVitals'

const container = document.getElementById('root') as HTMLElement
const root = ReactDOM.createRoot(container)

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

reportWebVitals()

절대 경로

이 설정을 마치면 아래와 같은 경로일 경우 어떤 파일에서는 logo.svg에 접근하는 방식은 @/assets/images/logo.svg가 된다.

src
ㄴ assets
  ㄴ images
  	 - logo.svg
- App.tsx
- index.tsx

1. tsconfig.json 설정

{
  "compilerOptions": {
    ...
  	"baseUrl": ".",
    "paths": {
       "@/*": ["src/*"] 
    }
  }
}

2. craco 설치

$ yarn add -D @craco/craco

3. 최상단 경로에 craco.config.js 파일 생성

// in craco.config.js
const path = require('path')

module.exports = {
  webpack: {
    alias: {
      '@': path.resolve('src/'),
    },
  },
}

4. package.json 의 script 수정

// in package json
{
  ...
  "scripts": {
    "start": "craco start",
    ...
  }
  ...
}

React router

$ yarn add react-router-dom

eslint + prettier

1. eslint, prettier 관련 package 설치

// 기본 eslint, prettier
$ yarn add -D eslint prettier

// eslint와 prettier가 충돌하지 않게 하기 위한 연결
$ yarn add -D eslint-config-prettier eslint-plugin-prettier

// typescript에 필요한 eslint
$ yarn add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

2. 최상단 경로에 .eslintrc 파일 생성

// .eslintrc
{
  "env": { "node": true, "browser": true },
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint", "prettier"],
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:@typescript-eslint/recommended"
  ]
}

3. 최상단 경로에 .prettierrc 파일 생성

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es5",
  "vueIndentScriptAndStyle": true,
  "endOfLine": "auto",
  "tabWidth": 2,
  "arrowParens": "avoid",
  "bracketSpacing": true,
  "printWidth": 80,
  "useTabs": false
}

저장 시 자동 수정이 안된다면, vscode를 재실행!

recoil

1. recoil 설치

$ yarn add recoil

2. index.tsx에 recoil root 추가

// src/index.tsx
import { RecoilRoot } from 'recoil'

...

root.render(
  <React.StrictMode>
    <RecoilRoot>
      <App />
    </RecoilRoot>
  </React.StrictMode>
)
...

emotion

1. emotion 설치

$ yarn add @emotion/react 

// styled component 사용할 경우 설치
$ yarn add @emotion/styled