React 초기 세팅

1. CRA 설치

yarn create react-app 폴더명

2. React Router 설치

yarn add react-router-dom

3. styled-components 설치

yarn add styled-components styled-reset

3-2 createGlobalStyle 과 ThemeProvider 를 사용해 전역으로 사용할 요소 설정

//GlobalStyles.js
import { createGlobalStyle } from "styled-components"
import reset from 'styled-reset'

const GlobalStyles = createGlobalStyle` 
  ${reset}
  //Global로 적용할 스타일 작성
`

export default GlobalStyles

//theme.js
const them = {
  //원하는 theme 작성
}
export default theme

//App.js
import GlobalStyles from "./GlobalStyles"
import { ThemeProvider } from "styled-components"
import theme from './style/theme'

export const App = () => {
  return (
    <>
      <ThemeProvider theme={theme}>
        <GlobalStyles />
  		<Sample />
  	  </ThemeProvider>
    </>
  )
}

4. ESLint와 Prettier 설치

yarn add -D eslint-config-airbnb
yarn add -D eslint-config-prettier eslint-plugin-prettier

4-2 .eslintrc 파일 생성 및 설정

{
    "extends": ["react-app", "plugin:prettier/recommended"],
    "rules": {
        "no-var": "warn", // var 금지
        "no-multiple-empty-lines": "warn", // 여러 줄 공백 금지
        "no-nested-ternary": "warn", // 중첩 삼항 연산자 금지
        "no-console": "warn", // console.log() 금지
        "eqeqeq": "warn", // 일치 연산자 사용 필수
        "dot-notation": "warn", // 가능하다면 dot notation 사용
        "no-unused-vars": "warn", // 사용하지 않는 변수 금지
        "react/destructuring-assignment": "warn", // state, prop 등에 구조분해 할당 적용
        "react/jsx-pascal-case": "warn", // 컴포넌트 이름은 PascalCase로
        "react/no-direct-mutation-state": "warn", // state 직접 수정 금지
        "react/jsx-no-useless-fragment": "warn", // 불필요한 fragment 금지
        "react/no-unused-state": "warn", // 사용되지 않는 state
        "react/jsx-key": "warn", // 반복문으로 생성하는 요소에 key 강제
        "react/self-closing-comp": "warn", // 셀프 클로징 태그 가능하면 적용
        "react/jsx-curly-brace-presence": "warn", // jsx 내 불필요한 중괄호 금지
        "prettier/prettier": [
            "error",
            {
                "endOfLine": "auto"
            }
        ] //delete 'cr' prettier/prettier 오류를 피하기위해 윈도우 유저에게 필요한 부분
    }
}

4-3 .prettierrc 파일 생성 및 설정

{
  "printWidth": 100,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "semi": false,
  "useTabs": true,
  "arrowParens": "avoid",
  "endOfLine": "lf"
}

4-4 settings.json 파일 생성 및 설정

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "javascript.format.enable": false,
  "eslint.alwaysShowStatus": true,
  "files.autoSave": "onFocusChange"
}

5. commitizen 설치

yarn add -D commitizen commitizen-emoji

// package.json
 "config": {
    "commitizen": {
      "path": "./node_modules/commitizen-emoji"
    }
  },

6. jsconfig.json / tsconfig.json 파일 설정 (절대경로)

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "includes": ["src"]
}

7. .gitignore 파일 설정

/node_modules
/.vscode
.eslintcache