Skip to content

Code Convention

Jump to bottom
Pildrum edited this page Nov 27, 2023 · 4 revisions

함수 컴포넌트

  • 함수 컴포넌트는 일반 함수형을 사용한다.
function Component(){
  return <div></div>
}

export default Component;

세미콜론 / 따옴표

  • 코드 충돌을 방지하기 위해 세미콜론은 반드시 표기한다.
  • 따옴표는 큰 따옴표를 사용한다.
  • 위 내용들은 prettier 설정을 통해서 저장 시 자동으로 적용한다.

이벤트 함수

  • 이벤트 함수 및 기타 함수는 화살표 함수를 사용한다.
  • 이벤트 함수의 접두사는 on을 사용한다.
const onClick => () => {};

페이지 컴포넌트

  • 페이지 컴포넌트는 /app 안에 작성한다.
  • 페이지 이름으로 폴더를 작성하고 내부에 page.tsx를 만들어서 작업한다.

일반 컴포넌트

  • 컴포넌트 폴더는 /components에 작성한다.

Hooks / API

  • 컴포넌트 이외의 커스텀 hook이나 api는 /lib에서 작성한다.

상수

  • 상수는 const 구문을 사용한다.
const name = "";

변수

  • let 구문을 사용하며, var 구문은 사용하지 않는다.
let count = 0; //(O)
var count = 0; //(X)

정규식

  • 정규식을 선언할 때는 변수명 앞에 소문자 r을 사용한다.
const rValid = /\;

개발자가 직접 수정하면 안되는 변수

  • 개발자가 코드 작성 시 변수값을 수정하면 안되는 변수명은 대문자로 쓴다.
const API_KEY = "";

interface / type 선언

  • interface와 type을 선언할 때 이름은 컴포넌트의 이름을 쓰되, 이름 뒤에 확실히 어떤 용도인지 명시한다.
interface ComponentProps {}; //(O)
interface Component {}; //(X)
// or

type ComponentProps = {}; //(O)
type Component = {}; // (X)

interface / type 선언 위치

  • interface와 type은 import 구문과 함수 컴포넌트 사이에 작성한다.
import { useState } from 'react';

interface ComponentProps {};

function Component({}: ComponentProps) {
  return <button>버튼</button>
}

export default Component;

SCSS(module)

  • [컴포넌트 파일명].module.scss로 작성한다.
  • 해당 컴포넌트가 있는 디렉토리 안에 scss 파일을 작성한다.
  • BEM 방식은 따로 사용하지 않는다. (협의 필요)

기타

  • 위 내용 외에 협의하지 못한 convention은 협의 하에 추가한다.
Clone this wiki locally