리액트 프로젝트 설치하기 (create-react-app or vite)

1. 리액트 코드와 브라우저 호환

리액트 코드는 브라우저에서 바로 호환가능한 코드가 아니다. 예를 들면, 자바스크립트로만 구성된 웹페이지는 한 프로젝트 폴더 안에 .html / .js / .css 파일들만 있으면 브라우저에서 바로 동작 가능하지만 리액트 코드 웹페이지는 코드를 자동으로 변환해주는 작업을 포함해야한다.

 

또한, 리액트 코드로 웹을 개발하면서 실시간으로 브라우저에서 동작하는 과정을 관찰해야 하고 이를 위해서는 백그라운드에서 코드 변환이 일어나야 한다.

 

리액트를 사용하면 하나의 .js 파일에 자바스크립트와 JSX (html처럼 보이는 것) 을 함께 작성하기 때문에 이 자바스크립트 파일만으로는 브라우저에서 유효하지 않고, 브라우저는 이 코드 자체 만으로는 실행할 수 없다.

 

=> 따라서 브라우저가 실행할 수 있는 유효한 자바스크립트 코드로 변환하는, 즉 브라우저가 읽을 수 있는 클라이언트 코드로 컴파일하는 과정을 필요로 한다.

 

 

 

2. 리액트 프로젝트 생성 방법 두 가지 (빌트인 도구)

리액트를 사용해 프로젝트를 구성하고 싶다면 빌트인도구가 포함되어있는 프로젝트를 셋업해야한다.

주로 사용하는 도구는 create react app 이다.

npx create-react-app my-app

Create React App

Create React App

이는 코드 변경 사항을 실시간으로 브라우저에서 보여준다.

그 다음으로 다른 도구로는 Vite가 있다.

Vite

Vite

npm create vite@latest

 

 

3. Node.js 설치

중요한 것은, 위 두가지 도구 중 어떤 것을 사용하더라도 모두 Node.js를 함께 설치해야한다는 것이다. Node.js 는 자바스크립트로 구성된 백엔드 언어이다.

Node.js

Node.js

리액트 앱을 개발할 때 필수적으로 알고있어야하는 언어는 아니지만, 리액트 프로젝트를 생성하는 백그라운드 요소들이 Node.js 언어로 쓰여있기 때문에 설치가 필수적이다.

 

 

4. Create React App

create react app 사용!

npx create-react-app my-app
cd my-app
npm start

 

 

localhost:3000 혹은 해당 브라우저 주소에서 리액트 코드가 변경될 경우 실시간으로 과정을 확인할 수 있다.