[토이프로젝트] 초기 세팅 하기

1. Github clone 하기

---

• 토이 프로젝트를 위해 개설된 깃 레퍼지토리를 clone 해온다.
  

• 초기 파일 구조
  

2. JSON 설정 파일에서 설정 바꾸기

---

• 팀원들과 같은 환경에서 작업하기 위해 기본 설정을 맞추었다.

• 좌측 하단의 톱니바퀴 버튼을 눌러 설정에 들어간다.
  
  
  

• 우측 상단에 설정열기 아이콘을 누른다.
  
  
  
• 다음과 같이 json 형식으로 설정을 세팅하였다.
  

3. 프로젝트에 필요한 패키지를 설치하기

---

• npm install을 하여 프로젝트에 필요한 패키지를 설치한다.

  npm install

  • Build : vite

  • CSS : styled-component, tailwind

  • Code Formatter : prettier

    • 일관적인 코드 스타일을 유지할 수 있게 도와주는 도구

  • Linter : ESLint

    • 버그가 날 수 있을 만한 코드, 스타일 오류, 의심스러운 구조 등을 찾아서 잡아주는 도구

• package.json파일
  

4. Vite 실행하기

---

• npm run dev을 수행하면 아래와 같이 vite가 실행된다.

  npm run dev

  
  
  

• tailwind css가 잘 적용된 것을 확인 할 수 있다.
  
  

5. git 협업 방식

---

• Git-flow 방식을 사용하기로 하였다.
  

• 브랜치명 : 이름/기능 (ex = dami/login)

6. Code Convention

---

🟣 Naming Convention

공통

• 길이 최대 20자 이내로 제한

종류	표기법	조합
변수	camelCase	명사 ex) userDate
함수	camelCase	동사 + 명사 ex) getUserData
컴포넌트	PascalCase	명사 ex) Movie

변수

• 상태 처리를 위한 변수는 is...으로 구성 ex) isOpen

• idx, arr, cnt, btn과 같은 이해하기 쉬운 약자는 사용하되, 그 외에 약자는 사용하지 않음

• 상수들은 무조건 대문자 + (ex. MAX_LEN)

함수

• 이벤트핸들러 조합 : handle + 명사 + 동사 (ex. handleThreeTabClick)

• 이벤트핸들러를 props로 전달할때는 handle로 전달

🟣 Code Convention

• tab depth : 4개 이하

• 주석 : 모두 /* */로 작성

• magic number는 지양 (ex. asset로 분리는 논의)

• 코드 블록문들(조건문, 반복문 등)은 아래의 구조를 따르기

• else if문 사용 지양

  if(asd) {
  
       asdasd
  
  } 

• 함수 파라미터: 3개 이하

• 비동기 함수는 async await을 사용

• 비동기 Ajax 방식은 fetch를 사용

• 컴포넌트, 함수는 arrow
  • arrow 함수는 소괄호 필수, 내용에는 중괄호 필수(ex. const A = () => {return})

import

• 상단 = React 관련 모듈(use~~)

• 상중단 = 라이브러리

• 중단 = 컴포넌트들이나 custom Hook, 외부 분리된 파일들

• 하단 = CSS 파일

• import 요소들은 구조분해할당 방식으로 호출,
  각 요소별 정렬은 영어 표준에 따름(sort)

• import 예시

  import ‘React’ from “react”
  
  import {use~}
  
  import 컴포넌트~

• 컴포넌트 내부 구조 순서

  1. 상태 변수 | 2. 함수 | 3. 이벤트 핸들러 | 4. useEffect | 5. return

🟣 Commit Convention

• feat : 새로운 기능 추가

• fix : 버그 수정

• docs : 문서 수정

• style : 코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우

• refactor : 코드 리펙토링

• test : 테스트 코드, 리펙토링 테스트 코드 추가

• chore : 빌드 업무 수정, 패키지 매니저 수정

Body

1. commit 설명에는 어떤 작업들을 해결했는지 넘버링하여 목록으로 자세히 작성.
2. 메인 commit 내용이 아니더라도 부가적으로 해결한 부분들도 함께 Body에 작성.
   이때 중요한 것부터 작성

ex) feat: Login Logic

1. 로그인 로직을 구현하였습니다.
2. 로그인 화면의 버튼에 hover css를 추가하였습니다.
3. Nav바의 글씨가 춤추는 버그를 해결하였습니다.

✅ 다음 할 일

---

• 새 브랜치를 만들어 담당한 컴포넌트를 만들어보자.
  내가 구현해야 하는 부분은 테스트 질문 페이지이다.

• 코딩을 하면서 맞닥뜨린 문제와 새로 알게 된 점을 정리하고 기록하자.