프로젝트

일반

사용자정보

이력

Wiki »

프로젝트 생성 » 이력 » 개정판 4

개정판 3 (이태훈, 2025/03/16 07:44) → 개정판 4/5 (이태훈, 2025/03/16 07:51) 

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-per-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>