Github 프로젝트
GitHub Repository에 꼭 필요한 파일
README.md
: 프로젝트 관련 기타 상세 정보
- 프로젝트 이름
- 프로젝트 핵심 기능 소개
- 팀원 소개
.gitignore
: git으로 관리하지 않는 파일 모음
- secret token
- 설정 파일
- 공유가 필요하지 않는 기타 파일
LICENSE
: 해당 코드의 라이센스, 코드의 공유에 대한 기준 및 제한을 설정하고 코드를 사용하는 사람들에게 정확한 정보 제공
프로젝트 관리에 활용할 수 있는 Github 기능
Issue
: 해당 프로젝트의 버그 제보, 기능 추가 및 개선 제안등을 할 수 있음
Milestone
: 이슈들을 그룹화하고 이슈가 종료되면 Milestone을 사용해 진행상황을 업데이트하며, 해당 기능을 통해 프로젝에서 발생한 이슈를 추적하고 진행상황이 어떻게 되는지 파악할 수 있음
Pull Request
: 작성한 코드가 해당 프로젝트에 Merge될 수 있는지 확인 및 수락 요청함, 해당 과정을 통해 코드 리뷰를 많이 진행하고 있으며 협업시 매우 중요한 과정임
Project
: GitHub Project는 GitHub 내에서 업무 관리를 해줄 수 있게 돕는 새로운 기능
Kanban
: 조직과 팀의 업무 프로세스 흐름을 시각화해 업무의 병목 현상과 리소스 낭비를 해결하는 업무 관리 방법
- 프로젝스 시각화를 통한 업무 파악 용이
- 진행 중은 업무를 관리 및 제한해 효율성 증가
- 팀 정책 설정을 통한 명확한 팀 단위를 협업 효율 증가
- 회의 및 리뷰를 통한 피드백으로 발전 및 개선
프로젝트 Git flow
: 효율적은 개발 프로젝트 코드 관리를 위해서 브랜치를 각 특징과 항목에 맞게 종류를 나누어 관리하는 브랜칭 전략중 하나
- 사용자에게 제공될 수 있는 내용을 담는 main branch, 다음 버전 배포를 위한 큰 기능을 담는 dev branch 그리고 기타 다양한 작업 내용을 가지는 작은 단위의 feature branch로 나눔
react 프로젝트 프레임 워크 선택 및 설치
Create React App
npx create-react-app {원하는 디렉터리 경로(디렉토리 이름)}
Redux & Redux toolkit
npm install @reduxjs/toolkit react-redux
Styled Component
npm install --save styled-components
ESlint, Prettier
: vsc 확장 프로그램 ESLint, Prettier 설치
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
// "editor.codeActionsOnSave" 설정에서 "source.fixAll.eslint" : true 로 설정하면 자동으로 에러 및 스타일링 수정함
{
"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
}
- 출처 코드스테이츠
