react 프로젝트 url로 올리기 [vercel 사용]

 

 

1. git repo에 올리고

2. vercel에 add project를 하여 연동시키면 끝!

 

vercel => https://vercel.com/

 

 

기본 html은 정적파일이기 때문에 그냥 git으로도 가능하지만

react나 vue 등은 빌드(build) 과정이 필요해서 ( 정적 서버/배포 플랫폼 필요 ) 바로 못띄운다

 

이유 정리

1. React/Next.js는 개발 코드가 그대로 브라우저에서 동작하지 않음
   • src 폴더 안의 JSX, ES6 모듈, TypeScript 등은 브라우저가 바로 이해 못함
   • 예: <Component /> JSX, import/export 문법
2. 빌드 과정 (npm run build)
   • JSX → JS로 변환
   • 모듈 번들링 (여러 파일을 하나/몇 개로 합침)
   • CSS/이미지 최적화
   • Next.js는 SSG/SSR 페이지 생성
     → 이렇게 만들어진 정적 파일이 실제로 브라우저에서 실행 가능
3. 정적 파일을 배포
   • HTML, JS, CSS 번들, 이미지 등을 제공할 웹 서버가 필요
   • GitHub Pages는 정적 파일 제공만 가능
   • Vercel/Netlify는 빌드 실행 + 정적/SSR 제공 가능