npm error ENOENT 해결 / Vite 사용

이윤희·2025년 2월 8일

React/Next 일기

목록 보기
39/52

npm error code ENOENT 원인

PS C:\Users\ASUS\Desktop\새 폴더> npx create-react-app my-app
npm error code ENOENT
npm error syscall lstat
npm error path C:\Users\ASUS\AppData\Roaming\npm
npm error errno -4058
npm error enoent ENOENT: no such file or directory, lstat 'C:\Users\ASUS\AppData\Roaming\npm'
npm error enoent This is related to npm not being able to find a file.
npm error enoent
npm error A complete log of this run can be found in: C:\Users\ASUS\AppData\Local\npm-cache\_logs\2025-02-08T06_39_41_231Z-debug-0.log
PS C:\Users\ASUS\Desktop\새 폴더>

그 전부터 이상하게도 내가 새 폴더 만들어서 리액트 앱 좀 설치하려고 하면 계속 이 에러가 떴다. 한두 번도 아니고 계속 이러니까 대체 뭔가 했는데 ㅡㅡ

오늘에야 그 원인을 찾아냈다...
아니 원래도 써있긴 했는데? 그전에 왜 못 찾았을까?
해당 폴더가 없어서 에러가 뜬다고 명시가 되어 있다. 그래서 그 폴더에 가서 npm 폴더가 있는지 확인했다.
근데 없어서??? 폴더를 하나 만들었다.
그랬더니 설치 됨;;;

PS C:\Users\ASUS\Desktop\react-project> cd C:\Users\ASUS\AppData\Roaming\
PS C:\Users\ASUS\AppData\Roaming> npm config set prefix C:\Users\ASUS\AppData\Roaming\npm
>>
PS C:\Users\ASUS\AppData\Roaming> npx create-react-app my-app
>>
Need to install the following packages:
create-react-app@5.0.1
Ok to proceed? (y) y

npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated uid-number@0.0.6: This package is no longer supported.
npm warn deprecated fstream-ignore@1.0.5: This package is no longer supported.
npm warn deprecated rimraf@2.7.1: Rimraf versions prior to v4 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated fstream@1.0.12: This package is no longer supported.
npm warn deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.

Creating a new React app in C:\Users\ASUS\AppData\Roaming\my-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...


added 1324 packages in 51s

268 packages are looking for funding
  run `npm fund` for details

Initialized a git repository.

Installing template dependencies using npm...
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: my-app@0.1.0
npm error Found: react@19.0.0
npm error node_modules/react
npm error   react@"^19.0.0" from the root project
npm error
npm error Could not resolve dependency:
npm error peer react@"^18.0.0" from @testing-library/react@13.4.0
npm error node_modules/@testing-library/react
npm error   @testing-library/react@"^13.0.0" from the root project
npm error
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.
npm error
npm error
npm error For a full report see:
npm error C:\Users\ASUS\AppData\Local\npm-cache\_logs\2025-02-08T06_54_49_558Z-eresolve-report.txt
npm error A complete log of this run can be found in: C:\Users\ASUS\AppData\Local\npm-cache\_logs\2025-02-08T06_54_49_558Z-debug-0.log
`npm install --no-audit --save @testing-library/jest-dom@^5.14.1 @testing-library/react@^13.0.0 @testing-library/user-event@^13.2.1 web-vitals@^2.1.0` failed

근데 이전 글이랑 똑같이 npm error code ERESOLVE 가 뜨는 걸 보면 버전이 안 맞는 문제는 있다.

그걸 해결하려고 물어봤더니, react 18버전으로 바꿔야 된단다.
근데 그걸 물어보다 보니, Vite 사용을 권함

GPT

🎯 Vite와 Create React App (CRA)의 차이점

현재 프론트엔드 개발에서는 Vite가 Create React App(CRA)보다 훨씬 더 빠르고 효율적인 도구로 자리 잡고 있습니다.
👉 Vite는 더 가볍고 빠르며 최신 기술을 지원합니다. 🚀

📌 Vite vs Create React App (CRA) 비교

특징🏗️ Create React App (CRA)⚡ Vite
빌드 속도느림 (Webpack 사용)매우 빠름 (ESBuild 사용)
핫 리로드 (HMR)느림 (리로드 시간이 길다)즉각적 (바로 반영됨)
번들링 도구WebpackESBuild (초고속)
최적화기본적인 최적화자동 코드 분할 및 최적화
React 최신 버전 지원느림 (React 19 완벽 지원 안됨)빠름 (React 19 바로 사용 가능)
설정 가능성제한적 (eject 해야 수정 가능)쉽고 유연한 설정 (vite.config.js)
프로젝트 크기무거움가벼움
SSR (서버 사이드 렌더링)기본 지원 X기본 지원 O

⚡ Vite의 장점

✅ 초고속 개발 환경 → 서버 실행 & 핫 리로드가 CRA보다 훨씬 빠름
✅ 최신 React 지원 → React 19도 바로 사용 가능
✅ 설정이 유연함 → vite.config.js를 통해 쉽게 커스텀 가능
✅ 더 가벼운 프로젝트 → CRA보다 기본 프로젝트 크기가 훨씬 작음
✅ SSR (서버 사이드 렌더링) 가능 → Next.js 대체 가능

