처음으로 협업 프로젝트를 설정해 보았다.
초기에 빠르게 진행해 참여자 모두가 작업할 공간을 마련해야 하는 부분이므로
프로젝트 세팅 전 과정을 다시 해보면서 이번 경험을 기록하고자 한다.

Github 세팅

Organization 생성

1. 깃허브 상단 네비게이터의 프로필 이미지 클릭!
   

2. Your organizations
   

3. New organization
   

4. 플랜 선택, 보통 Create a free organization
   

5. Set up your organization

• Organization Name은 이렇게 주소에 들어간다.
  https://github.com/organizations/watermelon-project/
• 이때 Contact email이 필요해서 장기 프로젝트는 공용 이메일주소를 마련해도 좋겠다.
  

6. Add organization members

• 팀원 깃허브 계정 정보를 미리 조사하면 좋다.
  (username, full name or email address)
• skip this step 하고 나중에 초대할 수도 있다.
  
  

7. 인증하면 생성된다.
   

Repository 생성

8. oranization > Repositories > New repository
   

9. Create new repository

• Organization Name도, Repository name으로 사용할 프로젝트 이름도 미리 정하는 것 추천! 주소로 쓰이니 다른 팀원들 마음에도 들도록 ㅎㅎ
• 나는 학습용으로 사용하기 위해 Public을 선택했다.
• Add a README file & Add .gitignore 굳이 하지 않는다. 프로젝트 파일에 react를 설치하면 생기는 예시 파일을 편집해서 사용하면 된다.
  

프로젝트 디렉토리 생성 & 연결

10. 이제 로컬에 프로젝트를 만들고 깃허브에 만든 레포지토리와 연결한다.

• create a new repository: 그냥 로컬에서 디렉토리 만들어서 열고 명령어로 레포지토리 만들고 깃허브랑 연결하는 것이다.

• push an existing repository: 이건 명령어로 깃허브랑 연결만 하는 것. 주로 쓰던 방법이다.
  

• Qick setup: 난 이걸 추천한다.

  • set up in desktop 하면 GitHub Desktop이라는 프로그램 설치가 안내된다. 이게 뭐냐면 그냥 Git을 GUI로 하는 프로그램이다.
    

  • 이미 설치한 사람은 이렇게 프로그램이 열린다. clone만 누르면 프로젝트 디렉토리 생성부터 remote 연결까지 한방에 된다. 굿 (clone 하는 것이므로)

  • 나중에 인증 문제가 있을 수 있으니 URL만 HTTPS에서 아까의 안내 페이지에 있던 SSH로 바꿔준다.
    
    

GitHub 컨벤션 공지

이슈, PR 템플릿 등록

PR이 머지되면 이슈 Close 되게 하는 방법

브랜치 룰 설정

브랜치 머지 조건 설정 (PR 강제)

이슈 - 커밋 - PR - 코드리뷰 - 머지 방법

이슈

이슈는 무엇을 어떻게 써야 할까?

커밋

브랜치

머지

추천 템플릿과 이유
이슈, 커밋, PR의 크기는?
코드 리뷰 쉽게 하기
머지 커밋 방지
깃 그래프 보기
빌드 확인하기
배포 미리보기, 체커, 자동배포

도구 사용 - 설정 파일 추가

gitignore 추가

11. gitignore.io
    아까 깃허브에서 굳이 수고하지 않은 이유... 이런 좋은 사이트가 있기 때문이다 ㅎㅎ
    https://www.toptal.com/developers/gitignore

• 검색창에 팀의 개발 환경 정보를 모두 넣고(OS, IDE, 언어/프레임워크) 생성 버튼을 클릭하면 gitignore의 내용이 생성된다.
• 위의 검색창에서 어떤 정보를 골라서 생성한 건지도 주석으로 기록된다. 그대로 붙여넣는다.
  
  
  

12. 첫 커밋을 하고 푸시하면 로컬과 원격이 잘 연결되어 있다는 걸 확인할 수 있다.
    가능하면 설정 파일은 프로젝트에 필요한 만큼만 레포에 푸시하는 게 좋다. (예시 파일/코드 삭제, gitignore 설정)
    그러지 않으면 설정한 사람만 추가한 코드가 엄청 많아져서 깃허브 Insight를 볼 때 진짜(?) 기여도를 알기 어렵다.
    게다가 언젠가 누군가는 예시 코드/파일을 삭제해야 하니 index 파일 정리와 라우터, 페이지 컴포넌트, 그 안에 페이지 이름 넣기 정도는 세팅하는 사람이 미리 해두는 게 깔끔하다!
    

React App 설치

11. 무사히 생성됐으니 IDE에서 프로젝트 디렉토리를 열고 터미널에서 명령어로 React를 설치한다.

• npm init react-app .
npm init react-app <폴더 이름> 으로도 된다는데 나는 설치 과정에서 파일이 추가되는 게 보이는 것도 좋고 명령어가 늘 똑같아서 위 방법을 쓴다.
  

• 컴퓨터 사양만큼 기다린다. 난 맥미니 써서 좀 기다렸다.
  

• Happy hacking! 예시 파일로 프로젝트 뼈대가 생겼으니, 설정 파일을 본격적으로 추가한다.
  

Editor Config

에디터마다 GUI로 설정해야 하는 부분을 파일로 전달하는 셈이라 프로젝트 루트에 두고 레포지토리에 올리면 공통된 설정을 사용할 수 있다고 한다.
.editorconfig

root = true

[*]
indent_style = space          # 들여쓰기에 스페이스 사용
indent_size = 2               # 들여쓰기 크기는 스페이스 2개로 쓰기
charset = utf-8               # 파일 인코딩은 utf-8
insert_final_newline = true   # 파일 맨 마지막에 빈 줄 추가하기

패키지 설치 & 설정

package.json

패키지 명령어 설정 파일
나만의 명령어 저장, 패키지 적용 범위 설정, 버전 정보 확인 등 가능

prettier

https://prettier.io/docs/en/install

간단히 써보면,

1. 패키지 설치

npm install --save-dev --save-exact prettier

2. .prittierrrc.json 생성

3. .prettierignore 생성

4. 기본 명령어로 실행

npx prettier . --write

--write는 자동수정(포매팅)

5. 체크
   

실행할 때 자동수정까지 되도록 추가
6.

eslint

내장
prettier와 충돌 피하는 방법
eslintrc.json (js 말고 json이 좋음)
eslintignore
eslint.config.mjs

stylelint

stylelintrc.json

husky

포매터, 린터 실행 강제

스켈레톤

있어야 할 폴더들 - 폴더의 이해
네이밍 규칙 예시