Github 리포지토리
README파일 필수포함정보
(README.md파일 추가 - touch README.md)
-
프로젝트 이름
-
프로젝트 핵심 기능 소개
-
팀원 소개
My Todo App Todo 관리를 위한 웹 애플리케이션입니다. Features - 편리한 UI로 Todo를 쉽게 생성하고 삭제할 수 있습니다. - Todo에 기한과 카테고리를 설정할 수 있습니다. - create-react-app으로 간편한 번들링과 배포가 가능합니다. - Spring Boot로 쉽게 서버 배포를 할 수 있습니다. Contributors - FE: 김코딩, 박해커 - BE: 나서버, 최디비 Project Wiki 프로젝트 팀 정보, 기획, 아키텍쳐에 대한 자세한 안내입니다. (링크).gitignore
공유할 필요 없는 파일을 담아놓는 곳
push가 되지않는다.
프로젝트 관리에 활용할 수 있는 Github 기능
Issue :
프로젝트에 새로운 기능을 제안하거나 버그를 찾아 제보하는 등 프로젝트의 이슈를 의미한다.
Milestone :
이정표 역할을 하며 태스크 카드를 그룹화하는 데 사용한다. Milestone에 연결된 태스크 카드가 종료되면 Milestone마다 진행 상황이 업데이트되는 것을 볼 수 있다.
Pull Request :
내가 작업한 내용을 중요 git branch에 합칠 수 있는지 확인하는 요청이다. 현장에서는 Pull Request를 보고 코멘트를 남기면서 코드 리뷰를 진행
칸반?
팀과 조직이 작업을 시각화하고 업무의 병목 현상과 리소스 낭비를 해결하는 업무 관리 방법이다.
- 칸반보드를 통한 업무 시각화
- Work In Progress로 진행중인 업무 제한 및 흐름 관리
- 업무 흐름 관리
- 진행중인 업무 제한
- 명확한 팀 정책을 설정
- 회의와 리뷰를 통해 함께 업무를 개선합니다.
Git branch
브랜칭은 기존 개발중인 메인 개발 코드를 그대로 복사하여 새로운 기능 개발을 메인 개발 코드를 건드리지 않고 할 수 있는 버전 관리 기법이다.
git switch (브렌치생성하기 / 변경하기)
새로운 브랜치로 Git이 바라보는 곳, HEAD를 변경하는 작업을 switch라고 부른다.
feature라는 브랜치를 새로 생성하는 경우, -c를 붙입니다.
git switch -c feature
checkout이라는 명령어도 사용할 수 있습니다.
git checkout -b feature
기존에 있던 main 브랜치로 HEAD를 변경하려면, -c를 붙이지 않습니다.
git switch main
git checkout maingit merger (브랜치 합치기)
기능 개발이 진행되었습니다.
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
!! 실제 프로젝트 개발 시에는 브랜치를 로컬에서 합치기 보다는 github의 pull request 기능을 이용하여 변경 내역을 충분히 확인하고 난 다음에 머지하는 경우가 많다.Git 설정
프로젝트 Git flow
=> git flow는 대규모 개발 프로젝트를 제작하여 하나의 소프트웨어의 릴리즈 버전을 명확하게 나누고 다양한 버전을 배포해야 하는 개발 환경에 적합하다.
브랜칭 전략
보다 효율적인 개발 프로젝트 코드 관리를 위해 브랜치의 종류를 나눠서 관리하는 전략 , 가장 유명한 브렌칭 전략은 Git flow
Coz' Git flow
Git flow를 단순화한 것이다.
main브랜치와 dev브랜치를 가지고 있다.
main 브랜치 : 사용자에게 언제든 제품으로 출시할 수 있는 브랜치
dev 브랜치 : 다음 버전 배포를 위한 "개발 중!" 브랜치
feature 브랜치 : 기능개발, 리팩토링, 문서작업, 단순오류수정 등 다양한 작업을 기록하기 위한 브랜치, feature브랜치는 개인의 로컬 레포지토리에서 작업한다.
개발 환경 구성
1. Node.js
2. Node.js 패키지매니저
3. 버전 관리 시스템 / 형상 관리 시스템 + 원격 리포지토리 서비스
4. 프론트엔드 프레임워크(라이브러리)
npm install @reduxjs/toolkit react-redux
5. CSS (CSS 라이브러리 , CSS 네이밍 컨벤션)
npm install --save styled-components
6. Create React App
npx create-react-app {원하는 디렉터리 경로}
7. 린터
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 , .prettierrc.json) 을 생성하고, 아래 코드를 참고하여 기본 설정을 적용한다.
이후 Extension으로 eslint와 prettier