🚀 Vite로 React 프로젝트 만들기

아래 명령어로 Vite 기반 React 프로젝트를 만들 수 있습니다. 

# Vite 프로젝트 생성
npm create vite@latest my-app --template react

# 프로젝트 폴더로 이동
cd my-app

# 패키지 설치
npm install

# 개발 서버 실행
npm run dev

✅ 즉시 실행 가능하며, CRA보다 훨씬 빠릅니다!

💡 Vite를 사용해야 할까요?

✅ 빠른 개발 환경이 필요하다면 → Vite 추천
✅ React 19를 쉽게 사용하고 싶다면 → Vite 추천
✅ Next.js처럼 SSR이 필요하다면 → Vite 가능

⛔ 하지만, 기업에서 CRA를 사용 중이라면 Vite로 전환이 어려울 수 있음
→ 그럴 경우 CRA를 계속 사용하면서 React 18을 유지하는 것이 안전합니다.

🎯 결론: 지금부터 React는 Vite로 시작하세요!

Vite는 빠르고, 가볍고, 최신 React 버전을 쉽게 지원하기 때문에 CRA보다 더 나은 선택입니다.
👉 CRA를 쓰는 이유는 거의 없어졌습니다. Vite로 넘어가세요! 🚀

나는 CRA 밖에 사용해보지 않았습니다. vite 를 사용해서 react 프로젝트를 만든다면 어떻게 명령해야 하나요? 또, 아까같이 오류가 발생하지 않도록 리액트 18버전을 설치하고 싶다면 어떻게 해야 하죠?

GPT

🚀 Vite로 React 프로젝트 만들기 (React 18 버전 지정)

CRA(Create React App)만 사용해봤다면 Vite는 더 빠르고 가볍기 때문에 React 개발을 훨씬 더 편리하게 만들어 줄 거예요! 😊

📌 1️⃣ Vite로 React 프로젝트 생성 (React 18 버전 명시)

Vite를 사용하여 React 18 버전으로 프로젝트를 생성하는 방법은 다음과 같습니다.

# 1️⃣ Vite 기반 React 프로젝트 생성
npm create vite@latest my-app --template react

# 2️⃣ 프로젝트 폴더로 이동
cd my-app

# 3️⃣ React 18로 설치 (기본적으로 React 19가 설치될 수도 있음)
npm install react@18 react-dom@18

# 4️⃣ 개발 서버 실행
npm run dev

🛠 2️⃣ 프로젝트 생성 후 React 18로 변경 (만약 React 19가 설치되었을 경우)

Vite는 최신 버전을 기본으로 설치하므로, 만약 react@19가 설치되었다면 React 18로 변경할 수 있습니다.

# 현재 설치된 React 버전 확인
npm list react react-dom

# React 18로 강제 변경
npm install react@18 react-dom@18

그 후 다시 실행하면 됩니다. 

npm run dev

🎯 Vite로 프로젝트를 만들면 무엇이 다를까요?

✅ 초고속 개발 환경 → CRA보다 서버 실행이 훨씬 빠름
✅ 핫 리로드(HMR) 즉시 반영 → 코드 변경 시 자동 반영
✅ 설정이 유연함 → vite.config.js에서 쉽게 설정 가능
✅ 더 가벼운 프로젝트 크기 → CRA보다 기본적으로 가벼움

🎯 최종 정리

  1. npm create vite@latest my-app --template react 명령어 실행
  2. cd my-app && npm install react@18 react-dom@18으로 React 18 버전 지정
  3. npm run dev로 개발 서버 실행
  4. 🚀 더 빠른 React 개발 경험!

이제 Vite를 사용한 React 개발을 경험해 보세요! 🏎️💨

이래서 npmtrends 가서 확인해봤는데, 진짜 vite가 압도적이다;;;

새 프로젝트부터는 이걸로 만들어 봐야지

바로 하나 만들어봤다.

PS C:\Users\ASUS\Desktop\study\tailwind> npm create vite@latest my-app --template react
Need to install the following packages:
create-vite@6.2.0
Ok to proceed? (y) y


> npx
> create-vite my-app react

√ Select a framework: » React
√ Select a variant: » JavaScript

Scaffolding project in C:\Users\ASUS\Desktop\study\tailwind\my-app...

Done. Now run:

  cd my-app
  npm install
  npm run dev

PS C:\Users\ASUS\Desktop\study\tailwind> cd my-app
PS C:\Users\ASUS\Desktop\study\tailwind\my-app> npm install react@18 react-dom@18

added 259 packages, and audited 260 packages in 17s

108 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
PS C:\Users\ASUS\Desktop\study\tailwind\my-app>

어느 프레임워크/언어 쓸건지 고를 수 있는것도 되게 좋은듯
가볍고 빠르다는데 무슨 말인지 알겠다

폴더는 이렇게 돼있는데
App.jsx 가 App.js고
main.jsx 가 index.js 인듯.

index.css는 뭐지? 프로젝트 전체적으로 적용하는 스타일 관한 건가 싶기도 하고.

개발 서버 명령어는 npm run dev

profile
이윤희
이전 포스트

local storage 사용

다음 포스트

Next.js 기초

0개의 댓글