Skip to content

Code Convention

Jump to bottom
Hyerin Sung edited this page Jul 24, 2026 · 6 revisions

Prettier

Tip

Prettier 설정. .prettierrc.json 파일 추가하면 신경쓰지 않아도 됨.

{
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80,
  "arrowParens": "always",
  "singleQuote": true,
  "htmlWhitespaceSensitivity": "css",
  "jsxSingleQuote": true,
  "endOfLine": "lf"
}

import

Tip

import 관련 규칙. 모든 코드 작성 시 유의할 것.

(1) 순서

  1. 모듈
  2. 함수
  3. 컴포넌트
  4. 이미지

(2) 이미지

  • .svg 벡터 이미지 사용을 지향한다.
  • .jpg, .png와 같은 일반 이미지는 src 링크를 import해 사용한다. 
    import baemin from '../../../assets/image/baemin.png';

변수

Tip

변수 관련 규칙. 모든 코드 작성 시 유의할 것.

(1) 선언

  • const 사용을 지향한다.
  • let 필요한 곳에만 사용한다.
  • var 사용을 금지한다.

(2) 작명

배열 변수

  • 접미사 List를 붙인다. 
    const helloList = ['hello' , 'world']

함수

Tip

함수 관련 규칙. 모든 코드 작성 시 유의할 것.

(1) 작명

  • camelCase를 사용한다.
  • boolean 타입 리턴: 접두사 is를 붙인다.

Event Handler

  • 컴포넌트의 prop: 접두사 on을 붙인다. 
    // GOOD
<Editor
  title={title}
  onChangeTitle={handleTitleChange}
  height="40vh"
  editorContentRef={editorContentRef}
/>
  • 이벤트를 직접 처리하는 함수: handle + 명사 + 동사 형태로 작명한다. 
    // handle + 명사 + 동사
const handleTitleChange = () => {}

(2) 인자 전달

  • 한 줄: 그대로 전달
  • 여러 줄: 다른 변수로 선언 후, 그 변수를 전달 
      // Good
  const ModalUI = (
    <Background>
      <Container>
        <Content>{children}</Content>
        <Buttons>
          <Cancel
            onClick={() => {
              setModalShow(false);
            }}
          >
            돌아가기
          </Cancel>
          <Action onClick={handleModalAction}>{actionText}</Action>
        </Buttons>
      </Container>
    </Background>
  );

  return createPortal(ModalUI, document.getElementById('modal'));

컴포넌트

Tip

React 컴포넌트 관련 규칙. React 컴포넌트 코드 작성 시에만 유의할 것.

(1) 선언

  • 화살표 함수 
    const Component = () => {
	return <div></div>
}

export default Component;

(2) 작명

  • PascalCase

페이지 컴포넌트

  • 접미사 Page를 붙인다.
  • 예시: LoginPage

(3) props 전달

  • 비구조화 할당 
    const Component = ({text, image}) => {};

(4) 주석

공통 컴포넌트

  • 필요한 경우에 컴포넌트 사용법을 주석으로 적는다.

Style

Tip

스타일링 관련 규칙. styled-components 코드 작성 시에만 유의할 것.

styled-components

(1) 선언

  • 스타일을 넣지 않을 태그는 styled-components로 선언하지 않는다.
  • 컴포넌트 선언 밑에 작성한다.

(2) 작명

  • S + PascalCase
    • S: styled-components 태그라는 뜻의 접두사
    • PascalCase
      1. = 본 태그명
      2. 약어 약속이 존재할 경우, = 본 태그명의 약어
      3. 중복이 존재할 경우, = 기능 + 태그명
  • 예시 
    // S + 본 태그명
const SHeader = styled.header``;
const SInput = styled.input``;

// 약어 약속이 존재할 경우
const SBtn = styled.button``;

// 중복이 존재할 경우: S + 기능 + 태그명
const SLogInBtn = styled.button``;
const SLogOutBtn = styled.button``;

