자주 활용하는 React 초기 세팅 (w. TS, Sass, styled-components , eslint, prettier)

Create-React-App으로 프로젝트를 만들고, eslint와 prettier를 적용하는 초기세팅을 진행할 때

자주 설정하는 루틴을 기록해본다. 특정 상황에 겪는 에러도 거의 동일하기에 함께 표기해두었다. 

1. CRA 설치

Typescript와 함께 설치한다.

 

npx create-react-app 프로젝트명 --template typescript

2. react-router-dom 설치

npm i react-router-dom

3. Sass/styled-components 설치 

Sass 설치

npm install sass --save

styled-components 설치

//npm
npm install styled-components
 
// Yarn
yarn add styled-components

4. ESLint와 Prettier 설치

4-1. 패키지 설치

여러 방법이 있지만 npm 패키지로 설치하는 걸 선호한다.
CRA에는 eslint가 내장되어있기에 eslint 추가 설정을 위한 패키지만 설치해준다.

 

npm install -D prettier eslint-config-prettier eslint-plugin-prettier

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

root 위치에 .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 파일 생성 및 설정

root 위치에 .prettierrc 파일을 만들고 설정할 포맷팅 내용을 입력한다.

 

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

4-4. .vscode/setting.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. 필요에 맞게 폴더 설정

이 때 내용이 빈 파일은 git에 올라가지 않으니 적절히 내용을 채워두어야 한다. 폴더 구조가 유동적으로 변경될 예정이라면 우선 초기의 폴더 구조로 진행한다.

6 .gitignore 파일 설정

git에 올리지 않을 폴더/파일을 기록하는 문서.
자동적으로 설정되어 있는 경우도 많지만 아래의 세 폴더/파일은 놓치지않고 기록한다.

 

/node_modules
/.vscode
.eslintcache

7. 실행 및 확인

위 작업까지 진행하고 실행해보았을 때, 아래의 오류 메세지가 나타날 수 있다.

 

Error while loading rule 'prettier/prettier': context.getPhysicalFilename is not a function

 

이 오류는 eslint의 버전 호환 문제로, 아래의 명령어를 통해 해결할 수 있다.

 

yarn install
yarn upgrade -R eslint

8. GitHub Repo 연동 및 push

// commit
git add .
git commit -m "Chore: 초기 세팅"

// github repo 연동
git remote add origin repo 주소

// 연동된 repository로 push
git push origin master