웹프로젝트 » 02.가계부

h1. 프로젝트 생성

h3. 1. Node.js 설치

URL : https://nodejs.org/ko

!clipboard-202503161621-hrna5.png!

h3. 2. Next.js 프로젝트 생성

[명령어]

<pre>

-- 기본생성

npx create-next-app@latest 프로젝트명

-- 타입스크립트 사용 생성

npx create-next-app@latest --typescript 프로젝트명

</pre>

[프로젝트 생성 기본 설정]

!clipboard-202503161639-lxyfd.png!

# TypeScript 사용 여부 체크(Default 값 : Yes)

# ESLint 사용 여부 체크(Default 값 : Yes)

# Tailwind CSS 사용 여부 체크(Default 값 : Yes)

# src/ directory 생성 여부 체크(Default 값 : No) -- App Router를 사용하므로 src는 미사용

# App Router 사용 여부 체크(Default 값 : Yes)

# Turbopack 사용 여부 체크(Default 값 : Yes)

# 가져오기 별칭 여부 체크(Default 값 : No)

%{color:red}※ 2025/03/16일 기준 Next.js 15.2.2 | React.js 19.0.0 버전 설치%

h3. 3. Next.js 프로젝트 실행 포트 변경

[설정 파일 경로]

<pre>

/package.json

</pre>

[설정 변경 위치]

<pre>

"name": 프로젝트명,

  "version": "0.1.0",

  "private": true,

  "scripts": {

    "dev": "next dev --turbopack",

    "build": "next build",

    "start": "next start",

    "lint": "next lint"

  }

</pre>

"dev": "next dev --turbopack", => "dev": "next dev -p 포트번호 --turbopack",로 변경

h3. 4. IntelliJ 사용 시 오류 제거 방법

h3. 4-1. ESLint: Please specify path to 'eslint' package

[ESLint 설치 명령어]

<pre>

npm install --g eslint

</pre>

h3. 4-2. Unknown options: resolvePluginsRelativeTo, rulePaths, useEslintrc, extensions, ignorePath

[ESLint 설정 파일 설치 명령어]

<pre>

npm install -D eslint-config-airbnb@latest

</pre>

[ESLint 종속성 모듈 확인]

<pre>

npm info "eslint-config-airbnb@latest" peerDependencies

</pre>

[ESLint 종속성 설치]

<pre>

-- 한번에 설치

npx install-peerdeps --dev eslint-config-airbnb

-- 각각 설치

npm install -D eslint eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y

-- typescript 사용 시 추가 설치

npm install eslint-config-airbnb-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev

</pre>

%{color:red}※ 아래와 같이 오류 발생 시 옵션 추가 (--legacy-peer-deps)%

<pre>

npm error Fix the upstream dependency conflict, or retry

npm error this command with --force or --legacy-peer-deps

npm error to accept an incorrect (and potentially broken) dependency resolution.

</pre>