React npx 오류 해결 및 Vite 설치 방법

최근 React 기반의 SPA(Single Page Application) 프로젝트에서 Vite를 사용하여 개발하는 경우가 많아지고 있습니다. Vite는 빠르고 효율적인 빌드 도구로, 개발 환경에서의 속도와 성능이 뛰어납니다.

그러나 Vite를 처음 사용하는 개발자들은 프로젝트 설정 과정에서 여러 가지 오류를 경험할 수 있습니다. 본 글에서는 React npx 설치 시 발생할 수 있는 오류를 해결하고, Vite를 설치하는 방법에 대해 자세히 설명하겠습니다.

Vite란 무엇인가?

Vite는 현대 웹 개발을 위해 설계된 빌드 도구이자 개발 서버입니다. Vite는 ES 모듈을 기반으로 하여, 브라우저에서 직접 모듈을 가져올 수 있도록 하며, 개발 중에 실시간으로 변경 사항을 반영하는 HMR(Hot Module Replacement) 기능을 지원합니다.

이러한 점에서 Vite는 기존의 번들러인 Webpack보다 빠른 속도를 자랑합니다. Vite는 또한 Rollup을 기반으로 하여 최적화된 정적 리소스를 생성할 수 있는 기능도 제공합니다.

특징	설명
빠른 빌드 속도	ES 모듈 기반으로 파일을 즉시 로드
HMR 지원	코드 변경 시 실시간으로 업데이트
간편한 설정	기본적인 설정만으로도 쉽게 사용 가능
최적화된 배포	Rollup 기반으로 생산성 높은 빌드 제공

React 프로젝트 세팅하기

React와 Vite를 함께 사용하기 위한 프로젝트 설정 과정은 다음과 같습니다. 이 단계들은 React의 기본적인 지식이 있는 개발자라면 쉽게 따라 할 수 있을 것입니다.

1. Vite 설치: 먼저 Vite를 글로벌하게 설치합니다. 다음 명령어를 터미널에 입력하여 Vite를 설치합니다.

bash npm install -g create-vite

1. 새로운 프로젝트 폴더 생성: 새로운 React 프로젝트를 위한 폴더를 생성하고 해당 폴더로 이동합니다.

bash mkdir my-react-app cd my-react-app

1. React 애플리케이션 생성: 다음 명령어를 입력하여 새 React 애플리케이션을 생성합니다. Vite의 경우 아래와 같이 명령어를 입력합니다.

bash npm create vite@latest

이 과정에서 React와 TypeScript 옵션을 선택할 수 있습니다.

1. 의존성 설치: 생성된 프로젝트 폴더로 이동한 후, 아래 명령어로 필요한 패키지들을 설치합니다.

bash npm install

1. 개발 서버 실행: 개발 서버를 실행하기 위해 아래 명령어를 입력합니다.

bash npm run dev

이제 브라우저에서 http://localhost:5173 주소로 접근하면 React 애플리케이션을 확인할 수 있습니다.

단계	명령어
Vite 설치	npm install -g create-vite
폴더 생성	mkdir my-react-app && cd my-react-app
애플리케이션 생성	npm create vite@latest
의존성 설치	npm install
개발 서버 실행	npm run dev

다른 내용도 보러가기 #1

발생할 수 있는 오류와 해결 방법

Vite를 사용하여 React 애플리케이션을 설정하는 과정에서 여러 가지 오류가 발생할 수 있습니다. 가장 흔한 오류 중 하나는 "non-JS module files deprecated" 오류입니다.

이 오류는 CSS 또는 이미지 파일과 같은 비자바스크립트 모듈 파일을 처리하는 과정에서 발생합니다.

non-JS module files deprecated 오류

이 오류는 Vite v2.x가 기본적으로 비자바스크립트 모듈을 지원하지 않기 때문에 발생합니다. 이를 해결하기 위해 vite-plugin-react-pages 플러그인을 사용할 수 있습니다.

이 플러그인은 비자바스크립트 모듈을 JavaScript 파일로 직접 가져올 수 있는 방법을 제공합니다.

1. 플러그인 설치: 아래 명령어를 통해 플러그인을 설치합니다.

bash npm install vite-plugin-react-pages --save-dev

1. vite.config.js 파일 수정: 프로젝트의 루트 경로에 vite.config.js 파일을 생성하고, 다음과 같은 내용을 추가합니다.

```javascript import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import reactPages from 'vite-plugin-react-pages';

export default defineConfig({ plugins: [react(), reactPages()], }); ```

이렇게 하면 "non-JS module files deprecated" 오류가 해결됩니다.

오류 메시지	해결 방법
non-JS module files deprecated	vite-plugin-react-pages 설치 및 설정
@vitejs/plugin-react 인스턴스 없음	@vitejs/plugin-react 설치 및 설정

추가적인 오류와 또 다른 해결책

개발 서버를 실행할 때 "Can't find an instance of @vitejs/plugin-react" 오류가 발생할 수 있습니다. 이는 Vite가 React 애플리케이션에서 MDX(Markdown + JSX) 파일을 지원하기 위해 필요한 플러그인을 찾지 못할 때 발생하는 오류입니다.

이 오류를 해결하기 위해서는 @vitejs/plugin-react 플러그인을 설치해야 합니다.

1. 플러그인 설치: 아래 명령어로 플러그인을 설치합니다.

bash npm install @vitejs/plugin-react --save-dev

1. vite.config.js 파일 수정: 위에서 만든 vite.config.js 파일에 다음과 같이 추가합니다.

```javascript import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import reactPages from 'vite-plugin-react-pages';

export default defineConfig({ plugins: [react(), reactPages(), react()], }); ```

이제 MDX 파일을 사용할 수 있으며, 오류 메시지가 사라질 것입니다.

결론

Vite를 사용하여 React 애플리케이션을 설정하는 과정은 쉽고 빠르며, 현대적인 웹 개발의 트렌드에 부합합니다. 그러나 설치 과정에서 발생할 수 있는 다양한 오류를 해결하는 과정은 필수적입니다.

이번 글에서는 Vite 설치 방법과 함께 일반적인 오류 해결 방법을 다루었습니다. 이를 통해 개발자들이 Vite와 React를 효율적으로 활용할 수 있기를 바랍니다.

Vite의 빠른 빌드 속도와 HMR 기능을 통해 더욱 즐거운 개발 환경을 경험하시길 바랍니다.

관련 영상

같이 보면 좋은 글