[프론트엔드: REACT] yarn Next.js 설치

1️⃣ Yarn 설치

터미널 or cmd 창에서 yarn install 설치

npm install -g yarn

 

 

 

 

2️⃣ Next.js 프로젝트 생성

yarn create next-app <프로젝트 명>

 

yarn create next-app을 사용하면 react와 react-dom, next가 자동으로 설치

 

✅ dependencies (프로젝트 실행에 필요한 패키지들)

• React: react, react-dom
• Next.js: next
• Axios: HTTP 요청을 처리하기 위한 패키지
• Day.js: 날짜 및 시간 처리를 위한 라이브러리
• Framer Motion: 애니메이션 효과를 추가하는 라이브러리
• Swiper: 슬라이더 및 갤러리 UI 컴포넌트
• Jotai: 상태 관리 라이브러리

✅  devDependencies (개발 중에만 필요한 패키지들)

• TypeScript: typescript
• ESLint: 코드 품질 검사를 위한 도구
• TailwindCSS: 유틸리티-퍼스트 CSS 프레임워크
• PostCSS, Autoprefixer: CSS 자동 처리 도구들
• @typescript-eslint/eslint-plugin: TypeScript와 ESLint 통합을 위한 플러그인

 

 

 

 

3️⃣ 의존성 설치

생성한 프로젝트 폴더로 이동 -> yarn install 

cd <프로젝트 명>
yarn install

 

 

 

 

4️⃣ 프로젝트 실행

기본 React 앱을 실행

yarn dev

 

그러면 http://localhost:3000에서 기본 React 앱을 볼 수 있습니다.

 

그 후 필요에 따라 추가적인 패키지들(예: TailwindCSS, Axios, TypeScript 등)을 설치

 

 

 

 

프로젝트 생성 시 기본 폴더 구조

my-next-app/               
├── node_modules/            # 프로젝트 의존성 패키지들이 설치되는 폴더
├── public/                  # 정적 파일들이 위치하는 폴더 (이미지, 폰트 등)
│   └── favicon.ico          # 기본 아이콘
├── src/                     # (선택 사항) 소스 코드 폴더 (기본적으로 없을 수 있음)
│   └── pages/               # Next.js 페이지 컴포넌트가 위치하는 폴더
│       └── index.js         # 기본 Next.js 페이지 컴포넌트
├── .gitignore               # Git에 포함되지 않을 파일/폴더 설정
├── package.json             # 프로젝트의 의존성 및 설정 파일
├── next.config.js           # Next.js 설정 파일 (필요한 경우 생성)
├── yarn.lock                # 의존성 버전 고정 (Yarn 사용 시)
└── README.md                # 프로젝트 정보가 담긴 파일

 

 

 

 

 

package.json

{
  "name": "my-next-app",                // 프로젝트 이름
  "version": "0.1.0",                   // 프로젝트 버전
  "private": true,                      // 프로젝트를 공개하지 않도록 설정
  "dependencies": {
    "next": "13.2.0",                   // Next.js 프레임워크
    "react": "18.2.0",                  // React 라이브러리
    "react-dom": "18.2.0"               // ReactDOM 라이브러리
  },
  "devDependencies": {},
  "scripts": {
    "dev": "next dev",                  // 개발 서버 실행
    "build": "next build",              // 프로덕션 빌드 생성
    "start": "next start",              // 프로덕션 서버 실행
    "lint": "next lint"                 // ESLint 실행
  },
  "eslintConfig": {
    "extends": [
      "next/core-web-vitals"            // Next.js의 웹 빌드 및 성능 관련 설정
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}