React Build

---

🏗️ React Build란?

정의

React Build는 개발 중 작성한 소스 코드를 배포 가능한 정적 파일로 변환하는 과정이다.

개발할 때는 편의성을 위해 여러 파일로 나뉘어 있지만, 빌드하면 브라우저가 바로 읽을 수 있는 형태로 묶인다.

🧩 빌드의 특징

• 개발용 소스와 배포용 산출물이 분리된다.
• 번들링과 압축이 함께 이루어진다.
• 코드 분할을 통해 초기 로딩 최적화가 가능하다.
• 결과물은 보통 정적 파일 형태로 만들어진다.

⚙️ SPA와 빌드

SPA란?

SPA(Single Page Application)는 하나의 HTML 페이지를 기반으로 라우팅과 화면 전환을 처리하는 방식이다.

React는 빌드 후에도 주로 SPA 형태로 동작한다.
즉, HTML 한 장과 번들된 JavaScript가 함께 동작하면서 화면을 렌더링한다.

🛠️ 빌드 명령

npm run build

빌드가 완료되면 정적 배포용 파일이 생성된다.

📦 빌드 결과물에서 확인할 것

• 번들 파일이 정상적으로 생성됐는지 확인한다.
• 정적 리소스 경로가 맞는지 확인한다.
• 배포 환경에서 새로고침 시 라우팅이 깨지지 않는지 확인한다.

📌 정리

• React Build는 개발용 코드를 배포용 산출물로 바꾸는 과정이다.
• SPA는 빌드 이후에도 하나의 진입점으로 화면을 처리한다.
• 실제 서비스 배포 전에는 빌드 결과를 꼭 확인해야 한다.

---

연결문서

• npm
• vite
• React-Init-vite