BOOT_UP
부트캠프 수강생 커뮤니티 — 백엔드 · 프론트 · DevOps 전 단계
Role: Backend · Frontend(Vue) · DevOps (팀 5인, 단계별 역할 전환)
Overview
한화시스템 BEYOND SW캠프 수강생 전용 커뮤니티 플랫폼입니다. 캠프가 디스코드만 쓰고 있어 기수 간·수료자 간 소통이 끊긴다는 문제에서 출발해, 커뮤니티·공지사항·출결 알림·스터디룸 예약을 하나로 묶었습니다. 특별한 점은 같은 서비스를 단계별로 다시 만들었다는 것입니다 — 2차에서 Spring 백엔드를, 3차에서 Vue 프론트를, 마지막에 Docker·GitHub Actions 배포를 붙였습니다. 덕분에 하나의 도메인을 서버·화면·배포 세 시점에서 보게 됐고, 이후 프로젝트에서 백엔드와 이야기할 때의 기준이 여기서 생겼습니다.
이 프로젝트의 핵심
같은 서비스를 3단계로
2차 Spring 백엔드 → 3차 Vue 프론트 → DevOps 배포까지 역할을 바꿔가며 수행
프론트 단계 커밋 54건
통합검색, 마켓 찜·검색, 댓글·대댓글, 게시글 상세, 공지사항, 메인
백엔드에서 QueryDSL 동적 쿼리와 검색 기능 구현
전역 예외처리와 BaseResponse 성공·에러 코드 체계를 세워 응답 형태를 팀 전체가 공유
나머지 2개 더 보기접기
DevOps 단계
GitHub Actions(JDK 17 + Gradle) → Docker 이미지 빌드 → docker-compose로 백엔드·프론트 동시 기동
PR·이슈 템플릿과 코드 컨벤션을 정해 5인 팀의 PR 기반 협업 규칙을 문서화
자세히
2차 — Spring 백엔드5
QueryDSL로 동적 쿼리를 구성해 게시판 검색 기능 구현
전역 예외처리 메시지와 BaseResponse 성공·에러 코드 체계를 세워, 화면이 응답 형태를 추측하지 않게 함
공지사항(NOTICE) 도메인의 엔티티·컨트롤러 구현과 반환 타입 정리
스터디룸 좌석 예약의 시간 타입을 재정의해 예약 충돌 판단을 단순화
feature 브랜치 + PR 기반 협업
PR·이슈 템플릿을 직접 작성해 팀 규칙으로 고정
3차 — Vue 프론트엔드 (커밋 54건)5
커뮤니티 게시판 전반
목록·상세·작성·수정, 댓글과 대댓글 조회를 화면에 연결
통합검색 구현
게시판·마켓·공지사항을 가로지르는 검색 화면 구성
마켓 찜하기와 마켓 검색 완성, 메인 페이지·공지사항 화면 정리
회원(User)·프로젝트 게시판·스터디 자리 예약 화면과 공통 레이아웃 작업
JWT를 HttpOnly로 다루고 액세스 토큰 만료를 1시간으로 두는 등, 팀 위키에 정리된 인증 정책에 맞춰 화면을 연결
DevOps — 단독 수행4
GitHub Actions 워크플로 작성
JDK 17 설정, Gradle 셋업, gradlew 권한 부여 후 Docker 이미지 빌드까지 자동화
openjdk:17 기반 Dockerfile로 Spring 애플리케이션 이미지화 (JAR을 빌드 인자로 주입)
docker-compose로 백엔드(8080)와 프론트엔드(3000)를 함께 띄우는 구성 작성
main 브랜치 push를 트리거로 두어 코드가 올라가면 빌드가 도는 상태까지 만듦
팀 문서화3
백엔드 위키 8편
API 명세(Swagger), 시퀀스 다이어그램, 기능 테스트, 코드 컨벤션, 시스템·소프트웨어 아키텍처, 성능 개선
프론트 위키 5편
시스템 아키텍처, 주요 적용 기술(JWT·WebSocket/STOMP·Vue 선택 근거), 상세 기능, 코드 컨벤션
기술 선택에 근거를 남기는 방식
'Vue를 왜 골랐는가'를 React와 비교해 팀의 상황(JS 숙련도, 남은 기간) 기준으로 서술