WEB & WEBAPP
Full-stack 통합 프로젝트
Frontend·Backend·DevOps·CI/CD에서 따로 배운 흐름을 하나의 서비스 안에서 처음부터 끝까지 직접 엮어보는 캡스톤 과정입니다. 기획부터 배포·운영까지, 데이터가 어느 계층에 있든 항상 스스로 위치를 설명할 수 있는 것이 최종 목표입니다.
전체 12건
1. OT
지금까지 배운 4개 코스를 왜, 어떻게 하나로 엮는지 전체 여정을 먼저 확인합니다
Frontend·Backend·DevOps·CI/CD를 각각 따로 배울 때와 달리, 실제 서비스에서는 이 네 가지가 동시에 얽혀 있다는 것을 사례로 확인합니다. 기획부터 배포·회고까지 12단계로 나뉜 프로젝트 로드맵을 미리 살펴봅니다.
2. 요구사항 정의와 기획
무엇을 만들지 정하고 사용자 스토리 형태로 요구사항을 구체화합니다
"~하는 사용자로서, ~을 하고 싶다"는 사용자 스토리 형식으로 기능을 구체화하고, 이번 프로젝트에서 반드시 구현할 범위와 나중으로 미룰 범위를 스스로 결정하는 우선순위 판단 훈련을 합니다.
3. 아키텍처 설계
프론트-백엔드-DB 사이를 데이터가 어떻게 오가는지 다이어그램으로 그립니다
코드를 한 줄도 쓰기 전에, 요청 하나가 프론트에서 시작해 백엔드·DB를 거쳐 다시 화면에 반영되기까지의 전체 경로를 다이어그램으로 먼저 그려보며 구현 중 길을 잃지 않도록 설계 감각을 기릅니다.
4. 데이터베이스 스키마 설계
요구사항을 실제 테이블 구조로 변환하고 관계를 정의합니다
사용자 스토리에 등장하는 명사(사용자, 게시글, 댓글 등)를 테이블로, 동사를 관계로 바꿔가며 ERD를 직접 그리고, Backend 코스에서 배운 정규화 원칙을 실제 스키마에 적용합니다.
5. API 명세 작성
프론트와 백엔드가 합의할 엔드포인트·요청/응답 형식을 문서로 정의합니다
백엔드 구현이 끝나기 전에 API 명세부터 문서로 합의해두면 프론트와 백엔드를 병렬로 진행할 수 있다는 것을 직접 경험하며, 명세가 바뀌었을 때 양쪽에 미치는 영향을 최소화하는 협업 방식을 익힙니다.
6. 백엔드 구현
API 서버와 DB 연동을 명세에 맞춰 직접 구현합니다
Backend 코스에서 다룬 라우팅·ORM·에러 핸들링을 실제 프로젝트 코드로 옮겨, 앞서 작성한 API 명세와 정확히 일치하는 엔드포인트를 구현하고 Postman 등으로 직접 검증합니다.
7. 프론트엔드 구현
API를 소비하는 UI를 컴포넌트 단위로 구현합니다
Frontend 코스에서 다룬 컴포넌트 설계·상태 관리·데이터 페칭을 실제 프로젝트에 적용해, 앞서 구현한 백엔드 API를 호출해 데이터를 받아 화면에 그리는 흐름을 완성합니다. 로딩·에러 상태 처리도 빠뜨리지 않습니다.
8. 인증 흐름 연동
프론트와 백엔드 사이에서 로그인 상태를 안전하게 공유합니다
로그인 후 발급받은 토큰을 프론트가 저장하고, 이후 요청마다 함께 보내 백엔드가 사용자를 식별하는 전체 흐름을 양쪽 코드를 오가며 연결합니다. 토큰 만료 시 자동 로그아웃 처리까지 다룹니다.
9. 컨테이너화
완성된 프론트·백엔드 애플리케이션을 Docker로 패키징합니다
DevOps 코스에서 익힌 Dockerfile·Compose를 이번 프로젝트에 그대로 적용해, 프론트·백엔드·DB를 각각 컨테이너로 묶어 어느 환경에서든 동일하게 실행되는 상태로 만듭니다.
10. CI/CD 파이프라인 연결
배포 자동화를 프로젝트에 적용해 Push만으로 배포되게 만듭니다
CI/CD 코스에서 구축한 파이프라인 패턴을 이번 프로젝트 저장소에 연결해, main 브랜치에 병합될 때마다 자동으로 빌드·테스트·배포가 이어지도록 실제로 동작시킵니다.
11. 배포와 모니터링
실제 서버에 올리고 도메인으로 접속해 서비스 상태를 관찰합니다
클라우드 서버에 실제로 배포한 뒤 도메인으로 접속해 처음부터 끝까지 정상 동작하는지 확인하고, 로그·모니터링 지표로 배포 직후 서비스 상태를 지켜보는 운영자의 시야를 경험합니다.
12. 회고와 개선
무엇이 잘 됐고 무엇을 개선할지 코드 리뷰를 통해 점검합니다
기획부터 배포까지 11주간의 과정을 되짚어보며 데이터 흐름 설계에서 막혔던 지점, 다시 설계한다면 바꾸고 싶은 부분을 정리하고, 1:1 코드 리뷰로 실제 현업 관점의 피드백을 받으며 훈련 과정을 마무리합니다.