인프런 커뮤니티 질문&답변
작성한 질문수
프로젝트 생성 에러
작성
·
362
0
node 버전은 20.18.1 설치했습니다
알려주신 방법대로 터미널에서 명령어가 만들어졌습니다
npx create-react-app . --template typescript && npm install -D tailwindcss postcss autoprefixer && npx tailwindcss init -p실행하니 아래 에러가 발생합니다
Installing template dependencies using npm...
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: pomodoro@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:인터넷을 통해 찾아본 바로는 리엑트 19 버전 호환성 문제로 에러가 나는거라는데 vite 를 사용해서 프로젝트를 생성하는걸 추천하네요
해결 방법이 없을까요?
답변 1
0
React 19 버전은 현재 Create React App(CRA)에서 지원되지 않는 버전이라서, CRA가 의존하고 있는 여러 라이브러리와 충돌이 발생합니다. (오류 메시지도 @testing-library/react가 react@^18.0.0을 요구한다고 안내하고 있죠.)
아직 정식 릴리스가 되지 않았거나(2024-12 시점) 안정적으로 지원되지 않는 React 버전을 사용하시려면, 직접 다른 빌드 툴(예: Vite, Webpack 등)로 설정을 구성해줘야 합니다. CRA로 진행하실 때에는 React 18 버전을 사용하는 것이 가장 간단하고 안정적인 방법입니다.
1. React 18로 버전 다운그레이드 후 CRA 사용하기
프로젝트 폴더가 비어있는 상태인지 확인합니다. 이미 생성된 CRA 프로젝트가 있다면 폴더를 정리하거나 삭제 후 진행하는 것이 깔끔합니다.
아래 명령어로 CRA(Typescript 템플릿)를 생성하면서, React 버전을 18.2.0으로 명시해줍니다:
# npx create-react-app . --template typescript 를 먼저 실행하면 # 기본적으로 react@18.2, react-dom@18.2 등을 설치합니다. # 혹시나 버전이 꼬였을 경우를 대비해 아래처럼 수동으로 버전을 지정합니다. npx create-react-app . --template typescript npm install react@18.2.0 react-dom@18.2.0이후 Tailwind 패키지들을 설치하고 초기 설정 파일을 생성합니다:
npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p정상적으로 설치되었다면,
package.json에서react와react-dom버전이 18.2.0으로 되어 있어야 합니다.
참고 --force 나 --legacy-peer-deps 사용하기
npm install --force또는npm install --legacy-peer-deps를 사용하면 의존성 충돌을 무시하고 설치를 강행할 수 있습니다. 하지만, 해결되지 않은 하위 라이브러리 간 버전 충돌이 그대로 남기 때문에 이후에 예상치 못한 문제가 발생할 수 있습니다.따라서, CRA와 함께 제대로 동작하는 안정 버전을 사용하는 것이 가장 좋습니다.
2. Vite로 프로젝트 구성하기 (권장)
React 19 버전을 꼭 사용해야 하거나, 빌드 속도/초기 설정 등에서 좀 더 유연하게 구성하고 싶으시다면 Vite를 사용하는 방법을 권장합니다. 다만 강의 내용과 달라서 약간의 차이는 있을 수 있습니다.
프로젝트 폴더를 준비하고, 터미널에서 아래 명령을 실행합니다:
npm create vite@latest # yarn, pnpm 등을 쓰셔도 됩니다. # 이후, 프로젝트 이름 지정하고, # "React", "TypeScript" 템플릿을 선택생성된 폴더(예:
my-vite-app)로 이동한 뒤:cd my-vite-app npm install필요한 React 버전을 명시하여 설치합니다(예: 19.0.0):
npm install react@19.0.0 react-dom@19.0.0만약 아직 React 19가 정식 배포되지 않았다면, 알파/베타/RC 버전을 사용해야 하고, 각 라이브러리도 이에 맞춰 호환 버전을 찾아야 하므로, 안정성이 조금 떨어질 수 있습니다.
Tailwind 설정:
npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p이후
tailwind.config.js,src/index.css등에 Tailwind 설정을 추가합니다.
Create React App 명령어를 계속 사용하신다면 React 18을 사용하는 것이 권장됩니다.
React 19 등의 최신 개발 버전을 사용하려면, CRA가 아닌 Vite, Webpack 등 직접 빌드 툴 설정을 해주는 편이 에러를 최소화할 수 있습니다.
위 방법대로 해 보시면서 문제가 생기면, 오류 메시지와 함께 다시 질문해 주세요!