프로젝트 생성

npx create-next-app@latest

2024.11 기준 react와 react-dom이 19.0.0-rc-66855b96-20241106 버전으로 설치되는데, 이게 다른 패키지들이 호환되지 않아 설치가 안 될 수 있다. 만약 그렇다면 안정적인 18버전으로 재설치하자.

git 세팅 및 연동

git init
git remote add origin (깃허브 레포)

패키지 설치

만약 react 버전이 호환되지 않으면 react를 안정버전으로 교체해보자. (npm install react@18 react-dom@18)

npm i -D prettier tailwindcss prettier-plugin-tailwindcss

// axios 설치
npm i axios

// 상태 관리 
npm i jotai

// 리액트 쿼리 
npm i @tanstack/react-query @tanstack/react-query-devtools

// 날짜 포맷용 라이브러리
npm i date-fns

// 테스트 툴 (playwright cypress 중 택 1)
npm i -D cypress start-server-and-test

주요 설정 파일

.prettierrc

{
  "singleQuote": true,
  "jsxSingleQuote": true,
  "semi": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 120,
  "parser": "typescript",
  "arrowParens": "avoid",
  "plugins": ["prettier-plugin-tailwindcss"]
}

package.json

{
  "name": "jigeum-bit",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "test": "cypress open",
    "test:e2e": "start-server-and-test 'npm run dev' http://localhost:3000 'cypress run'"

  },
  "dependencies": {
    "@tanstack/react-query": "^5.61.0",
    "@tanstack/react-query-devtools": "^5.61.0",
    "axios": "^1.7.7",
    "date-fns": "^4.1.0",
    "jotai": "^2.10.3",
    "next": "15.0.3",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "cypress": "^13.16.0",
    "postcss": "^8",
    "prettier": "^3.3.3",
    "prettier-plugin-tailwindcss": "^0.6.9",
    "start-server-and-test": "^2.0.8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}