폴더 구조

<aside> 📁 아래와 같이 폴더를 구성합니다.

</aside>

• components

  • 컴포넌트 : 해당하는 컴포넌트 이름으로 폴더를 구성합니다.
    • 컴포넌트.tsx : 컴포넌트 전반적인 구조 및 로직을 정의합니다.
    • 컴포넌트.styles.ts : 컴포넌트의 스타일을 정의합니다.
    • index.ts : 컴포넌트 export 할 때 사용합니다.
    • types.ts : 컴포넌트에서 사용하는 타입을 정의합니다.
  • index.ts : 모든 컴포넌트를 export 합니다.

• pages

  next 페이지 라우팅 구조를 살펴보세요

  • users
    • [id].tsx
  • login
    • index.tsx

• api

  • API에 관한 파일들을 모아두는 폴더입니다.

• hooks

  • 공통으로 사용할 수 있는 훅을 정의해두는 폴더입니다.

• recoil

  • 리코일 관련 파일을 모아두는 폴더입니다.
  • users : 해당하는 리코일 폴더 명을 적어줍니다.
    • atoms
    • selector

• constants

  • 상수를 정의합니다.

• utils

  • 유틸 함수들을 정의합니다.

• types

  • api interface와 같은 공통으로 사용할 수 있는 타입을 정의합니다.