2024.07 — 2024.08개인 프로젝트

BOOT_UP

부트캠프 수강생 커뮤니티 — 백엔드 · 프론트 · DevOps 전 단계

맡은 일
Backend · Frontend(Vue) 리드 · DevOps (팀 5인, 단계별 역할 전환)
기간
2024.07 — 2024.08
소속
한화시스템 Beyond SW Camp

한화시스템 BEYOND SW캠프 수강생 전용 커뮤니티 플랫폼입니다. 캠프가 디스코드만 쓰고 있어 기수 간·수료자 간 소통이 끊긴다는 문제에서 출발해, 커뮤니티·공지사항·출결 알림·스터디룸 예약을 하나로 묶었습니다.

이 프로젝트의 특징은 같은 서비스를 단계별로 다시 만들었다는 점입니다 — 2차에서 Spring 백엔드를, 3차에서 Vue 프론트를, 마지막에 Docker·GitHub Actions 배포를 붙였습니다. 덕분에 하나의 도메인을 서버·화면·배포 세 시점에서 보게 됐고, 이후 프로젝트에서 백엔드와 이야기할 때의 기준이 여기서 생겼습니다.

제 첫 백엔드 프로젝트로 N+1 문제, DB 분산, AWS 구성, 모니터링까지 직접 부딪혀 봤고, 프론트 단계에서는 Vue 리드를 맡아, 백엔드를 함께 만든 팀원들과 화면을 나눠 맡고 API를 함께 맞춰 갔습니다.

Pl. 1서비스 구성 — Nginx로 Vue를 내보내고, 회원·게시글·채팅·예약을 각각의 EC2 위 Spring Boot로 나눴습니다. 채팅은 Kafka, 이미지는 S3, 데이터는 RDS(MySQL)에 둡니다.

핵심

  1. 01

    같은 서비스를 3단계로

    2차 Spring 백엔드 → 3차 Vue 프론트 → DevOps 배포까지 역할을 바꿔가며 수행

  2. 02

    첫 백엔드 프로젝트

    N+1 문제, MariaDB 이중화와 HAProxy 읽기 분산, AWS(EC2·RDS·S3) 구성, 모니터링까지 직접 다뤄 봄

  3. 03

    프론트 단계 리드

    백엔드를 함께 만든 팀원들과 Vue 화면을 나눠 맡고 API를 맞춰 감

  4. 04

    프론트 단계 커밋 54건

    통합검색, 마켓 찜·검색, 댓글·대댓글, 게시글 상세, 공지사항, 메인

나머지 4개 더 보기
  1. 05

    백엔드에서 QueryDSL 동적 쿼리와 검색 기능 구현

  2. 06

    전역 예외처리와 BaseResponse 성공·에러 코드 체계를 세워 응답 형태를 팀 전체가 공유

  3. 07

    DevOps 단계

    GitHub Actions(JDK 17 + Gradle) → Docker 이미지 빌드 → docker-compose로 백엔드·프론트 동시 기동

  4. 08

    PR·이슈 템플릿과 코드 컨벤션을 정해 5인 팀의 PR 기반 협업 규칙을 문서화

화면

좌우로 넘겨 보실 수 있습니다

Pl. 2of5

Pl. 2DB 분산 — MariaDB를 Active·Standby 마스터와 읽기 전용 슬레이브로 나눠, 쓰기는 마스터로 보내고 읽기는 HAProxy를 거쳐 슬레이브들로 나눕니다.
Pl. 3ERD — 회원을 중심으로 커뮤니티·중고거래·채팅·스터디룸 예약·캘린더가 이어집니다.
Pl. 4프로젝트 소개 — 기수별로 팀과 프로젝트를 모아 봅니다.
Pl. 5중고거래 채팅 — 왼쪽에 거래 중인 상품 목록, 오른쪽에 대화가 이어집니다.

설계 문서와 배포했던 서비스 화면입니다. 화면 속 팀원 이름은 가렸습니다.

자세히

궁금한 항목을 펼치면 그때 무엇이 문제였고 어떻게 판단했는지 나옵니다.

QueryDSL로 동적 쿼리를 구성해 게시판 검색 기능 구현

전역 예외처리 메시지와 BaseResponse 성공·에러 코드 체계를 세워, 화면이 응답 형태를 추측하지 않게 함

공지사항(NOTICE) 도메인의 엔티티·컨트롤러 구현과 반환 타입 정리

스터디룸 좌석 예약의 시간 타입을 재정의해 예약 충돌 판단을 단순화

feature 브랜치 + PR 기반 협업

PR·이슈 템플릿을 작성해 팀 규칙으로 정리

프론트 단계 리드를 맡아, 백엔드를 함께 만든 팀원들과 화면을 나눠 맡고 서버 쪽 사정을 아는 사람끼리 API를 맞춰 감

커뮤니티 게시판 전반

목록·상세·작성·수정, 댓글과 대댓글 조회를 화면에 연결

통합검색 구현

게시판·마켓·공지사항을 가로지르는 검색 화면 구성

마켓 찜하기와 마켓 검색 완성, 메인 페이지·공지사항 화면 정리

회원(User)·프로젝트 게시판·스터디 자리 예약 화면과 공통 레이아웃 작업

JWT를 HttpOnly로 다루고 액세스 토큰 만료를 1시간으로 두는 등, 팀 위키에 정리된 인증 정책에 맞춰 화면을 연결

배운 것

끝난 뒤에 남은 것들을 적었습니다.

제 첫 백엔드 프로젝트입니다. N+1 문제, DB 분산, AWS 세팅, 모니터링 시스템을 직접 해 보면서 프론트엔드 개발자로서 시야가 크게 넓어졌습니다.

API를 설계하고 백엔드를 세팅하며 익힌 것들은 실무에서 정말 많이 써먹었습니다. 서버와 백엔드를 아는 프론트엔드 개발자가 되면서 맡을 수 있는 일의 범위가 크게 늘었고, 백엔드 개발자들이 하는 고민을 저도 같이 하게 됐습니다. 이후 현업에서 협업할 때 가장 많이 꺼내 쓴 경험입니다.

팀원들이 정말 열정적이었습니다. 부트캠프에서 배우는 고급 기술을 하나라도 더 응용해 보느라 바빴고, 그냥 돌아가는 백엔드가 아니라 좋은 백엔드 코드를 짜려는 팀원들 덕분에 많이 성장했습니다.

프론트 단계에서는 리드로 Vue 작업을 맡았습니다. 백엔드와 터놓고 제대로 협업한 첫 경험이었고, 서로에게 정말 많은 도움이 됐습니다.

쓴 기술

JavaSpring BootQueryDSLGradleVue.jsJavaScriptWebSocketKafkaMySQLMariaDBHAProxyAWSAmazon S3NginxDockerGitHub

링크

이어서 볼 것

한화시스템 Beyond SW Camp에서 한 다른 프로젝트

이전

Argos

다음

CalIT