[1차 프로젝트] 초기 세팅

🙂 프로젝트 세팅
1. 팀 이름 정하기 : github repo. 생성용 국문/영문 이름
2. Planning Meeting : 한 sprint(=1주) 동안 할 일에 대한 미팅. 매주 월요일 진행
3. Trello 세팅 : 트렐로에 프로젝트 생성 후, 팀원 및 멘토 모두 초대
4. Slack 세팅 : 팀 단위 슬랙 채널 생성 및 팀 슬랙 채널에 팀의 github repository 주소 연동
5. 프로젝트 초기 세팅 : [Frontend] React CRA Setting

👓 Planning Meeting

• 프로젝트 사이트 특이사항 파악

• 각 사이트는 서비스 특징에 따라 서로 다른 프로세스와 디테일을 가지고 있음

• 각 파트별 참고 구현 목록
  

• 구현해야 할 기능에 대한 우선순위(필수 구현 사항, 추가 구현 사항, 개선 사항) 를 팀원과 함께 상의하여 결정
  
  

🎫 Trello 세팅

• Backlog / This Week / In Progress / Done 으로 보드 나누기

• [Backlog] 기능별로 담당자 할당 및 티켓(필수 구현 및 추가 구현 사항 모두) 생성
  (1) 티켓은 페이지/기능 단위로 생성
  (2) 한 티켓에는 프론트/백엔드 구분(라벨 색상 통한 구분), 한 사람만 할당, 하나의 기능만 포함
  (3) 기능 구분 명확히 하기(ex. 메인 페이지 레이아웃, 메인 페이지 검색 기능, 메인 페이지 Feeds API 붙이기

• 각 파트 간 소통하여 어떤 순서로 작업을 해나갈 것인지 우선순위 조정

• [This Week] Backlog에 작성한 티켓 중 이번 주에 진행할 분량 할당
  
  

📣 Slack 세팅

• 빠른 소통을 위해 팀 단위로 슬랙 채널 생성

• 팀 슬랙 채널에 팀의 github repository 주소를 연동시켜 알림 받기
  -> 다음 명령어를 슬랙 채널에 입력하여 해당 채널에 github 알림을 연동/해제 가능

• github 알림 연동

    /github subscribe wecode-bootcamp-korea/프로젝트이름 reviews comments

    Example)
    /github subscribe wecode-bootcamp-korea/11-PrettyCloud-frontend reviews comments

• github 알림 해제

    /github unsubscribe wecode-bootcamp-korea/프로젝트이름

    Example)
    /github unsubscribe wecode-bootcamp-korea/11-PrettyCloud-frontend

🧵 프로젝트 초기 세팅

(1) node.js / npm(node package manager) 설치

• node가 설치되면 npm도 함께 설치됨

• node 설치 후에는 터미널에 node -v , npm -v 를 입력 후 버전 확인.
  -> 버전 정보가 뜬다면 제대로 설치가 되었다는 뜻임

(2) CRA(Create-React-App) 설치

// 1. 원하는 directory 이동
cd Desktop/wecode

// 2. westagram-react(프로젝트 이름으로 폴더 생성) 프로젝트 설치
npx create-react-app westagram-react

// 3. my-app 프로젝트 폴더로 진입
cd westagram-react

// 4. 로컬 서버 띄우기
npm start

• npm start 입력 시 http://localhost:3000 주소를 확인할 수 있음

• http://localhost:3000 접속 시 보여지는 첫 화면
  

(3) React Router 설치

npm install react-router-dom --save

(4) Sass 설치

npm install node-sass --save

(5) .eslintcache 파일 .gitignore에 추가

// .gitignore 파일에 아래 파일명 복사/붙여넣기

.eslintcache

(6) CRA 폴더 및 파일 구성

• 로컬에서 폴더만 생성하고 빈 폴더로 두고 PR을 올릴 경우, 폴더가 github에 올라가지 않음
• 반드시 폴더 안에 아무 파일이나 하나 생성하여 올리기.(ex: 빈 .js 파일 또는 .md 파일)

