Frontend Code Convention

[hyeiis]

모듈

• 컴포넌트의 경우 export default를 수행한다.
• 이외에는 선언과 동시에 export 한다.

const Component = () => {}

export default Component;

export const a = () => {}

type import/export

• Type-Only import를 사용한다.

import type { Rulu, Youth } from './types';

• export의 경우, 각 타입마다 export 를 사용한다.

export interface Rulu {
  a: string;
  b: number;
}

export type Youth = 'a' | 'b';

정적 파일 import

• svg 파일은 index.ts에서 ReactComponent로 한번에 내보낸다.

// index.ts
export { ReactComponent as KBCardLogo } from './kb.svg';

// import
import { KBCardLogo } from '../../assets/svg';

• .jpg, .png와 같은 일반이미지는 src 링크를 import해 사용한다.

import baemin from '../../../assets/image/baemin.png';

스타일 파일 import

import * as S from './Text.styled'

React/JSX style Guide

컴포넌트 선언

• 컴포넌트는 화살표 함수로 선언한다.

const Component = () => {
	return <div></div>}

export default Component;

컴포넌트 Props

• 컴포넌트 내부에서 구조 분해 할당을 한다.

const CalendarCalendarCalendar
= (props: CalendarProps) = {
	const {
		year,
		date,
		month,
		...rest
	} = props;
}

Component with Children / Component without Children

• Component with Children의 경우 PropsWithChildren을 사용하고, react에서 import한다.

import type { PropsWithChildren } from 'react';

const Button = (props: PropsWithChildren<ButtonProps>) => {
  const { children, size, type = 'submit', variant, ...rest } = props;
	/* ... */
};

• Component without Children의 경우 반환 타입을 별도로 명시하지 않는다.

const Calendar = () => { /* ... */ }

Event

• Event Handler에 타입을 명시하고, react에서 import하는 방식을 사용한다.

import type { ChangeEventHandler, FormEventHandler } from 'react';

const handleChange: ChangeEventHandler<HTMLInputElement> = (e) => { /* ... */ }

const handleSubmit: FormEventHandler<HTMLFormElement> = (e) => { /* ... */ }

Event Handler

• 컴포넌트의 prop으로 넘기는 이벤트 핸들러는 on 접두사를 붙인다.
• 이벤트를 직접 처리하는 함수는 handle + 명사 + 동사 형태로 작명한다.
• 같은 파일이면 handle 내려주는거면 on

// BAD
<Editortitle={title}handleChangeTitle={onChangeTitle}height="40vh"editorContentRef={editorContentRef}/>// GOOD
<Editortitle={title}onChangeTitle={handleChangeTitle}height="40vh"editorContentRef={editorContentRef}/>// handle + 명사 + 동사
const handleTitleChange = () => {}

Hooks

기본 훅

• 원시 타입의 경우 타입 추론을 활용한다.

const [count, setCount] = useState(0);

• 커스텀 타입의 경우 타입과 초기값을 명시하여야 한다

const [schedule, setSchedule] = useState<Schedule>({
  title: '',
  startDateTime: '2023-07-20T00:00',
  endDateTime: '2023-07-20T00:00',
});

Ref

// MutableRefObject의 경우 초기값을 지정하지 않는다.
const timerId = useRef<ReturnType<typeof setTimeout>>();

// RefObject의 경우 초기값을 null로 지정한다.
const ref = useRef<HTMLUListElement>(null);

---

네이밍 컨벤션

상수

• 상수는 SNAKE_CASE로 선언한다.

const CONSTANT_NUM = 1;

변수

• 변수는 camelCase로 선언한다.
• const를 지향하고, var는 절대 사용하지 않는다.
  • let은 값이 변하는 경우에만 사용한다.
• boolean 타입의 변수는 is 접두사를 붙인다.
• 범용적인 약어 여부 관계없이 camelCase를 사용한다.

const variableName = 2;

const isClicked = false;

const imageUrl = '';

함수

• 함수는 camelCase로 선언한다.
• boolean 타입을 리턴하는 함수는 is 접두사를 붙인다.
• API를 호출하는 함수는 아래의 명명규칙에 따라 접두사를 붙여야 한다.

