Skip to content

Frontend 코드 및 스타일 컨벤션

Jump to bottom
KIM DAEUN edited this page Dec 2, 2024 · 1 revision

1. 코드 스타일 및 포맷팅

1.1 코드 스타일

1.2 코드 포맷팅 : Prettier, ESLint 활용

  • Prettier 설정

    {
  "arrowParens": "always",
  "bracketSpacing": true,
  "semi": true,
  "singleQuote": true,
  "jsxSingleQuote": false,
  "trailingComma": "all",
  "singleAttributePerLine": true,
  "tabWidth": 2,
  "useTabs": false,
  "printWidth": 120,
  "endOfLine": "auto",
}

  • ESLint 설정

2. 파일 및 폴더 구조

2.1 소스 파일의 폴더 구조

src/
  types/
    ...     # 2군데 이상에서 사용되는 인터페이스, 타입
    ...     # api 관련한 타입
	
  components/
    [page]/    # 특정 페이지를 구성하는 컴포넌트 모음
      KanbanBoard/
        index.tsx
			  
  common/    # 공용 컴포넌트 모음
    DropDown/...
      Button/
        index.tsx
        style.ts
        Button.test.ts
	  
  pages/       # 레이아웃을 구성하는 페이지 컴포넌트
    [page].tsx # 페이지명으로 네이밍
		
  assets/      # 각종 정적 파일들
  images/      # 이미지 파일들	
  mocks/       # MSW 관련 파일들

  contexts/    # Context API 관련 파일들(필요시)
    [component]/
	context.ts
	useContext.ts
	provider.tsx
			
  hooks/       # React Hooks 파일들
  utils/       # 유틸리티 함수들
  • ./src 내부의 하위 폴더들은 모두 복수형의 이름을 갖습니다.

2.2 개별 컴포넌트 파일 및 폴더 구조

src/
  components/
    Button/
      index.tsx          # 컴포넌트 파일
	    style.ts           # 스타일링 파일
	    Button.test.ts     # 테스트 파일
	    Button.story.tsx   # 스토리북 파일
  • 각각의 컴포넌트는 컴포넌트명을 이름으로 갖는 하나의 폴더를 가집니다.
  • 폴더 내부에는 해당 컴포넌트 관련 모든 파일이 코로케이션(co-location) 되어있도록 합니다.

3. 컴포넌트 작성

// 컴포넌트는 선언식으로 정의
export default function Component() {
  // 컴포넌트 안의 함수는 표현식 사용
  const someFunc = () => {}
  return {}
}
  • 각각의 컴포넌트는 선언식(function)으로 작성하고, export default를 선언부에 함께 포함합니다.
    • 이렇게 하면, 하나의 파일 안에 컴포넌트 또는 함수의 선언 순서를 신경쓰지 않아도 됩니다.
    • 하나의 파일 안에서 컴포넌트 본체로서 export 되는 핵심 선언부가 무엇인지를 스크롤 없이 한 번에 파악할 수 있습니다.
  • 컴포넌트 안에서 정의되는 함수/메서드는 화살표 표현식을 사용합니다.

4. 스타일링

4.1 스타일링 코드 작성

import { styled } from '../styled-system/jsx';
 
const Button = styled.button`
  background-color: #fff;
  border: 1px solid #000;
  color: #000;
  padding: 0.5rem 1rem;
`;

const S = {
	Button,
};

export default S;
  • Tagged Template Literal 방식의 스타일 작성을 기본으로 합니다.
  • 해당 스타일을 불러들일 컴포넌트에서 S 네임스페이스로 접근 가능하도록, 코드 최하단에 S 객체로 스타일 요소들을 담아 export 하도록 합니다.

4.2 스타일링 된 요소 사용

import S from './styles.tsx'

export default function Component() {
  return (
    <S.Board />
  )
}

5. 테스트 도구

  • RTL + Jest : React Hook 코드에 대한 단위 테스트
  • MSW
    • 서버 상태에 의존하는 컴포넌트/Hook에 대한 테스트
    • 백엔드 개발 환경과 독립적인 개발 환경을 구축함으로써 빠른 피드백을 받을 수 있게 한다.
  • Storybook
    • 시각 요소에 대한 스타일링 구현 및 동작 테스트
    • 컴포넌트가 구현하는 UI 요소를 시각적으로 검토 가능하도록 하여 프론트-백엔드 간의 협업을 용이하게 함

6. 주석

6.1 한 줄 주석

  • 꼭, 반드시 필요한 경우에만 작성합니다.

  • 작성할 때엔 해당 내용이 가리키는 코드 바로 위에 작성합니다.

    import type BoardDataType from '../types';

interface ComponentProps {
	// data라는 이름을 바꾸고 싶어요...
	data: BoardDataType;
}

export default function Component({ data }: ComponentProps) {
	return (
		<Board data={data} />
	)
}

6.2 여러 줄 주석

  • 특정 함수나 코드에 대한 이해를 돕기 위해 부가설명이 꼭 필요한 경우 작성합니다.

    /**
 * 지원자의 정보(applicant)를 받아와서
 * 연령대가 20세 미만인지 검증하기 위한 코드입니다.
 */
function validateApplicantAge(applicant) {
	...
}

7. 커밋 컨벤션

7.1 커밋 메시지 기본 양식

  • <type>(<scope>): <subject><body>
    • <type> : 커밋 유형을 명시합니다.
    • <scope> : 해당 커밋이 적용되는 코드/컴포넌트 작업 범위를 명시합니다.
      • style : 스타일 코드
      • hook : custom hook 및 api 코드
      • component : 컴포넌트 코드
    • <subject> : 변경된 사항을 명시합니다. 명사형 어미를 사용하여 간단하게 기술합니다.
    • <body>(선택) : 해당 커밋에 대한 상세한 설명이 필요할 경우 작성합니다.

7.2 커밋의 주요 타입 정의

  • feat: 새로운 기능
  • fix: 버그 수정
  • docs: 문서화
  • style: formatting, linting 등
  • refactor: 기존 코드 수정 + 스타일 변경
  • test: 누락된 test 추가
  • chore: 사소한 것, build 및 패키지 매니저 등 수정
  • revert: 이전 commit 되돌리기
Clone this wiki locally