Chapter1. 프로젝트 GIthub
Chapter2. 프로젝트 Git flow
Chapter3. 프레임워크 선택 및 설치(FE)
<Chapter1. 프로젝트 Github>
1.Github repository
1) Github 리포지토리에 꼭 필요한 파일
① README.md: 프로젝트 이름, 프로젝트 핵심 기능 소개, 팀원 소개
② .gitignore: github repository에 push하지 않을 파일(secret token, 설정 파일)
③ LICENSE: 회사에서 작성하는 코드가 public으로 공개된다면, LICENSE를 명확하게 표기
2) 프로젝트 관리에 활용할 수 있는 Github 기능
① Issue: 새로운 기능 제안, 버그 제보
② Milestone: 태스크 카드(Issue)를 그룹화하는 데 사용. Milestone에 연결된 태스크 카드(Issue)가 종료되면 Milestone마다 진행 상황이 업데이트. 연관된 이슈의 추적과 진행 상황을 한눈에 파악 가능.
③ Pull Request: 내가 작업한 내용을 중요 git branch에 합칠 수 있는지 확인하는 요청
④ Project: Github 내에서 업무 관리를 해줄 수 있게 돕는 기능
2.Github Project 칸반
1) 칸반이란
팀과 조직이 작업을 시각화하고, 업무의 병목 현상과 리소스 낭비를 해결하는 업무 관리 방법
2) 칸반 실천법
① 업무 시각화: 표 -> 칸반 보드, 요소 -> issue
② 진행 중인 업무 제한(흐름 관리)
업무가 과도하게 쌓이지 않는 원활한 업무 흐름을 위해 WIP 제한
아래 예시에서는 2개로 제한되므로 하나의 업무를 추가할 수 있음
③ 명확한 프로세스 정책
-회의 시간 및 해당 회의에서 논의할 내용
-팀원 간 소통 원칙
-칸반 티켓을 언제, 어떻게, 누가 추가할지
-WIP 제한
④ 피드백 루프 구현
-데일리 칸반 회의: 어떻게 하면 구현하고자 하는 기능을 좀 더 빠르게 구현할 수 있을지, 업무가 끝난 인원이 다른 업무를 당겨올 수 있는지
-주간 보충 회의: 칸반 보드에 추가할 만한 업무가 있는지 확인, 다음 주에는 어떤 업무를 할 것인지
-격주, 혹은 월간 회의(추가적): KPT 회고 진행
⑤ 협력적인 개선, 실험적인 발전
3) 칸반 원칙
-하던 업무를 칸반 보드에 올려두는 것부터 시작합
-점진적인 변화를 추구
-직위에 관계 없이 리더십을 발휘
4) Github 이슈, 마일스톤, 프로젝트
이슈 생성 -> 이슈를 마일스톤으로 그룹화 -> 프로젝트 추가(칸반)
<Chapter2. 프로젝트 Git flow>
1.Git branch 다루기
1) Git branch란
브랜칭(branching): 기존 개발중인 메인 개발 코드를 그대로 복사하여 새로운 기능 개발 하는 버전 관리 기법(메인 개발 코드를 건드리지 않음)
ex. main, feature
main: 기존 브랜치
feature: 새로운 기능 개발을 위해 코드 추가 및 삭제
2) 브랜치 생성하기 / 변경하기 (git switch)
// feature라는 브랜치를 새로 생성하는 경우, -c를 붙입니다.
git switch -c feature
// checkout이라는 명령어도 사용할 수 있습니다.
git checkout -b feature
// 기존에 있던 main 브랜치로 HEAD를 변경하려면, -c를 붙이지 않습니다.
git switch main
git checkout main3) 브랜치 합치기 (git merge)
-로컬에서 머지
// 기능 개발이 진행되었습니다.
git commit -m "기능1의 세부 기능1"
git commit -m "기능1의 세부 기능2"
git commit -m "기능1 개발 완료"
// 머지를 위해 main 브랜치로 전환
git switch main
// main 브랜치로 feature 브랜치를 병함
git merge feature-feature 브랜치로 push -> main 브랜치로 pull request(권장)
// 기능 개발이 진행되었습니다.
git commit -m "기능1의 세부 기능1"
git commit -m "기능1의 세부 기능2"
git commit -m "기능1 개발 완료"
// Github 리포지토리로 푸시합니다.
git push origin feature
// Github에서 Pull Request를 합니다.4) 브랜치 삭제하기 (git branch -d)
// merge 완료 후 삭제
git branch -d <브랜치명>
// merge 전 삭제
git branch -D <브랜치명>2.프로젝트 Git Flow 학습
브랜칭 전략: 보다 효율적인 개발 프로젝트 코드 관리를 위해 브랜치의 종류를 나눠서 관리하는 전략. 가장 유명한 브랜칭 전략이 Git 브랜칭 전략인 Git Flow.
1) Git flow
main: 사용자에게 언제든 제품으로 출시할 수 있는 브랜치
dev: 다음 버전 배포를 위한 개발 중인 브랜치
feature: 기능 개발, 리펙토링, 문서 작업, 단순 오류 수정 등 다양한 작업을 기록하기 위한 브랜치
<Chapter3. 프레임워크 선택 및 설치(FE)>
1.개발 환경 구성
1) 필수 항목
① Node.js: 호환성 보장을 위해 Node.js LTS 버전 사용을 권장
② Node.js 패키지 매니저: npm 혹은 yarn
③ 버전 관리 시스템 / 형상 관리 시스템 + 원격 리포지토리 서비스: Git(버전 관리 시스템), Github(원격 리보지토리 서비스)
④ 프론트엔드 프레임워크(라이브러리): React
⑤ CSS
-CSS-in-JS 라이브러리를 사용하여 컴포넌트로 묶어 관리: Styled-Component, Emotion
-Utility-First CSS: Tailwind CSS, Bootstrap
-CSS 파일 따로 관리
-SASS 사용
-UI 프레임워크 사용 (비추천): Material UI, Chakra UI, Radix UI
⑥ CSS 네이밍 컨벤션: BEM, Utility-First (Tailwind, Bootstrap)
⑦ Create React App
⑧ 린터: eslint,prettier
2) 선택 항목
① HTTP 요청: Fetch API & isomorphic-fetch, Axios, React Query (TanStack Query), SWR
② 상태 관리: Redux, Recoil, Zustand, React Context API, Mobx
③ TypeScript
④ 번들러: webpack, esbuild, vite, parcel(CRA로 제작한다면 내장 번들러 사용해도 됨)
⑤ 테스트 프레임워크: Jest(CRA 내장), React Testing Library(CRA 내장), Cypress
