로딩 중...
UI 디테일 개선 및 서비스 배포(선택)
구현 지침 탭에서 각 단계를 클릭하여 완료 표시할 수 있습니다.
이 미션에서 무엇을 배우고 어떤 경험을 하게 되는지 확인하세요.
아기사자 대시보드를 Vercel에 배포하고, UI/코드를 점검하여 실제 사용자가 접근 가능한 서비스로 완성하기
9주차까지 우리는 아기사자 대시보드를 단계별로 발전시켜 왔습니다. 정적인 HTML에서 시작해 React 컴포넌트로 분리하고, TypeScript로 타입 안전성을 확보했으며, Supabase로 데이터를 영구 저장하고 사용자 인증까지 구현했습니다. 기능적으로는 충분히 동작하는 애플리케이션이 완성되었습니다.
하지만 이 애플리케이션은 아직 내 컴퓨터에서만 돌아갑니다. yarn dev를 실행하고 localhost:5173으로 접속해야만 볼 수 있습니다. 친구에게 보여주려면 내 컴퓨터 화면을 공유해야 하고, 스마트폰으로 확인할 방법도 없습니다. 실제 서비스가 되려면 인터넷 어디서든 접속할 수 있는 주소가 필요합니다.
10주차에서는 Vercel을 사용해 우리가 만든 애플리케이션을 실제로 배포합니다. GitHub 저장소를 연결하면 코드를 push할 때마다 자동으로 새 버전이 배포되는 지속적 배포(CD) 환경이 구성됩니다. 더 이상 수동으로 서버에 파일을 올릴 필요가 없습니다.
또한 배포 전에 코드와 UI를 최종 점검합니다. 불필요한 console.log는 없는지, 모바일에서 레이아웃이 깨지지 않는지, 에러 처리가 빠진 곳은 없는지 확인합니다. 마지막으로 동료들과 서로의 서비스를 리뷰하며 피드백을 주고받으며 새로운 시각에서 코드를 바라보는 연습을 합니다.
이번 주차를 통해 "코드를 작성하는 것"에서 "서비스를 세상에 내놓는 것"까지, 개발의 전체 과정을 완주하게 됩니다.