프로젝트 준비하기

1. 1. 브랜치

1.0.1. 1-1. Git flow

• main: 사용자에게 언저든지 제품으로 출시할 수 있는 브랜치
• dev(elopment): 다음 버전 배포를 위한 "가발 중" 브랜치
• feat(ure)/작업이름: 기능 개발, 리펙토링, 문서 작성 등을 위한 브랜치

feat(ure)/작업이름에서 개인 작업을 하고 기능을 완성 했다면 dev(elopment)에 Pull requests 요청을 해서 코드리뷰 후에 merge 해야한다. squash & merge를 하면 이전 브랜치에서 작성한 커밋을 하나합칠 수 있다. 이건 선택사항으로 같이 작업하는 사람들에 맞춘다.

 

혹시 PR요청 전에 다른 사람이 머지했다면 로컬로 pull  받아온후 머지하고 다시 PR한다.

 

1.0.2. 2-1. 브랜치 생성하기 / 변경하기 (git switch)

      

      

      

    
    

      <bash />
    
# 새로 생성하는 경우, -c를 붙입니다.
git switch -c feature
git checkout -b feature
# 새로 만들고 push 해주기
git push origin feature

# main으로 HEAD를 변경하려면, -c를 붙이지 않습니다.
git switch main
git checkout main

1.0.3. 2-2. 브랜치 합치기 (git merge)

      

      

      

    
    

      <bash />
    
# 기능 개발이 진행되었습니다.
git commit -m "기능1의 세부 기능1"
git commit -m "기능1의 세부 기능2"
git commit -m "기능1 개발 완료"

# 머지를 위해 main 브랜치로 전환
git switch main
# main 브랜치로 feat/todo 브랜치를 병함
git merge feat/todo

1.0.4. 2-3. 브랜치 삭제하기 (git branch -d)

      

      

      

    
    

      <bash />
    
git branch -d feat/todo

# 삭제 안되면
git branch -D feat/todo

 

2. 2. 워크프레임

      

      

      

    
    

      <bash />
    
npx create-react-app {원하는 디렉터리 경로}
npm install @reduxjs/toolkit react-redux
npm install --save styled-components

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

      

      

      

    
    

      <bash />
    
// .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
  }
}

      

      

      

    
    

      <bash />
    
// .prettierrc.json
{
  "singleQuote": true
}