[Next.js] 나만의 환경 구축 (라이브러리 설치, IDE 설정, 네이밍 컨벤션, 코드 스타일)

📝Next.js 라이브러리

• loadsh
  • 배열안이나 Hash로 구성된 값들을 합치거나 등에 복잡한 연산들을 함수 하나로 해결해줍니다. → JavaScript의 코드를 줄여주고, 빠른 작업에 도움
• prettier
  • 다양한 언어에서 코드의 형식을 자동으로 정리해주는 도구로 일관된 코드를 유지시켜줍니다.
• axios
  • HTTP 클라이언트 라이브러리입니다. API 요청시 사용됩니다.
• react query
  • 서버 상태 관리를 효율적으로 처리할 수 있는 라이브러리입니다. 주로 API 호출을 관리하고, 데이터 패칭, 캐싱, 동기화 등을 자동화합니다
• redux toolkit
  • 전역으로 상태를 관리해주는 역할을 합니다.
• shadcn-ui
  • Tailwind CSS를 기반으로 하는 UI 컴포넌트 라이브러리입니다.
• date-fns
  • 날짜 및 시간 처리를 쉽게 도와주는 라이브러리입니다.
• react-hook-form
  • 폼 데이터를 처리하고 유효성 검사를 쉽게 도와주는 라이브러리입니다.
• react-icons
  • 아이콘들을 제공합니다.
• tanstack-table
  • 테이블을 쉽게 만들 수 있게 해주는 라이브러리입니다.
• graphql-codegen (선택사항)
  • 서버가 graphql 기반으로 되어있을 때 자동적으로 React Query 기반으로 패치를 만들어줍니다.

 

📝Next.js 네이밍 컨벤션

• 폴더명
  • category-item
• 파일명
  • page-size-constant
• constant
  • PAGE_SIZE
• enum
  • Status or Statuses Suffix (CodeStatus) 
• boolean
  
  • is prefix (isDone)

 

📝tsx 작성 순서

/** ──── 상태관리 ──── **/
...
/** ──── Query & Mutation ──── **/
...
/** ──── 상태관리 함수 ──── **/
... 함수 설명 → /* 사용자 정보 지우는 함수 */
/** ──── UseEffect ────**/
...
/** ──── TSX ────**/
... tsx에서도 분리하고 싶은 경우 → {/* ──── 상품번호 ──── */} 이런식으로 주석처리


위를 기본으로 하고 추가할 사항이 있으면 추가한다 → 예) 유효성 검사

1. 상태관리 (useState or useSelector)
2. Query & Mutation 또는 Axios, Fetcher 사용
3. 상태관리 함수
4. UseEffect
5. TSX 작성

 

 

📝Next.js 프로젝트 구조

• app
  • (auth) → jwt 검증
• components
  • 각 페이지별 컴포넌트 (faq ...)
  • 공통 컴포넌트 (common 폴더)
• constant
  • constant 파일
  • constant suffix (page-size-constant)
• enum
  • enum 파일
• gql (선택 사항)
  • query.graphql
  • mutations.graphql
• hooks
  • use prefix 커스텀 훅 작성 (use-single-file)
• lib
  • 유틸함수 utils.ts
• redux
  • store.ts
  • reducer.ts
  • slice 폴더안에 페이지별 폴더 (slice → user-profile/user-profile-slice.ts)
• interface (고민중)

 

 

 

📝Next.js [IDE 설정]

https://mondaymonday2.tistory.com/988

[IDE] [WebStorm] 환경 설정 (Prettier, eslint, Auto Save Prettier)