[과제] Todo App에 FE 프레임워크 적용

프레임워크 설치

1. Create React App

npx create-react-app {원하는 디렉터리 경로}

 

2. Redux

npm install @reduxjs/toolkit react-redux

 

- 리액트 프로젝트를 시작하면서 템플릿 지정으로 리덕스를 시작할 수 있음

npx create-react-app [프로젝트명] --template redux

 

 

3. Styled Component

- --save 옵션은 package.json의 dependencies 항목에 모듈을 추가한다는 의미 

- npm5 버전부터 기본값이 --save라 굳이 쓸 필요 없음 → 공식 사이트 설치 예제에 적힌 대로는 아래와 같다

npm install --save styled-components

 

4. ESlint, Prettier

- -D 옵션은 package.json의 devDependencies에 패키지를 등록한다는 의미

- ESlint, Prettier를 설치하고, React에서 ESlint를 사용할 수 있게 돕는 관련 플러그인을 -D 옵션으로 설치

npm install -D eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-prettier eslint-config-prettier

- .eslintrc.json, .prettierrc.json 파일을 생성 후 설정을 적용함

// .eslintrc.json
{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:import/recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:prettier/recommended"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "react/react-in-jsx-scope": 0,
    "react/jsx-uses-react": 0
  }
}

// .prettierrc.json
{
  "singleQuote": true
}

- ESLint, Prettier VSCode Extention 설치

- VSCode 설정으로 이동하여 editor.codeActionsOnSave 설정을 조정하면 저장할 때마다 ESlint가 고칠 수 있는 에러와 코드 스타일링을 자동으로 고쳐 줌

 

 

Bare Minimum Requirement

- ☑️ 직접 Github 리포지토리를 만들고, 아래 항목을 제작하기

→✅ 과제 제출 여부를 확인할 수 있게, public으로 제작하기

→✅ READMD.md, .gitnore, LICENSE 파일 포함하기

- ☑️ Github Project 칸반

→ ✅ TodoApp을 직접 만든다고 생각하고 이슈, 마일스톤을 스스로 정해 보기

→ ✅ Github Project 칸반을 만들고, 이슈와 마일스톤을 연결하고 칸반 뷰로 변경하기

- ☑️ Git flow

→ ✅ 직접 제작한 Github 리포지토리에 main, dev 브랜치를 만듬 

→ ✅ dev 브랜치에서 main 브랜치로 Pull Request를 최소 1회 시도하기

- ☑️ Create React App을 활용해 프론트엔드 개발에 유용한 프레임워크 설치하기

→ ✅ Redux

→ ✅ Styled-Component

→ ✅ ESLint, Pretier

- ☑️ npm run start가 에러 없이 시작하는 코드를 원격 main 브랜치로 push 하기

- ☑️ npm run start로 리액트 개발 서버가 켜져 있는 브라우저 화면 캡쳐하기