Frontend Code Convention

📖 목차

• Type
  • 선언위치
  • 상수관리
  • type vs interface
  • component props
  • proptypes
• CSS
  • color
  • 크기단위
  • Css 순서
  • media 관리
• Naming
  • 활성화 상태에 관한 네이밍
  • Box, Wrapper, container
• React
  • ts, tsx 파일확장자 관리
  • React. vs 그냥 import
  • react event vs react event handler

📙 Type

선언위치

• 공용으로 사용되는 타입의 경우, types 폴더 하위에 선언한다.
  그 외 타입은 파일 상단에 선언한다.
  분리의 필요성이 있을 때(ex. 타입이 너무 많은 경우 ) [filename].types.ts 파일로 가장 가까운 경로에 선언한다.

상수관리

• 상수는 const assertion을 사용한다

const object = {...} as const;

type vs interface

• interface가 아닌 type alias만을 사용한다.
• 타입스크립트 버전업에 따라서 기존에 있었던 type alias 문제점이 개선되었기에 type alias로 interface 역할까지 가능하다.
• 선언 병합에서 차이가 존재하기에, 선언 병합이 필요한 상황에는 interface를 사용한다.
• type alias가 interface에 비해 상대적으로 지원하는 타입의 형식이 많다.

component props

• 컴포넌트 props의 타입선언

type ComponentProps = {
...
};

const Component = ({ a, b }: ComponentProps) => {
...
};

• 일반함수에 대한 타입선언 암묵적 추론이 가능한 경우는 return 타입을 명시하지 않아도 된다.

const sum = (a: number, b: number) => { ... }

proptypes

• proptype는 사용하지 않는다. 이미 js로 작성된 파일에 관해서는 ts 마이그레이션 과정 중 점진적으로 제거하도록 한다.
  타입스크립트를 이용하여 대부분의 타입 에러를 컴파일 시 확인할 수 있다.
  proptypes와 타입스크립트는 유사한 역할을 수행하고 있고, 동시에 사용 시 유지 보수가 힘들어진다.

📘 CSS

Color

• —[color name]-[color layer] 형식을 사용한다. color layer는 색상의 차이를 구분하기 위해 표시되며, 001부터 1씩 올라가는 단계별 지정이다.

--gray-001 : #ddd;

크기단위

• 1rem은 16px로 사용한다.
  아래는 각 css 속성에서 어떤 크기단위를 사용할지를 명시한 내용입니다.
• px
  • border-radius
  • box shadow
• rem
  • width
  • height
  • margin
  • padding
  • gap
  • grid-gap
  • font-size

명시되지 않은 속성에 대해서는 px, rem을 모두 사용할 수 있습니다.

미디어쿼리

--pc-main-width: 800px;
--pc-main-width-narrow: 512px;

를 사용합니다.
모바일의 경우 --pc-main-width-narrow를 기준으로 반응형으로 작성합니다.

z-index

    !업데이트 필요
    현재상태
    ```
        --tooltip-z-index: 1000;
        --tooltip-dimmed-z-index: 999;
        --header-z-index: 998;
        --nav-z-index: 997;
    ``` 

Css 선언

• 유사한 속성들을 가까이 작성합니다.
• 필요하다면 개행을 통해 구분해주도록 합니다.

.test{
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid var(--gray-003);
  border-radius: 0.25rem;
  box-shadow: 1px;
  text-align: center;
  font-size: 2rem;

  cursor: pointer;
  ...  
}

📗 Naming

활성화 상태에 대한 네이밍

• active : 유저의 동작이 개입되지 않을 때
• selected : 유저의 동작(선택)이 개입될 때

Box, Wrapper, Container

• Box를 사용합니다.
  기존에 wrapper와 container로 작성 된 경우 해당 파일 작업시 Box로 변경 후 제거하도록 합니다.

API

• get의 경우 fetch[도메인]
• post의 경우 post[도메인]
• patch의 경우 patch[도메인]

을 화살표함수를 이용해 선언합니다.

const fetchAssignment = () => {...}
const postAssignment = () => {...}
const patchAssignment = () => {...}

📕 React

ts, tsx 파일확장자 관리

• jsx가 포함된 경우 tsx, 포함되지 않은 경우 ts로 작성합니다.
  파일확장자만 읽더라도 jsx가 포함됐는지를 파악할 수 있습니다.
  vscode typechecker가 <>를 만났을 시 tsx와 generic간에 구별을 잘 하도록 도와줍니다.

React.[type] vs import {type} from 'react'

• React.[type] 형식을 사용합니다.
  사용하는 type이 많은 경우 관리에 용이합니다.
  React에서 제공하는 타입이라는 것을 명시해줍니다.

react event vs react event handler

• reactEventHandler를 사용합니다.

onClickTabItem: React.MouseEventHandler<HTMLDivElement>;

　
　
　

본 문서는 지원사이트 개발 중 일관성있고 관리하기 쉬운 코드를 작성하기 위한 웹 프론트 개발 가이드입니다.