22.08.22_TIL

📌 프로젝트를 시작하기전 Github 세팅을 배우는 날이다. 이미 한 번 해봤어도 다시 깊게 학습해보자!

📗 오늘 학습한 내용

Github 레포지토리에 필요한 파일

• README.md
  • 프로젝트 이름
  • 프로젝트 핵심 기능 소개
  • 팀원 소개
  • Wiki로 링크
• .gitignore
  • git으로 관리하지 않는 파일 모음
  • secret token, 공유할 필요가 없는 설정 파일을 기록하면 git에 push 되지 않는다.
• LICENSE
  • 해당 코드의 라이센스 표기

Github 기능

• Issue
  • 프로젝트에 새로운 기능 제안, 버그를 찾아 제보하는 등 프로젝트의 이슈를 작성
• Milestone
  • 이정표 역할, 테스크 카드(Issue)를 그룹화 하는 데 사용
• Pull Request
  • git branch에 합칠 수 있는지 확인하는 요청
• Project
  • Github 내에서 업무 관리를 해줄 수 있게 돕는 기능

칸반

• 팀과 조직이 작업을 시각화하고, 업무의 병목 현상과 리소스 낭비를 해결하는 업무 관리 방법
• 반반 보드를 통한 시각화
• 업무를 하나의 티켓으로 표현하고, 업무 단계를 하나의 열로 표현한다.
• 새로운 업무가 생기면 가장 왼쪽 열에 업무가 쌓이고, 업무가 잘 진행되면 가장 오른쪽으로 전달되는 방식이다.
• 백로그 → 할 일 → 진행중 → 완료

칸반 실천법

• 업무 시각화
• 진행 중인 업무 제한
• 흐름 관리
• 명확한 프로세스 정책
• 피드백 루프 구현
• 협력적인 개선, 실험적인 발전

Github 이슈

1. Issue (task card) 생성
2. 테스크 작성
3. 테스크 일정 완료 후 이슈 닫기

Github 이슈 템플릿 카드

1. Settings 클릭
2. Issue의 Set up templates를 클릭

Github 마일스톤

깃허브 마일스톤을 이슈, PR 그룹의 진척도를 확인하는데 사용한다.

1. Milestones 생성
   1. Issue 탭을 누르고 Milestones를 누른다.
   2. Create a Milestone 혹은 New milstone을 누른다.
2. Milestones 세부 내용 작성
3. Milestones 생성 확인

Project 

1. Project 생성
   
   1. Projects 탭 선택 후 Add project 클릭 Go to the.... 클릭
   2. New Project 클릭
   3. 템플릿 선택 후 Create 버튼 클릭
2. Project 이름 및 접근 설정
   1. 오른쪽 상단의 버튼을 눌러 Settings 클릭
   2. 프로젝트의 이름과 간단한 설명을 추가하고 Save 클릭
   3. 프로젝트의 이름이 변경 확인
   4. 설정 페이지 왼쪽 탭에 Manage access 클릭
   5. Base Role을 Read로 변경
   6. Admin 권한으로 팀원 초대
3. Issue 연결하기
   1. #으로 자신의 레포지토리 찾기
   2. 레포지토리 선택 후 Issue, PR 선택
   3. Add selected items 버튼 클릭 후 item 추가
   4. 레포지토리에 작성한 Issue들 추가 확인
4. Project 설정
   1. 각 이슈들의 상태 설정 Todo, In Progress, Done
   2. Labels, PR, Reviewers, Repository, Milestone 등 칼럼 추가 가능
   3. 그룹으로 나눠보기 가능
   4. Assignees, Status, Milestone, Repository 등으로 나누기
5. Project 적용
   1. Projects 탭 Add project 클릭 생성한 project 클릭

Git branch

• 기존 개발중인 메인 개발 코드를 그대로 복사하여 새로운 기능 개발을 메인 개발 코드를 건드리지 않고 할 수 있는 버전 관리 기법
• 브랜치 생성 및 변경하기 (git switch)

# 브런치 생성(switch)
git switch -c 브런치명

# 브런치 생성(checkout)
git checkout -b 브런치명

# 기존에 있던 main 브런치로 변경
git switch main
git checkout main

브랜치 로컬에서 합치기 (git merge) 

