컨벤션 정하기

많은 것을 신경쓰면 리소스가 너무 드니 최소한으로만 정하기

생각나는대로 일단 다 적어봄

정할거 4가지

커밋 메시지 컨벤션
코딩 컨벤션
네이밍 컨벤션
폴더&파일 구조 컨벤션

참고하면 좋을 링크 : https://www.notion.so/2bf216fe9516485ca465839ce20f3bef

[x] 커밋 메시지 컨벤션 정하기
- 미리 정해놓은거 쓰는건 어떨까??

[x] 코딩 컨벤션 정하기

전부 다 따지면 시간이 너무 많이 드니 아예 유명한 코딩 컨벤션(https://ui.toast.com/fe-guide/ko_CODING-CONVENTION 같은..)을 참고하는 것도 좋을지도?

강조해서 생각해볼만한 것들

들여쓰기는 탭? 공백? 공백(토스트 컨벤션 참조)
공백이라면 한칸 두칸? 공백 두 칸(토스트 컨벤션 참조)
문장 끝에 세미콜론? ㅇㅇ(토스트 컨벤션 참조)
쌍따옴표 홑따옴표? 홑따옴표
ESlint랑 prettier 사용 미사용? 흠.. 쓰는것도 괜찮을지도..? ㅇㅇ

삼항연산자 줄바꿈?

// 짧으면 한 줄
let result = (login) ? true : false;

// 길면 개행
// 조건을 맨 위에 쓰고
// ?와 true일때 실행할 내용을 내리고
// :와 false일때 실행할 내용 아래로 내리기 ?
// 코드가 길어지겠지만 삼항연산자 코드가 길어지면 가독성이 너무 안좋으니 가독성을 위해 ,, ?
let result = (조건)
             ? (
               <>
                 <div>true</div>
               </>
             )
             : (
               <>
                 <div>false</div>
               </>
             )

for, if문의 코드가 짧을 경우 중괄호를 생략할 것인가? 가독성을 위해 중괄호 필수로 쓰기?

// 생략 안한 경우
if ( ) {
  ...
} else if ( ) {
  ...
} else {
  ...
}

for (let i = 0;  i < 3; i++) {
  console.log(i);
}

// 생략한 경우
if ( ) ...
else if ( ) ...
else ...

for (let i = 0; i < 3; i++) console.log(i);

import … from … 구문의 순서를 신경쓸 것인가? 만약 신경쓸 것이라면 어떤 기준으로?

분류만 신경쓰기

**// 만약 신경쓴다면 크게만 분류하는건 어떨까?**
1. 패키지
import ... from react
import ... from react-router-dom

2. 컴포넌트
import Button from './Button'

3. 이미지
import HomeIcon from './image/home-icon.png'

**// 예시**
import ... from react
import ... from react-router-dom
import Button from './Button'
import HomeIcon from './image/home-icon.png'

CSS 속성 선언 순서는 신경쓸 것인가? 만약 신경쓸 것이라면 어떤 기준으로?

일단 ㄴㄴ. 구현 먼저

**// NHN 코딩 컨벤션 참고
// 만약 신경쓴다면 1, 2, 3, 4, 5만 신경쓰고 그 안의 속성들은 자유롭게 하는건 어떨까?**

**1. 레이아웃**
  - display
  - visibility
  - overflow
  - float
  - clear
  - position
  - top
  - right
  - bottom
  - left
  - z-index
**2. Box**
  - width
  - height
  - margin
  - padding
  - border
**3. 배경**
  - background
**4. 폰트**
  - font,color
  - letter-spacing
  - text-align
  - text-decoration
  - text-indent
  - verticalalign
  - white-space
**5. 기타**
  - 위에 언급되지 않은 나머지 속성들로 폰트의 관련 속성 이후에 선언하며, 기타 속성 내의 선언 순서는 무관함
  - 밴더속성과 핵속성은 해당 속성 뒤에 선언

리액트 컴포넌트를 정의할때는 rfc 단축키로 할것인가?
1. rafce
js 확장자로? jsx 확장자로?
1. jsx ㄱㄱ? ㄱㄱ ?? ㄱㄱㄱㄱㄱㄱㄱㄱㄱ

[ ] 네이밍 컨벤션 (검색해서 사람들이 많이 쓰는대로 정리해봄)
1. 리액트 컴포넌트명 ⇒ 파스칼 케이스 (ex: MyComponents.jsx)
2. 변수, 자바스크립트 함수명, props, 커스텀 훅 ⇒ 카멜 케이스 (ex: var myComponents)
  - 어떤 값으로부터 다른 값을 계산하는 함수 ⇒ get으로 시작 (ex: getToday)
  - 이벤트 함수를 보내는 prop 이름은 on__으로 짓고, 이벤트 함수 이름은 handle__으로 짓는다
```
import { MouseEvent as ReactMouseEvent, useCallback, useState } from 'react'

function FunctionComponent() {
  const [searchTerm, setSearchTerm] = useState('')

  **최대한! 화살표함수 사용하기 ?!**

  // 이벤트 핸들러 함수
  const handleClickSearchButton = useCallback(e) => { ... })

  const handleChangeSearchTerm = useCallback(e => { ... }) 

  // 이벤트 핸들러 prop
  return (
    <>
      <SearchInput onChange={handleChangeSearchTerm} />
      <SearchButton onClick={handleClickSearchButton} />
    </>
  )
}

export default FunctionComponent
```
  - 커스텀 훅의 이름은 use___ (ex: useGetWindowSize)
3. 상수 ⇒ 대문자 스네이크 케이스 (ex: MY_COMPONENTS)
[ ] 폴더&파일 구조 컨벤션 (검색해서 사람들이 많이 쓰는대로 정리해봄)
1. 컴포넌트를 만들때는 해당 컴포넌트의 성격(Components, Pages)에 맞는 폴더 안으로 들어간다.
  - 그 안에 컴포넌트 폴더 생성
  - 생성한 컴포넌트 폴더 안에 컴포넌트 파일 생성 (컴포넌트 파일명은 파스칼 케이스)
2. 페이지 이름은 ___Page (HomePage.jsx, LoginPage.jsx 등)
```
src
	ㄴ assets (이미지, 아이콘, 폰트 등 에셋 저장)
    ㄴ Images (여기 저장될 애들 파일명은 어쩌고-image.png / import할땐 어쩌고Image)
    ㄴ Icons (여기 저장될 애들 파일명은 어쩌고-icon.png / import할땐 어쩌고Icon)
    ㄴ Fonts
	ㄴ components
		ㄴ Header
			ㄴ Header.jsx
    ㄴ Button
      ㄴ Button.jsx
	ㄴ pages
		ㄴ HomePage
			ㄴ HomePage.jsx
```