1. 필요 라이브러리 설치 및 config 파일 생성

• react-router-dom
• tailwind
• zustand
• axios

1. 폴더 구조 설명

   

   1. apis
      • 백엔드 API 통신을 위한 파일 관리
   2. common
      • /ui : 공통으로 사용되는 UI 컴포넌트 관리
   3. routes
      • 라우팅 관련 파일 관리
   4. utils
      • /auth : 로그인/로그아웃 등과 관련된 인증 요소 관련 로직/함수 처리
   5. view
      • 각 기능별 페이지
      • 각 폴더 내에 페이지에 해당하는 [page].tsx 파일과 componets 폴더가 있으며, components 폴더 내에는 해당 페이지에서 사용하는 컴포넌트를 보관
   6. zustand
      • zustand 관련 store를 보관.

2. ESLint, Prettier 관련 설정

   AirBnb Lint 설정

   https://sangjuntech.tistory.com/25

   • package.json 에 lint 사용 명시

     "lint": "eslint './src/**/*.{ts,tsx,js,jsx}'",
     "lint:fix": "eslint --fix './src/**/*.{ts,tsx,js,jsx}'",
     

     npm install -D eslint-config-airbnb
     npm info "eslint-config-airbnb@latest" peerDependencies //설치 내역 확인
     npm install -D eslint-config-airbnb-typescript
     

   • 터미널에서 npm run lint 실행해서, lint 에러 확인하기

Prettier 설정

npm i -D prettier
// .prettierrc.js 파일 생성

module.exports = {
    // 화살표 함수 식 매개변수 () 생략 여부 (ex: (a) => a)
    arrowParens: "always",
    // 닫는 괄호(>) 위치 설정
    // ex: <div
    //       id="unique-id"
    //       class="contaienr"
    //     >
    htmlWhitespaceSensitivity: "css",
    bracketSameLine: false,
    // 객체 표기 괄호 사이 공백 추가 여부 (ex: { foo: bar })
    bracketSpacing: true,
    // 행폭 설정 (줄 길이가 설정 값보다 길어지면 자동 개행)
    printWidth: 80,
    // 산문 래핑 설정
    proseWrap: "preserve",
    // 객체 속성 key 값에 인용 부호 사용 여부 (ex: { 'key': 'xkieo-xxxx' })
    quoteProps: "as-needed",
    // 세미콜론(;) 사용 여부
    semi: true,
    // 싱글 인용 부호(') 사용 여부
    singleQuote: true,
    // 탭 너비 설정
    tabWidth: 2,
    // 객체 마지막 속성 선언 뒷 부분에 콤마 추가 여부
    trailingComma: "es5",
    // 탭 사용 여부
    useTabs: false,
};