Coding Convention

• 컨벤션 통일성을 위해 husky 적용

컴포넌트 함수 종류에 대한 여러 의견들 공유

• 의견 1) 컴포넌트는 화살표 함수, 기능을 중요시 하는 함수임을 명확히 해야 하는 부분만 function 키워드를 사용한다. 호이스팅 관련해선 function 키워드가 호이스팅이 발생해 사실 사용하지 않는 게 좋다고 생각하는데 이 부분은 각자의 선호를 반영해도 괜찮을 것 같다. 현업에서도 이 부분까지 컨벤션으로 가져가진 않는다고 한다. 다만 타입스크립트에서는 선언식 사용중에 호이스팅이 발생하면서 생길 수 있는 크리티컬한 에러가 있기 때문에 함수 표현식을 사용하길 권장한다.
• 의견 2) yarn create vite 했을때 생성되는 파일들 말고 새로 생성하는 컴포넌트 + 함수는 모두 화살표 함수로 통일했다. function이 호이스팅 면에서 더 이점을 갖기는 하지만 사실 작은 프로젝트 단계에서 호이스팅까지 신경쓰면서 개발을 하기 보다는, 함수 선언/ 호출 순서를 잘 지켜주면서 개발하기로 했다.
  => 결론 : 화살표 함수 사용하기
  => 이유 : 타스 → 화살표 함수가 제일 적합하다 / 자스는 선언문이 적합( 이유 : 타스 화살표 함수는 재사용 가능성 )

---

• 네이밍

  • 1. 변수: CamelCase
  • 2. 상수 데이터: UPPER_SNAKE_CASE(예를 들면 키값)
  • 3. 컴포넌트: PascalCase
  • 4. 변수는 var 사용 금지, 그냥 const ! 안 되면 let

• 암시적 반환을 최대한 활용한다 (early return)

• axios, async await을 이용할 때 try & catch를 이용한다

• 구조분해할당을 적극 이용하자

• 변수 등을 조합해서 문자열을 생성할 때는 무조건 리터럴을 이용한다

  • X) var1 + “ “ + var2
  • O) ${var1} ${var2}

• switch-case 사용시 break를 강제하자. case문 사이들끼리는 가독성을 위해 띄어주자

• 조건문은 무조건 삼중 등호 연산자를 적극 사용하자.

• 주석은 쓰려고 하는 대상 바로 위에 쓰자

• img태그의 alt 꼭꼭 넣어주시고, 한글로 적기! alt=”고양이”

• **button 태그에는type을 명시**합시다! asdf

• 버튼, 헤더와 같이 common component에서는 children 적극 활용

  // 여기에 주석!
  const SearchBar = (props) => {
    const { a, b, c } = props;
    ...

• props → hooks → 핸들러

**styled 사용 방식**

1. 스타일 코드와 컴포넌트 코드를 분리하는 방식

   1. 컴포넌트 파일에서는 import * as S from "./TextInput.style"; 와 같은 형식으로 정의해둔 스타일을 불러와서 사용.

   2. 아래와 같이, 스타일컴포넌트 앞에 S. 을 붙여주기

      <S.Container>
            <S.Label>{label}</S.Label>
            <S.TextInputBorder error={isError} customStyle={customStyle}>
              <S.Input
                id={`text-input-${name}`}
                type={type}
                name={name}
                placeholder={placeholder}
                isError
                value={value}
                onChange={onChange}
                disabled={disabled}
                {...rest}
              />
            </S.TextInputBorder>
            {isError && <S.Error>{errorMessage}</S.Error>}
          </S.Container>

• 컴포넌트 최상단에 감싸는 것은 St{컴포넌트명}Wrapper.
• interface와 const SearchBar = () ⇒ 컴포넌트 선언 사이 한줄 띄어쓰기.

interface SearchBarProps {
    isSpread : boolean;
}
const SearchBar = (props : SearchBarProps) => {
		// 구조분해 할당
  const { isSpread } = props;
  ...
}

• 컴포넌트 선언 과 처음 스타일드 컴포넌트 선언 사이 한줄 띄어쓰기.
• 스타일드 컴포넌트는 속성별로 개행을 해주므로 한줄 띄어쓰기 하지 않음.
• 컴포넌트에서 props로 전달받은 interface를 선언해줄때, 컴포넌트명+Props로 선언하기

네이밍 : 카멜케이스

• 컴포넌트,변수명 : 동사 , 명사 중요한게 앞으로 → UserImg, DeleteBtn, useInfo
• 함수명 : handleUserName
• Wrapper