프론트엔드‐개발 문서

🖥️ 기술 소개 및 도입 이유

React

브라우저 인터렉션 시 사용자 경험 향상을 위해 SPA 관련 라이브러리를 사용하기로 했습니다.
팀원들이 가장 익숙한 SPA 라이브러리인 React를 선택하였습니다.

Typescript

개발 환경에서 타입의 안정성 및 인텔리센스 제공을 위해 정적 타입 언어인 Typescript를 사용합니다.

Storybook

컴포넌트 단위 테스트를 위해 사용합니다.
만들어진 컴포넌트 시각화를 위해 사용합니다.

Jest

도메인 로직 단위 테스트를 위해 사용합니다.
RTL의 도메인 테스트 도구로 Jest를 사용합니다.

MSW

백엔드 개발 속도 및 배포 여부의 의존성을 줄여주기 위해 사용합니다.
테스트 코드 실행 시 Mock Data를 이용하여 테스트를 진행할 수 있는 환경을 제공합니다.
브라우저 환경 실행 시 Mock Data를 이용하여 UI를 개발할 수 있는 환경을 제공합니다.

React Query

캐싱을 통해 애플리케이션의 속도를 향상해 주며 사용자의 경험을 향상할 수 있습니다.
동일한 데이터에 대한 중복 요청을 제거하여 최적화할 수 있습니다.

styled-component

스타일의 이름이 그 역할을 명확하게 보여준다는 점에서 컴포넌트 형식이 좋아서 css-in-js를 채택하였습니다.
emotion 라이브러리와 사용의 차이를 느끼지 못했기에 조금 더 익숙한 styled-component 사용합니다.

📦 폴더 구조

└── /public
└── /src
    ├── /@types
    ├── /apis
    ├── /assets
    ├── /components
    |   ├── /common
    |   ├── /shared
    |   └── /[페이지명]
    ├── /constants
    ├── /hooks
    ├── /pages
    ├── /utils
    └── App.js

@types

단일 파일에서만 필요한 타입은 해당 파일에 타입을 선언합니다.

공통되는 타입은 @types 파일에 선언합니다.
/api

API 호출 관련 함수와 서비스 로직을 관리합니다.
/assets

이미지 등 정적 자원을 보관합니다.
/pages

~~Page로 명명 ex) CartPage, OrderPage
/components

재사용 가능한 UI 컴포넌트를 관리합니다.

test, storybook 파일은 구현된 파일이랑 같이 둡니다.

파일을 세부적으로 나눕니다.
- common: 모든 페이지에서 공통으로 사용되는 컴포넌트 ex) Button, Input
- shared: 특정 페이지에서 공유되는 컴포넌트 ex) ProductItem
- [페이지명]: 특정 페이지에서만 사용하는 컴포넌트들
```
    └── /src
        ├── /components
            ├── /common
            │   └── /button
            │       ├── Button.stories.tsx
            │       ├── Button.styled.ts
            │       ├── Button.test.tsx
            │       └── Button.tsx
            ├── /shared
            └── /[페이지명]
```
/constants

API URL, 상태 값 등 상수들을 정의하고 모아둡니다.
/hooks

커스텀 훅을 작성합니다.
/pages

각 라우트에 대응하는 페이지 컴포넌트를 관리합니다.
/utils

프로젝트 전반에 사용되는 유틸리티 함수들을 작성합니다.

🖊️ 네이밍 컨벤션

폴더 및 파일명 명명 규칙

폴더명
- 폴더명은 camelCase로 작성합니다.
파일명
- 파일명은 camelCase로 작성합니다.
- 이미지 파일명은 PascalCase로 작성합니다.
- API 파일명은 ~~.api.ts로 작성합니다.
- 스타일 파일명은 ~~.style.ts로 작성합니다.

함수 및 핸들러 명명 규칙

함수
- 함수명은 camelCase로 작성합니다.
- 화살표 함수 형식으로 작성합니다.
```
const fn = () => { }
```
핸들러
- 핸들러는 onVerb와 같이 동작에 대한 이름으로 작성합니다.
```
const onShowAlert = () => { }
```

상수 및 변수 명명 규칙

전역 상수
- 전역 상수는 UPPER_SNAKE_CASE로 작성합니다.
변수는 camelCase로 작성합니다.

타입 및 인터페이스 명명 규칙

타입/인터페이스/enum
- 타입, 인터페이스, enum은 PascalCase로 작성합니다.

클래스 및 불리언 명명 규칙

className
- className은 kebab-case로 작성합니다.
boolean
- 불리언 변수는 isVerb 혹은 hasNoun 형태로 작성합니다.
```
const isDeleted = true;
const hasNextPage = false;
```

API 명명 규칙

api
- API 함수는 HTTP 메서드를 prefix로 하여 작성합니다.

🎨 스타일 컴포넌트 네이밍 컨벤션

스타일 컴포넌트 네이밍	의미
Layout	페이지 단위 최상위 레이아웃 단위
Container	여러 개의 요소를 감싸는 컴포넌트 단위
Wrapper	1개의 요소를 감싸는 컴포넌트 단위
Box	div 태그 컴포넌트
List	ul 태그 컴포넌트
Item	li 태그 컴포넌트
이 외의 것들	~~태그명