16장: 리액트 앱 배포 및 공개하기
빌드에서 배포까지, 리액트 앱의 실전 완성
React로 만든 웹앱이 내 컴퓨터 브라우저에 잘 뜰 때의 성취감은 특별합니다. 하지만 진짜 실전은 여기서 끝이 아닙니다. 세상 어디서든 접근할 수 있게, 누구나 주소를 입력해 확인 가능한 상태로 만드는 것이 '배포(Deploy)'의 본질이죠. 이 장에서는 리액트 앱의 완성을 위한 마지막 단계, 배포와 퍼블리싱 과정을 이해하기 쉽게 안내합니다.
배포란 무엇을 의미할까?
배포란 개발 중인 앱을 실제 서비스 환경에 올려 사용자들이 인터넷만 있으면 접속할 수 있도록 공개하는 과정입니다. 작업용 개발 서버에서만 볼 수 있던 화면이 진짜 "웹사이트"로 거듭나는 순간인 셈이죠. 보통은 코드 번들링, 최적화, 호스팅 서비스 업로드, 그리고 주소 공개까지 포함합니다. 배포 후에도 수정(업데이트)를 반복 적용하기 위해 자동화 방법을 도입하기도 합니다.
리액트 앱을 배포하기 위한 기본 준비
코드와 기능 점검: 실전 서비스를 앞두고 코드를 다시 한 번 꼼꼼히 확인합니다. 테스트와 버그 수정을 거쳐 완성도를 높입니다.
프로덕션 빌드: 개발 모드가 아닌, 최적화된 서비스 전용 번들 파일을 만들어야 합니다. 터미널에 아래 명령어를 입력해 보세요.
npm run build이 과정에서 모든 소스 파일(자바스크립트, CSS, 이미지 등)이 빠르고 가볍게 사용할 수 있는 상태로 압축 정리됩니다.
빌드 결과물 확인:
build폴더가 생성되고, 여기 안에 실제 서비스에 올릴 준비가 된 정적 파일들이 담깁니다. 이 파일들을 그대로 서버에 올리면 됩니다.
대표적인 배포 방식과 호스팅 서비스
GitHub Pages: 깃허브 저장소에 소스 코드를 밀어넣고, 설정만 하면 무료로 자신의 포트폴리오·작품을 퍼블리싱할 수 있습니다.
gh-pages패키지를 활용하면 텍스트 한 줄로 배포가 가능합니다.Netlify/ Vercel: 무료이면서도, 커밋과 동시에 자동 배포가 되는 현대적인 플랫폼입니다. 로그인, 깃허브 연동, 프로젝트 선택만으로 몇 분 만에 리액트 앱이 전 세계 어디서나 연결됩니다.
Render, AWS S3, Firebase Hosting 등 다양한 클라우드 기반 서비스도 선택할 수 있습니다.
각 호스팅 서비스에 따라 세부 절차는 다르지만, 공통적으로 build 폴더 안의 파일들을 업로드하거나 전용 커맨드로 연결합니다. 기본적으로 퍼블릭 URL이 자동 생성되어 앱 주소를 손쉽게 얻을 수 있습니다.
배포 전후 신경 써야 할 부분
라우팅 설정: React Router를 사용하는 경우 서버 설정 또는
package.json의homepage필드에 앱이 배포될 경로를 명시해야, 올바른 URL에서 앱이 제대로 작동합니다.환경 변수와 시크릿 처리: API 키나 민감한 정보는 빌드 과정에서 클라이언트 노출을 막고, 필요하다면 .env 파일을 빌드 제외 처리해야 합니다.
최적화와 번들 크기: 빌드시 코드 분할(코드 스플리팅), 지연 로딩 등으로 초기 로딩 속도를 개선하면 여러 사용자가 쾌적하게 앱을 경험할 수 있습니다.
마치며
여기까지 오면 리액트의 기초를 넘어, 실제 웹서비스를 구축·공개하는 방법까지 손에 넣은 셈입니다. 이제 직접 만든 앱의 주소를 주변에 자랑하거나, 이력서에 올려 보세요. 배포의 경험은 단순한 프로젝트를 넘어 실전 개발자의 길을 여는 가장 강력한 한 걸음입니다.