(3) 레이아웃 태그

  • 정의: 요소의 위치를 조정하기 위한 레이아웃 기능만을 가진 태그
  • 본 태그는 div만 사용한다. (styled.div)
  • 태그 구조
    1. 최상위 태그 SLayout
    2. 2개 이상의 요소 포함 SContainer
    3. 단일 요소 SWrapper
  • 예시 
    <SLayout>
	<STextContainer>
		<STitleWrapper>
			<></>
		</STitleWrapper>
		<SSubtitleWrapper>
			<></>
		</SSubtitleWrapper>
	</STextContainer>
	<SImageContainer>
		<></>
		<></>
	</SImageContainer>
	<SCaptionWrapper>
		<></>
	</SCaptionWrapper>
</SLayout>

(4) 선언 순서

// Good
const SLayout = styled.div``;
const STextContainer = styled.div``;
const STitleWrapper = styled.div``;
const SSubtitleWrapper = styled.div``;
const SImageContainer = styled.div``;
const SCaptionWrapper = styled.div``;
// Bad
const SLayout = styled.div``;
const STextContainer = styled.div``;
const SImageContainer = styled.div``;
const SCaptionWrapper = styled.div``;
const STitleWrapper = styled.div``;
const SSubtitleWrapper = styled.div``;

(5) 참고

CSS

(1) 속성 순서

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(그룹) - 폰트(관련속성:color,letter-spacing,text-align,text-decoration,text-indent,vertical-align,white-space 등)

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

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

(2) 크기 단위

  • 단위는 기본적으로 rem을 사용
    • min-width, max-width는 예외적으로 px을 사용
    • 크기가 0인 경우 단위 X
  • svh 사용을 권장하되, vh와 함께 작성 
    // BAD
0px

// GOOD
0

(3) 영역

  • 영역을 나눌 때는 시맨틱 태그를 우선 활용한다.

(4) 기타

  1. 중복 코드 금지
    • 페이지 컴포넌트
      • 다음 속성은 GlobalStyle에 작성하였으므로 작성하지 않는다.
      • width
      • 중앙 정렬
    • 버튼
      • 다음 속성은 GlobalStyle에 작성하였으므로 작성하지 않는다.
      • font
  2. 불필요한 코드 금지
    • 페이지 컴포넌트
      • height 속성은 작성하지 않는다.
        • 이유: 페이지 콘텐츠가 812px보다 짧은 경우에도 높이가 지정되어 불필요한 스크롤바가 생김.
        • 예외: 로그인 페이지에서 height: 100vh; 지정함.

State Management

Tip

전역 상태 관리 관련 규칙. Zustand 코드 작성 시에만 유의할 것.

(1) 작명

기본

use + 이름 + Store 형식

파일명

  • 파일 이름에 use 붙이기
  • 파일이랑 변수명은 동일하게 
    import { create } from 'zustand';

const 파일명과 동일 = create((set) => ({
  name: '',
  setName: (name) => set({ name }),
}));

export default useUserStore;

액션 함수명

  • 동사 + 상태명 형식: 명확한 의도 표현
  • 예) set+Name

(2) 상태 분리 및 도메인별 Store 분리

규모가 커지면 하나의 store에 모든 상태를 몰아넣기보다, 도메인별로 여러 개의 store hook을 분리 관리

useUserStore.js (사용자 정보, 인증 상태)
useCartStore.js (장바구니 상태)
useUIStore.js (모달 열림/닫힘 등 UI 상태)

Data Fetch

Tip

API 요청 관련 규칙. Axios 코드 작성 시에만 유의할 것.

API 호출 함수

(1) 작명

HTTP Method 형식 예시
GET(조회) getXxx getQuestionDetail()
POST(추가) postXxx postQuestion()
PUT(전체 수정) putXxx putQuestion()
PATCH(일부 수정) patchXxx patchQuestion()
DELETE(삭제) deleteXxx deleteQuestion()

✔ Conventions

Clone this wiki locally