Skip to content

Frontend Code Convention

Jump to bottom
Kimsanglok edited this page Nov 9, 2022 · 13 revisions

📖 목차

  • 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>;

　
　
　

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

Clone this wiki locally