// GET - "fetch-*"
const fetchSchedule = () => {}

// POST - "send-*"
const sendSchedule = () => {}

// PATCH - "modify-*"
const modifySchedule = () => {}

// DELETE - "delete-*"
const deleteSchedule = () => {}

CSS Props Naming

• css props로 보낼 스타일은 스타일 파일에 따로 정의 후 import 하여 사용한다.
• css prop의 이름은 소문자로 시작 해야하고 범용적인 이름은 금지한다.
• css prop은 스타일 파일의 가장 하단에 위치시킨다

const button = css``; //bad
const closeButton = css``; //good

<Button css={{display:flex}} /> //bad
<Button css={S.closeButton} /> //good

Props type Naming

• 컴포넌트의 Props는 interface로 선언하고 컴포넌트 명 + Props로 명명한다.

interface TeamCalendarProps {}

const TeamCalendar = () => {}

Type Naming

• 타입이름은 PascalCase로 선언한다.

type Team = '팀바팀'

interface Calendar = {}

CSS

크기 단위

• %, px만 사용한다.
• 크기가 0인 경우 단위를 붙이지 않는다.

// BAD
0px

// GOOD
0

속성 선언 순서

• 아래 자료를 참고해 속성을 작성하고, 그룹 별로 개행을 추가한다.

[CSS 속성 선언 순서 | UXKM](https://uxkm.io/publishing/css/03-cssMiddleclass/10-css_attr_rule#gsc.tab=0)

1. display - 표시(관련속성:visibility)
2. overflow - 넘침
3. flex - 흐름(관련속성:clear)
4. position - 위치(관련속성:top,right,bottom,left,z-index)

5. width & height - 크기
6. margin & padding(그룹) - 간격

7. border(그룹) - 테두리
8. background(그룹) - 배경

9. font(그룹) - 폰트(관련속성:colr,letter-spacing,text-align,text-decoration,text-indent,vertical-align,white-space 등)

10. animation - 동작(관련속성:animation,transform,transition,marquee 등)

11. 기타 - 위에 언급되지 않은 나머지 속성들로 폰트의 관련 속성 이후에 선언하며, 기타 속성 내의 선언 순서는 무관함.

- 1, 2, 3, 4
- 5, 6
- 7, 8
- 9
- 10
- 11

• font, border, margin, padding, background 등의 축약이 가능한 속성은 가능한 한 축약하는 것으로 한다.

[단축 속성 - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/ko/docs/Web/CSS/Shorthand_properties)

비동기 요청

• 일단은 fetch를 사용하고 후에 다시 이야기한다.

TypeScript

• any를 최대한 지양한다. 필요하다면 unknown을 사용한다.
• 객체일경우 interface 를 사용하며, 그렇지 않다면 type 을 사용한다.
• 타입 파일을 import할 때, type을 붙여야한다

import type { SomeThing } from "./some-module.js";

• 조건문 비교 연산 시 참고

if (id === undefined) {
	return;
}

if (!id) {
	return;
}

상수화

• 매직넘버는 최대한 상수화한다.
• 문자열도 최대한 상수화를 한다.
• 경로도 상수화를 한다.

const FORM_DESCRIPTION = {
	placeholder: '이름을 입력해 주세요.',
}

<input placeholder={FORM_DESCRIPTION.placeholder} />

Context API vs Recoil vs Redux

• 전역 상태 관리 라이브러리는 일단은 사용하지 않고 후에 다시 이야기한다.

디렉터리 구조

• 타입은 src/types 하위에 연관되는 것 끼리 묶어서 위치한다.
• 컴포넌트는 src/components 하위에 위치한다.

  • 공통 컴포넌트는 src/components/common 하위에 해당 컴포넌트로 된 폴더를 생성하여 위치한다.

  • 하나의 컴포넌트는 컴포넌트, 스타일, 스토리북 파일을 모두 가지고 있어야한다. ex) src/components/common/Text/

    Text.tsx
    Text.styled.ts
    Text.stories.tsx