완전기초. react 로 html 배포하기!! (설치부터시작!!)

 

2024.05.24 - [데이터&AI/데이터분석] - Python사용자 입장에서 이해하는 Front-end (with Pandas, React)

Python사용자 입장에서 이해하는 Front-end (with Pandas, React)

 

 

 

 

1. nodejs 설치

설치하는 이유는 React 개발 도구들이 Node.js 기반으로 동작하고, 빌드 과정에 Node.js 환경이 필요하기 때문입니다.

https://nodejs.org/en

Node.js — Run JavaScript Everywhere

 

파일 받은 후 설치하면 끝!!!

 

2. npm 최신 버젼으로 업데이트!!

 > CMD 혹은 powershell에서 아래 코드를 입력해줍니다!!

npm install -g npm@latest

 

 

 

3. npm 으로 프로젝트 만들기!!

npx create-react-app counter-app

 

 

 

4. npm 실행!

해당 디렉토리로 가서 실행합니다!

cd counter-app
npm start

이렇게 서버가 잘 실행되고!!!

 

이렇게 브라우져가 뜨며넛 잘 실행되는것을 확인할 수 있습니다!

4. npm 잘되는것 확인했으니, 파일만들기!!!

해당 디렉토리로 가서 실행합니다!

 

npm run build

 

build를 진행합니다!!

 

build가 완료되면 이렇게 build 폴더 내에 파일들이 생성됩니다!

 

5. 생성된 파일 기반으로 실행해보기!!

실행을 위해서는 serve 라는 npm 패키지가 설치되어야 합니다!!

npm install -g serve

 

설치가 완료되었으면 serve로 실행합니다!

serve -s build

 

 

이후 다시 http://localhost:3000/ 로 접속하면 똑같이 페이지 접속되는것을 확인할 수 있습니다!!