가. public 폴더

• data 폴더 : mock data 관리
• images 폴더 : 이미지 파일 관리
• index.html

나. src 폴더

• components 폴더 : 모든 페이지에서 공통으로 사용되는 컴포넌트 관리
• pages 폴더 : 페이지 단위의 컴포넌트 폴더로 구성
  • Login 폴더 : Login.js, Login.scss
  • Main 폴더 : Main.js, Main.scss
• styles 폴더
  • reset.scss - css 초기화
  • common.scss - 공통으로 사용하는 css 속성 정의 (ex. font-family, theme color)
• config.js - fetch()에 들어가는 API 주소 관리
• index.js
• Routes.js
  

(7) ESLint 및 Prettier 설치

• VSCode의 Extention으로 설치

• npm 패키지로 설치

npm install -D prettier eslint-config-prettier eslint-plugin-prettier

• 다양한 설정파일이 존재할 경우 다음과 같은 순서로 설정이 적용
  settings.json → .editorconfig → .prettierrc

// .vscode/settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
  },
  "javascript.format.enable": false,
  "eslint.alwaysShowStatus": true,
  "files.autoSave": "onFocusChange"
}

// .eslintrc
{
  "extends": ["react-app", "plugin:prettier/recommended"]
}

// .prettierrc

{
  "tabWidth": 2, // 탭 사이즈 2칸
  "endOfLine": "lf", // CRLF 대신 LF를 강제
  "arrowParens": "avoid", // 화살표 함수 파라미터 자리 불필요한 소괄호 제거
  "singleQuote": true, // 쌍따옴표 대신 홑따옴표 사용
}

(8) github repo 연동 및 push

• 초기 세팅이 완료되면 github에 올리기
• master branch에 merge 완료 후, 다른 팀원들이 해당 repo.를 clone 받기
• master에서 바로 작업 하는 것이 아니라 반드시 branch를 새로 생성하고 시작하기

// 초기세팅 작업 완료 후

// add -> commit
git add .
git commit -m "Add: first commit. 초기 세팅 완료."

// 설치한 CRA 프로젝트와 github repo를 연동시키기
git remote add origin https://github.com/(해당 repo 주소 입력)

// 또는 github repo(remote)에 연결 여부 확인하는 명령어
git remote -v

// 연동된 repository로 push 하기
git push origin master

// remote master에 초기세팅 코드가 merge 되면 다른 팀원들은 clone 받고, branch 생성하여 작업 시작
git clone https://github.com/(해당 repo 주소 입력)

//node-modules 폴더 생성(패키지 소스코드 생성)
npm install

//기능별(또는 페이지 단위) branch 생성하여 작업
git branch feature/login

(9) 개인별 branch 작업 후 github repo 에 push 및 PR 요청

// 개인별 branch 작업 완료 후

// add 안했을 때 파일명이 빨간색(modified 파일명)으로 표시됨
git status

// 임시저장('.' : 'all' 의미)
git add .

// add 후에는 파일명이 초록색(midified 파일명)으로 변경 됨
git status

//
git commit -m "ADD: 로그인 페이지 레이아웃 구현 완료"

// commit 목록 확인. 해당 github repo 에 commit된 메시지들 보여짐 (q 입력 시, 터미널 창에 명령어 칠 수 있는 곳으로 빠져 나옴)
git log

// local에서 작업한 branch를 remote로 push
git push origin feature/login

// github repo에 가서, PR request 템플릿에 맞게 작성 후, 리뷰 요청

<참고> Push 하기 전 검토 사항

• github에 push 후 conflict 사항을 확인하지 않고 미리 해결하고자, push 하기 전에 가장 최신의 main을 머지해서 확인할 수 있음

(1) git add, commit
(2) git checkout main(master)
(3) git pull origin main(master)
(4) git checkout feature
(5) git merge main(master)
(6) (컨플릭트 발생 시 해결 후 add, commit)
(7) git push origin feature

<출처> wecode(코딩 부트캠프) 세션