FE 코드컨벤션

1. 네이밍

변수, 함수

변수명, 함수명은 camelCase로 한다.

const myObject = {};
const myFunction = () => {};

상수

상수명은 SNAKE_CASE로 한다.

const MY_OBJECT = {};

컴포넌트, 타입

컴포넌트명, 타입명은 PascalCase로 한다.

const MyComponent = () => { ... };
interface MyType { ... };

컴포넌트 props

컴포넌트 Props 타입명은 컴포넌트 이름 + Props로 한다.

interface MyComponentProps { ... }

Boolean

Boolean 타입 변수는 is, has, can과 같은 접두사를 붙인다.

const isChecked = false;
const hasImage = true;
const canClick = false;

이벤트 핸들러

이벤트 핸들러명은 handle--* prefix를 가진다.

const handleModalOpen = () => { ... }

props로 넘길 때는 on--* prefix를 사용한다.

<Modal onModalOpen={handleModalOpen} />

api

api 함수명은 각 api HTTP 메소드 명을 prefix로 사용한다.

const getUserName = () => { ... }
const postReview = () => { ... }
const deleteReview = () => { ... }

html 태그에 따른 스타일 컴포넌트 네이밍

모든 스타일 컴포넌트의 이름에는 기능을 암시하는 단어를 사용한다.

스타일 컴포넌트 네이밍	의미
Layout	최상위 레아웃을 설정할 때 사용한다.
Container	여러개의 요소를 묶을 때 사용한다.
Wrapper	하나의 요소를 묶을 때 사용한다.
Box	div태그를 사용할 때 권장한다.
List	ul, ol태그를 사용할 때 권장한다.
Item	li태그, 반복되는 요소를 사용할 때 권장한다.

타입 import

타입 import할 때는 type only import를 한다.

import type { myType } from @types/myTypes

컴포넌트 export

컴포넌트를 export할 때는 default export를 사용한다.

const MyComponent = () => { ... }
export default MyComponent;

함수, emotion 컴포넌트, 상수 export

함수, emotion 컴포넌트, 상수를 export할 때는 named export를 사용한다.

export const myFunction = () => { ... };
export const Container = styled.div; export const buttonStyle = css;
export const MY_CONSTANT = {};

5. 역할 분리

Hook

View Component에서는 받아온 상태(데이터)를 그대로 받아온 표현하는 역할만 수행한다. 나머지 역할은 hook에서 한다.

6. 주석

주석을 달 때는 JSDoc을 사용한다.

/** 버튼 클릭 여부 */
/**

@param {string} name - 사용자의 이름
@param {number} age - 사용자의 나이


@returns {Object} 사용자의 이름과 나이를 담은 객체를 반환
*/

7. 폴더구조

📦src
┣ 📂assets
┃ ┣ 📂svg
┃ ┣ 📂png
┣ 📂api
┣ 📂components
┃ ┣ 📂common
┃ ┃ ┣ 📂Button
┃ ┃ ┃ ┣ 📜Button.tsx
┃ ┃ ┃ ┗ 📜Button.style.ts
┃ ┣ 📂layout
┃ ┃ ┣ 📂Header
┃ ┃ ┃ ┣ 📜Header.tsx
┃ ┃ ┃ ┗ 📜Header.style.ts
┃ ┃ ┣ 📂Flex
┃ ┃ ┃ ┣ 📜Flex.tsx
┃ ┃ ┃ ┗ 📜Flex.style.ts
┃ ┣ 📂product
┃ ┃ ┣ 📂ProductItem
┃ ┃ ┃ ┣ 📜ProductItem.tsx
┃ ┃ ┃ ┃ 📜ProductItem.stories.tsx
┃ ┃ ┣ 📂ProductList
┃ ┃ ┃ ┣ 📜ProductList.tsx
┃ ┃ ┃ ┗ 📜ProductList.stories.tsx
┣ 📂constants
┣ 📂mocks
┃ ┣ 📂handlers
┃ ┣ 📂data
┃ ┣ 📜browser.ts
┣ 📂store
┃ ┣ 📂product
┣ 📂stories
┃ ┣ 📂common
┃ ┃ ┣ 📜Button.stories.ts
┃ ┣ 📂product
┃ ┃ ┣ 📜ProductItem.stories.ts
┃ ┃ ┣ 📜ProductList.stories.ts
┣ 📂hooks
┃ ┣ 📂common
┃ ┃ ┣ 📜useModal.ts
┃ ┣ 📜useProduct.ts
┣ 📂pages
┃ ┣ 📜ProductListPage.ts
┣ 📂styles
┣ 📂types
┣ 📂utils
┣ 📂router
┃ ┣ 📜index.tsx
┣ 📜App.tsx
┣ 📜index.tsx