📌

코드 컨벤션

Status

컨벤션

Assign

코딩 컨벤션

ASI를 이용하지 않고 세미콜론을 필수적으로 써준다. (prettier로 관리).

var를 쓰지 않고, const와 let을 사용한다.

단, const를 주로 쓰되 변수의 값 변경이 필요할 경우 let을 쓴다.)

함수는 const 형태로 선언적으로 사용한다.

const function = () ⇒ {}

image, svg는 kebab-case 사용하여 네이밍한다.(ex. erase-check.svg).

변수명은 camelCase 로 작성한다. (issueLabel).

.tsx 파일의 파일(폴더)명은 PascalCase를 사용한다. ex) LoginPage.tsx.

webpack alias를 이용해서 파일 절대 경로로 import, export 사용한다. src: @

단, 같은 폴더 내에 존재한다면 상대경로 를 사용한다

components, container, pages를 export할때는 하나의 파일에 모아서 export한다.

notion image

만약 주석이 필요한 경우신경써서 사용하자.

// TODO: 해야 할 일 혹은 한 일을 날짜와 함께 적어준다(2021.03.28)

style은 module.scss를 사용한다. hash를 이용하여 관리한다.

SCSS 사이즈의 단위는 rem `으로 통일한다.

변수명이 길어도 좋으니 한눈에 봐도 알아볼 수 있는 최대한 명시적인 변수명을 정해준다.

z-index는 5단위로 사용해준다.

className에 값을 할당해줄때는 무조건 classNames함수를 사용해준다.

스타일을 조건에 따라, 적용 시킬 수 있다.

Fragment는 <>/</>가 아닌 <Fragment></Fragment>로 사용해준다.

함수 컴포넌트의 return값은 무조건 추론이 가능하니 생략해준다.


// Bad case
const ExerciseChoice = ({}: Props): ReactElement => {
  return <div />;
}

// Good case
const ExerciseChoice = ({}: Props) => {
  return <div />;
}

이벤트 핸들러를 정의할때 handle + 메서드명로 정의한다.




const handleChangeModalOpen = ({ handleClick }: Props) => {
  return <button onClick={handleClick} />
}

const Calendar = ({}: Props) => {
  const handleClickDateType = () => {};
  const handleModalOpen = () => {};

  return (
    <>
      <DateTypeToggleButton/>
      <ModalButton handleClick={handleChangeModalButton} />
    </>
  );
};

조건문의 경우 반드시 중괄호를 작성한다.


if (true) {
	return true;
}

if (true) return true