Frontend 코드 컨벤션

프론트 코드 스타일 컨벤션

import 문

• eslint 패키지로 자동 정렬

module export

• 타입/hook: export const ~~

  ex. export const useUser()⇒{}

• 컴포넌트: export default function <컴포넌트명>

함수 선언

• • const ()⇒ 함수 선언

상수 객체 만들 때 키 대문자

// bad

const TAB_INDEX = {
  first: 1,
  second: 2,
  third: 3,
};

const { first, second, third } = TAB_INDEX;

// good

const TAB_INDEX = {
  FIRST: 1,
  SECOND: 2,
  THIRD: 3,
};

const { FIRST, SECOND, THIRD } = TAB_INDEX;

CSS property

큰 덩어리마다 한 줄씩 구분한다. stylelint

display / flex / gap (display와 관련된 속성들 최상단)

(그 외에 기본적인 css property 설정)
width 
height
border
margin
padding

position / top / left / right (position 관련된 속성들)

transform / translate
z-index

backgroundcolor
color 

font/text

before, after (가상 요소 선택자)

Styled Component 네이밍

• 파일 분리
• S.Nav
• 네이밍에 기능 포함할지? 단순 요소이름(버튼)
  • Container-내부 컴포넌트가 2개 이상/ Wrapper-내부 컴포넌트가 1개
  • 취소 버튼같은 정도의 기능만 이름에 들어가도록 짓기(레스토랑..어쩌구 이런거 안됨)

<S.ButtonWrapper>
	<Button/>
</S.ButtonWrapper>

Styled-Component의 CSS Props

CSS Props를 넘길 때 $를 붙혀서 사용한다.

이유 : Error: "React does not recognize the <프롭스명> prop on a DOM element" 발생

 <S.Container $isSelected={isSelected} onClick={handleVoteClick} >

export const Container = styled.li<{ $isSelected: boolean }>`
  border: ${({ $isSelected }) =>
    $isSelected ? '2px solid #ff7877' : '1px solid rgba(0, 0, 0, 0.1)'};`

타입 - type vs interface

• object > interface
• 그 외는 type

// good

interface Teemo extends Champion {
  name: "티모" | "Teemo";
}

복수형의 경우 s를 사용하지 않는다

// bad

movies , cars

// good

movieList , carList

컴포넌트 Props 이름은 컴포넌트 이름을 붙인다.

ex. interface NavProps

코드 줄 수가 불필요하게 길어지면 props를 컴포넌트 내에서 구조 분해 할당 가능하다.

변수명, 함수명은 문서화하여 공유한다.

7월 20일 추가

타입을 선언할 때 컴포넌트의 Props를 제외한 나머지 접미사를 붙히지 않는다.

interface SelectProps // O

type CartType = {} // x
interface GetCartParams{} // x

컴포넌트에서 타입이나 상수를 사용할 때 파일을 만들어 분리하여 사용한다.

types.ts (타입 관련) , constants.ts (상수 관련)

파일 컨벤션

폴더 구조

public
src
	- components
		- 스토리북은 여기에
	- pages
		- 스토리북은 여기에
	- assets
			- images
			- fonts
	- constants

	- hooks
	- utils

	- routes
	- api

	- types
	- styles

	- atoms
	- selectors 

	- __test__
		- hooks
		- utils
		- 훅과 같은 테스트 넣기

파일명

컴포넌트/페이지 폴더 내 파일은 Button(index.tsx, Button.stories.tsx, style.ts)으로 구성

• components/Button/index.tsx
• pages/HomePage/index.tsx

이외 파일명은 무조건 소문자로 시작

이미지 파일

assets에 이미지 파일

가능하다면 svg로 로고/아이콘 형식 통일

CSS 컨벤션

• 주요 폰트 크기/색상은 :root로 설정하여 변수로 정의한다.
• 하나의 컴포넌트는 반응형을 대비해 3개-데스크탑(1440px), 탭(세로)(992px), 모바일(576px)-의 크기를 가진다.

module.exports = {
  theme: {
    screens: {
      'sm': '576px',
      // => @media (min-width: 576px) { ... }

      'md': '960px',
      // => @media (min-width: 960px) { ... }

      'lg': '1440px',
      // => @media (min-width: 1440px) { ... }
    },
  }
}

• 폰트는 rem
  • padding,margin 그 외 나머지 px