[React] 01. React 설정
안녕하세요.
이번에는 React 실행을 하기위한 환경을 설정하는 방법을 알아보겠습니다.
React는 Meta에서 개발한 JavaScript 라이브러리입니다.그렇기 때문에 React 프로젝트만으로는 실행이 불가능하다는점!
그래서 React 프로젝트를 실행하기 위해서는 NodeJS라는 웹 브라우저 밖에서도 JavaScript를 실행 시킬수 있는 런타임이 필요합니다.
1. Node.js 설치하기
NodeJS는 완전한 오픈소스(Open-Source) 크로스플랫폼 런타임 환경으로 공식 사이트 에서 다운로드를 받을수 있습니다
(설치파일은 안정성을 위해 LTS 버전을 다운받으시면 됩니다.)
이제 정상적으로 설치가 완료되었다면 터미널에서 아래 명령어를 작성해 설치된 버전을 확인하면 됩니다.
npm -v
2. React 프로젝트 생성
React는 개발 환경을 쉽게 설정할 수 있도록 도와주는 도구 CRA(Create-React-App)를 제공을 해줍니다.
하지만 공식 사이트 에서는 2025년 2월 14일부로 사용을 중단하기로 결정했다고 합니다.
Create React App은 시작을 쉽게 해주지만, 고성능의 프로덕션 앱 구축을 어렵게 하는 몇 가지 제한이 있습니다. 원칙적으로는 이를 프레임워크로 발전시켜 해결할 수도 있습니다.
하지만 현재 Create React App은 적극적으로 관리하는 담당자가 없고, 이미 많은 기존 프레임워크들이 이러한 문제를 잘 해결하고 있기 때문에 사용을 중단하기로 결정했습니다.
(리액트 공식 사이트 내용중)
(Create React App은 유지 보수 모드로 계속 동작하며, React 19와 호환되는 새로운 버전을 배포도 한 상태여서 사용은 가능해보입니다.)
그래서 저는 Vite를 사용해서 프로젝트를 생성해서 진행해보도록 하겠습니다.
Vite를 사용하는 이유는 순수하게 리액트 라이브러리 자체를 학습하기에 가장 좋은 환경이라고 해서 먼저 기초적인 리액트의 기본 문법과 컴포넌트를 Vite를 사용해서 학습을 진행해보도록 하겠습니다.
Vite로 프로젝트를 생성하는 방법은 터미널에서 아래 명령어를 작성해 프로젝트를 생성합니다.
npm create vite@latest
호환성 참고 사항
Vite는 Node.js 20.19+ 또는 22.12+를 요구합니다. 다만 일부 템플릿의 경우 더 높은 버전의 Node.js를 요구할 수 있으니, 패키지 관리자에서 경고가 표시되면 업그레이드해 주세요.
(Vite 공식 사이트)
# 명령어 입력 후 아래와 같이 원하는 설정을 선택하면 된다.
> npx
> create-vite
# 1 프로젝트 이름 설정
✔ Project name: … vite-react-app
# 2 framework 설정
? Select a framework: › - Use arrow-keys. Return to submit.
Vanilla
Vue
❯ React
Preact
Lit
Svelte
Solid
Qwik
Others
# 3 variant 설정
? Select a variant: › - Use arrow-keys. Return to submit.
TypeScript
TypeScript + SWC
❯ JavaScript
JavaScript + SWC
Remix ↗(코드 출처 : https://fabric0de.tistory.com/53)
3. 프로젝트 실행
npm run dev
> my-react-app@0.0.0 dev
> vite
# 아래 "Local:" 부분에 있는 주소로 들어가게 되면 vite 세팅이 완료된 것을 확인할 수 있다
Port 5173 is in use, trying another one...
VITE v5.4.8 ready in 311 ms
➜ Local: http://localhost:5174/
➜ Network: use --host to expose
➜ press h + enter to show help
(코드 출처 : https://fabric0de.tistory.com/53)
