20. React 프로젝트 배포(Deployment)
1. 배포(Deployment)란?
배포는 개발이 완료된 프로젝트를 실제 사용자가 인터넷에서 접속할 수 있도록 서버에 올리는 과정입니다.
예를 들어
http://localhost:5173
에서만 실행되던 React 프로젝트를
https://dongbusancc.com
처럼 누구나 접속할 수 있는 웹사이트로 만드는 과정입니다.
2. React 개발과 배포의 차이
개발 환경
npm run dev
개발 서버 실행
코드 수정 즉시 반영(HMR)
개발용
배포 환경
npm run build
최적화된 파일 생성
실제 서비스용
빠른 실행 속도
3. Build란?
React 프로젝트를 브라우저가 이해할 수 있는 형태로 변환하는 과정입니다.
npm run build
실행 후
dist
│
├── assets
├── index.html
└── ...
dist 폴더가 생성됩니다.
4. dist 폴더
배포할 때 사용하는 폴더입니다.
dist
↓
HTML
↓
CSS
↓
JavaScript
React의 JSX는 이 과정에서 일반 JavaScript로 변환됩니다.
5. GitHub 배포
React 프로젝트
↓
GitHub 업로드
↓
GitHub 저장
GitHub는 코드 저장과 버전 관리에 적합합니다.
6. Vercel 배포
Vercel은 React 프로젝트를 매우 쉽게 배포할 수 있는 서비스입니다.
배포 과정
GitHub
↓
Vercel 연결
↓
자동 배포
↓
URL 생성
코드를 GitHub에 올리기만 하면 자동으로 다시 배포됩니다.
7. GitHub Pages
정적 사이트를 배포할 수 있습니다.
GitHub
↓
GitHub Pages
↓
React 사이트
개인 포트폴리오에 많이 사용됩니다.
8. 카페24 배포
카페24는 React를 빌드한 결과물(dist) 을 업로드하는 방식으로 배포합니다.
순서
React
↓
npm run build
↓
dist 생성
↓
FTP 업로드
↓
서비스
9. 카페24 업로드
업로드 대상
www
↓
index.html
↓
assets
즉, dist 폴더 안의 내용을 업로드합니다.
10. Vite 설정
카페24에서는 상대 경로를 사용하는 것이 안전합니다.
export default defineConfig({
base:"./"
});
이미지와 JavaScript 경로가 올바르게 동작하도록 설정합니다.
11. React Router 배포
BrowserRouter를 사용하는 경우 서버 설정이 필요할 수 있습니다.
정적 호스팅에서는 HashRouter를 사용하는 방법도 있습니다.
<HashRouter>
<App/>
</HashRouter>
주소 예시
https://example.com/#/course
12. 환경별 배포 방식
환경 특징
Vercel React 배포에 최적화
GitHub Pages 포트폴리오용 정적 사이트
카페24 FTP 업로드 방식
자체 서버 Node.js 등으로 직접 운영
13. 동부산CC 배포 순서
React 개발
↓
GitHub 업로드
↓
npm run build
↓
dist 생성
↓
카페24 업로드
↓
서비스 시작
14. 배포 전 체크리스트
✔ 오류 없이 실행되는가?
✔ 이미지 경로가 정상인가?
✔ 메뉴 이동이 정상인가?
✔ 모바일 화면이 정상인가?
✔ Console 오류가 없는가?
✔ Build가 정상적으로 완료되는가?
15. 프로젝트 운영 흐름
기획
↓
React 개발
↓
GitHub
↓
Build
↓
배포
↓
운영
↓
수정
↓
재배포
React 프로젝트는 한 번 배포로 끝나는 것이 아니라, 기능을 개선할 때마다 다시 빌드하고 배포하는 과정을 반복합니다.
16. React 실무 개발 흐름
Figma
↓
React 개발
↓
Git
↓
GitHub
↓
Build
↓
배포
↓
운영
실무에서는 이 흐름을 반복합니다.
17. 동부산CC 프로젝트 최종 구조
기획
↓
컴포넌트 설계
↓
React 개발
↓
테스트
↓
GitHub
↓
Build
↓
카페24
↓
서비스
18. React 프로젝트에서 가장 많이 사용하는 명령어
프로젝트 실행
npm run dev
Build
npm run build
Git 업로드
git add .
git commit -m "배포"
git push
19. React 개발자가 갖추어야 할 흐름
HTML
↓
CSS
↓
JavaScript
↓
React
↓
Git
↓
GitHub
↓
Build
↓
Deployment
정리
React 프로젝트는 개발이 완료되면 npm run build를 통해 최적화된 배포 파일을 생성합니다.
생성된 dist 폴더의 내용을 웹 서버에 업로드하면 실제 서비스가 가능합니다.
GitHub는 프로젝트의 버전 관리를 담당하고, Vercel은 React 프로젝트를 자동으로 배포하는 데 적합하며, 카페24에서는 dist 폴더를 FTP로 업로드하여 운영할 수 있습니다.
동부산CC 프로젝트도 개발 → GitHub → Build → 카페24 배포의 과정을 거쳐 실제 웹사이트로 운영할 수 있습니다.
1. 배포(Deployment)란?
배포는 개발이 완료된 프로젝트를 실제 사용자가 인터넷에서 접속할 수 있도록 서버에 올리는 과정입니다.
예를 들어
http://localhost:5173
에서만 실행되던 React 프로젝트를
https://dongbusancc.com
처럼 누구나 접속할 수 있는 웹사이트로 만드는 과정입니다.
2. React 개발과 배포의 차이
개발 환경
npm run dev
개발 서버 실행
코드 수정 즉시 반영(HMR)
개발용
배포 환경
npm run build
최적화된 파일 생성
실제 서비스용
빠른 실행 속도
3. Build란?
React 프로젝트를 브라우저가 이해할 수 있는 형태로 변환하는 과정입니다.
npm run build
실행 후
dist
│
├── assets
├── index.html
└── ...
dist 폴더가 생성됩니다.
4. dist 폴더
배포할 때 사용하는 폴더입니다.
dist
↓
HTML
↓
CSS
↓
JavaScript
React의 JSX는 이 과정에서 일반 JavaScript로 변환됩니다.
5. GitHub 배포
React 프로젝트
↓
GitHub 업로드
↓
GitHub 저장
GitHub는 코드 저장과 버전 관리에 적합합니다.
6. Vercel 배포
Vercel은 React 프로젝트를 매우 쉽게 배포할 수 있는 서비스입니다.
배포 과정
GitHub
↓
Vercel 연결
↓
자동 배포
↓
URL 생성
코드를 GitHub에 올리기만 하면 자동으로 다시 배포됩니다.
7. GitHub Pages
정적 사이트를 배포할 수 있습니다.
GitHub
↓
GitHub Pages
↓
React 사이트
개인 포트폴리오에 많이 사용됩니다.
8. 카페24 배포
카페24는 React를 빌드한 결과물(dist) 을 업로드하는 방식으로 배포합니다.
순서
React
↓
npm run build
↓
dist 생성
↓
FTP 업로드
↓
서비스
9. 카페24 업로드
업로드 대상
www
↓
index.html
↓
assets
즉, dist 폴더 안의 내용을 업로드합니다.
10. Vite 설정
카페24에서는 상대 경로를 사용하는 것이 안전합니다.
export default defineConfig({
base:"./"
});
이미지와 JavaScript 경로가 올바르게 동작하도록 설정합니다.
11. React Router 배포
BrowserRouter를 사용하는 경우 서버 설정이 필요할 수 있습니다.
정적 호스팅에서는 HashRouter를 사용하는 방법도 있습니다.
<HashRouter>
<App/>
</HashRouter>
주소 예시
https://example.com/#/course
12. 환경별 배포 방식
환경 특징
Vercel React 배포에 최적화
GitHub Pages 포트폴리오용 정적 사이트
카페24 FTP 업로드 방식
자체 서버 Node.js 등으로 직접 운영
13. 동부산CC 배포 순서
React 개발
↓
GitHub 업로드
↓
npm run build
↓
dist 생성
↓
카페24 업로드
↓
서비스 시작
14. 배포 전 체크리스트
✔ 오류 없이 실행되는가?
✔ 이미지 경로가 정상인가?
✔ 메뉴 이동이 정상인가?
✔ 모바일 화면이 정상인가?
✔ Console 오류가 없는가?
✔ Build가 정상적으로 완료되는가?
15. 프로젝트 운영 흐름
기획
↓
React 개발
↓
GitHub
↓
Build
↓
배포
↓
운영
↓
수정
↓
재배포
React 프로젝트는 한 번 배포로 끝나는 것이 아니라, 기능을 개선할 때마다 다시 빌드하고 배포하는 과정을 반복합니다.
16. React 실무 개발 흐름
Figma
↓
React 개발
↓
Git
↓
GitHub
↓
Build
↓
배포
↓
운영
실무에서는 이 흐름을 반복합니다.
17. 동부산CC 프로젝트 최종 구조
기획
↓
컴포넌트 설계
↓
React 개발
↓
테스트
↓
GitHub
↓
Build
↓
카페24
↓
서비스
18. React 프로젝트에서 가장 많이 사용하는 명령어
프로젝트 실행
npm run dev
Build
npm run build
Git 업로드
git add .
git commit -m "배포"
git push
19. React 개발자가 갖추어야 할 흐름
HTML
↓
CSS
↓
JavaScript
↓
React
↓
Git
↓
GitHub
↓
Build
↓
Deployment
정리
React 프로젝트는 개발이 완료되면 npm run build를 통해 최적화된 배포 파일을 생성합니다.
생성된 dist 폴더의 내용을 웹 서버에 업로드하면 실제 서비스가 가능합니다.
GitHub는 프로젝트의 버전 관리를 담당하고, Vercel은 React 프로젝트를 자동으로 배포하는 데 적합하며, 카페24에서는 dist 폴더를 FTP로 업로드하여 운영할 수 있습니다.
동부산CC 프로젝트도 개발 → GitHub → Build → 카페24 배포의 과정을 거쳐 실제 웹사이트로 운영할 수 있습니다.
#20. React 프로젝트 배포(Deployment)