Skip to content

FE

Jump to bottom
snoopso edited this page May 13, 2023 · 12 revisions

라이브러리

  • jest: 테스트 코드 작성을 위해 사용
  • react: SPA 구현 및 효율적인 State 관리를 위해 사용
  • eslint, prettier: 협업을 위해 일관성 있는 코드 스타일을 유지하고 코드의 품질을 향상시키기 위해 사용
  • react-app-rewired: React.js의 webpack 설정을 변경해 절대경로를 지정해주기 위해서 사용
  • css-module: 클래스 이름의 충돌을 방지하고, 모듈로 css를 관리하여 중복 코드를 방지하기 위해 사용
  • msw: 백엔드 API 통신 전 Mock API를 제작해 사용하기 위해 사용

데이터 테이블 설계

Issue

{
title: string,
comment: Comment[],
writer: Member,
assignee: Member | null,
label: Label | null,
milestone: MileStone | null,
status: 'open' | 'close',
editedTime: Date,
index: number,
}

Member

{
id: string,
profile: string,
name: string,
}

Label

{
title: string,
description: string,
backgroundColor: string,
textColor: string
}

Milestone

{
id: string,
title: string,
endDate: Date,
contents: string,
totalIssueNum: number,
closedIssueNum: number,
isClosed: boolean
}

Comment

{
writer: User,
contents: string,
editedTime: Date,
}

폴더 구조

frontend/
├── public/
├── src/
│   ├── assets/
│   │   └── ...
│   ├── components/
│   │   ├── Heade/
│   │   │   ├── Header.jsx
│   │   │   └── Header.module.css
│   │   └── ...
│   ├── containers/
│   │   ├── MainPage/
│   │   │   ├── MainPage.jsx
│   │   │   └── MainPage.module.css
│   │   └── ...
│   ├── services/
│   │   ├── issue/
│   │   │   ├── issue.js
│   ├── utils/
│   │   ├── helpers.js
│   │   └── ...
│   ├── assets/
│   │   ├── images/
│   │   └── icons/
│   ├── App.js
│   ├── App.module.css
│   ├── index.js
│   └── index.module.css
├── .gitignore
├── package.json
└── README.md
  1. components: 재사용 가능한 컴포넌트를 저장
  2. containers: 각 페이지 또는 뷰에 해당하는 컨테이너 컴포넌트를 저장
  3. services: API 호출, 인증, 데이터 처리 등의 서비스 로직을 포함하는 파일을 저장
  4. utils: 프로젝트 전반에 걸쳐 사용되는 유틸리티 함수와 도구를 저장
  5. assets: 이미지, 아이콘, 폰트 등의 정적 리소스를 저장

코드 컨벤션

  1. 표현식 함수 및 람다 표기법을 사용합니다. 그리고 props는 구조 분해할당을 사용합니다.
const Button = ({name, _onClick}) => {
...
}
  1. 스타일 제어는 css-modules, classnames 라이브러리를 활용합니다. 클래스를 부여할 때 클래스를 여러 개 적용해야 할 경우 다음과 같이 변수로 지정하여 넣도록 합니다.
...
import styles from './Button.module.css';
import classNames from 'classnames/bind';

export const Button = () => {
const cx = classNames.bind(styles);
const buttonClassNames = `${cx('color-primary')} ${cx('color-primary')}`;
return <button className={buttonClassNames}><button>
}
...
.color-blue {
background-color: var(--color-light-accent-background);
}
Clone this wiki locally