# 기능 개발 진행
git commit -m "세부 기능1"
git commit -m "세부 기능2"
git commit -m "개발 완료"

# 머지를 위해 main 브런치로 전환
git switch main

# main 브런치로 feat/todo 브런치 병합
git merge feat/todo

브랜치 Github에서 합치기 (git merge) 

# 기능 개발 진행
git commit -m "세부 기능1"
git commit -m "세부 기능2"
git commit -m "개발 완료"

# Github 레포지토리에 푸쉬
git push origin feat/todo

# Github에서 Pull Request를 진행
# 검수 후 merge

브랜치 삭제 (git branch -d 브런치 명)

Git flow

• 대규모 개발 프로젝트를 제작하여 하나의 소프트웨어의 릴리즈 버전을 명확하게 나누고, 다양한 버전을 배포해야 하는 당시의 개발 환경과는 적합했지만, 빠르게 제작하고 배포하고 고객의 피드백을 받는 애자일한 개발 팀에 적용하기에는 복잡했다.
• 개발 현장의 상황에 맞게 Git flow를 정하는 것이 중요하다.

git 핵심 브랜치

• main: 사용자에게 언제든 제품으로 출시할 수 있는 브랜치
• dev: 다음 버전 배포를 위한 개발중인 브랜치
• feature: 기능 개발, 리펙토링, 문서 작업, 단순 오류 수정 등 다양한 작업을 기록하기 위한 브랜치

프론트엔드 개발 전 개발환경 구성

필수항목

• Node.js
  • JS 브라우저를 벗어나 다양한 운영체제에서 실행할 수 있는 JS런타임이다.
• Node.js 패키지 매니저
  • 여러 소프트웨어를 한꺼번에 모아 설치, 업그레이드, 설정, 삭제 등을 할 수 있는 소프트웨어 툴이다.(npm, yarn)
• 버전 관리 시스템 / 형상 관리 시스템 + 원격 레포지토리 서비스
  • Git을 주로 사용하고, Github와 같은 원격 레포지토리 서비스도 함께 사용한다.
• 프론트엔드 프레임워크(라이브러리)
  • React (18버전 사용 권장)
  • vue
  • Angular
• CSS
  • CSS 프레임워크(라이브러리)
    • CSS 모듈
    • Styled-Components
  • CSS 네이밍 컨벤션
    • BEM
    • Utility-First (Tailwind)
  • CSS 관리 방법
    • CSS-inJS 라이브러리르 사용하여 컴포넌트로 묶어 관리: Styled-Component, Emotion
    • Utility-First (Tailwind CSS)
    • CSS 파일 따로 관리
    • SASS 사용
    • UI 프레임워크 사용 (Meterial UI, Chakra UI, Redix UI)
• Create React App
  • 쉽고 빠르게 React SPA를 개발할 수 있도록 여러 오픈소스를 묶어 제공하는 툴체인
• 린터
  • 문법 에러나 코드 스타일 규칙에 맞지 않는 코드를 찾아주는 툴이다.
  • JS에서는 eslint, prettier가 가장 유명하고 많이 쓰이는 툴이다.

선택항목

• HTTP 요청 (혼용되지 않게 하나만 사용)
  • Fetch API & isomorphic-fetch
  • Axios
  • React Query
  • SWR
• 상태 관리
  • Redux
  • Recoil
  • Zustand
  • React Context API
  • Mobx
• TypeScript
  • 정적 타입 언어처럼 사용할수 있게 변수나 함수의 리턴값에 타입을 지정하여 해당 타입이 아니면 TypeScript를 JS로 컴파일 하지 않게 하고 에러를 내어 견고한 개발을 돕는다.
  • 초기 설정이 어렵고 학습에도 시간이 오래걸린다.
• 번들러
  • webpack
  • esbuild
  • vite
  • parcel
• 테스크 프레임워크
  • Jest, React Testing Library
  • Cypress

📘 추가로 공부할 내용

Study원과 함께 진행중인 프로젝트 구현(메인 플젝 후 다시시작)

나만의 포트폴리오 사이트 구현  해보기

pre-project (스택오버플로우)

• 파트 나눠보기
• 자료 찾기

📝 중요한 내용

• Github