Backend & Frontend Engineer · Seoul, South Korea 🇰🇷
🐙 GitHub · 📫 cjbormk11@gmail.com
Spring Boot 기반 서버 개발과 React 기반 웹 프론트엔드를 모두 다룹니다.
API 설계 · 인증/보안 · 관측 가능성(Observability) · CI/CD까지 서비스가 실제로 굴러가는 구간에 관심이 많습니다.
일정 : 2026.08 ~ 2026.09
기술 스택 : React 19, TypeScript 6, Vite 8, Tailwind CSS 4, TanStack Router, TossPayments SDK, html-to-image, qr-code-styling, Oxlint, pnpm, AWS Amplify
참여 인원 : 3인 (프론트엔드 1인)
서비스 : 오프라인 매장의 네컷사진 촬영부터 결제 · 프레임 제작 · 인쇄 · QR 다운로드까지 이어지는 키오스크 웹 서비스
설계 기준 : 아이패드 키오스크(Safari/WebKit) 단일 디바이스 환경, 세션 기반 스텝 만료 처리 및 이미지 캡처 파이프라인 최적화
- 키오스크(Safari/WebKit)에서 오프스크린 프레임 캡처 시 사진 · QR이 누락되고 배경만 렌더링되던 문제를, 캡처 컨테이너를
-9999px이동 방식에서 뷰포트 원점 +w-0 h-0 overflow-hidden방식으로 전환하고 고정setTimeout대기를document.fonts.ready+ 더블requestAnimationFrame조건 대기로 교체하여 해결, 인화 이미지 누락 현상 제거 - 느린 네트워크 환경에서 S3 외부 이미지 로딩 완료 전 캡처가 실행되어
toBlob이null을 반환, 최종 이미지 업로드 요청 자체가 발생하지 않던 장애를 캡처 직전 노드 내 모든<img>의decode()완료 대기 로직으로 보완하여 업로드 실패 차단 - 프론트엔드가 백엔드 에러 응답의
code값이 아닌 Java enum 상수명을 비교하고 있어 이미 구현된 재시도 · 안내 로직이 무력화되어 있던 문제를, 실제 코드(SESSION_404_2,PRINT400_5) 기준으로 정정하고 2초 간격 최대 5회 재시도를 적용하여 파트너 배정 · 인쇄 조회 실패 복구 - AWS Amplify 빌드가
pnpm: command not found및 corepack 캐시 불일치로 인한MODULE_NOT_FOUND로 실패하던 문제를amplify.yml빌드 스펙 작성 및packageManager버전 고정(pnpm@11.21.0)으로 해결하여 배포 파이프라인 안정화 - TossPayments 결제 방식을 주문서형(위젯 인라인)에서 결제창형(오버레이) 으로 전환하고, 승인 완료 시 자동으로 다음 스텝(관계 선택)으로 진입하도록 개선하여 키오스크 조작 단계 축소
GET /sessions/{id}/status폴링 기반 서버 동기화 타이머(useCountdown,useStepExpiry)를 도입하여 스텝별 만료 시 자동 선택 · 초기화 · 결제창 취소 등 상태 전이 처리- 경량 FSD(Feature-Sliced Design) 아키텍처(
app → routes → features → shared단방향 의존)와cva기반 공용 UI 컴포넌트 · 디자인 토큰 체계를 수립하여 프론트엔드 구조 표준화 - 이슈 기반 워크플로우와
main/develop2-브랜치 배포 전략을 정립하고 README 개발 가이드를 문서화하여 협업 규칙 정착
일정 : 2026.06 ~ 2026.08
기술 스택 : Java 21, Spring Boot 4.1, Spring Security 7.1, Spring Data JPA, MySQL, AWS S3 (SDK v2), Docker, GitHub Actions, Nginx, Swagger(Springdoc), Prometheus, Grafana, Loki, Tempo
참여 인원 : 8인 (백엔드 4인)
서비스 : 받는 사람이 원하는 선물을 공유하면 친구들이 링크로 참여해 마음과 금액을 함께 모으는 선물 펀딩 서비스
설계 기준 : 데모데이 실사용 트래픽 대응, 100만 건 규모 부하 테스트 데이터셋 기반 성능 검증 및 3-Pillar Observability 체계 구축
- 장애 발생 시 로그 · 메트릭 · 트레이스가 분리되어 원인 추적이 불가능하던 문제를 Prometheus(메트릭) + Loki(로깅) + Tempo(분산 트레이싱) 연동으로 해결, Logback MDC에
traceId/spanId를 주입하고 Grafana Derived Fields로 Logs ↔ Traces 상호 이동을 구성하여 Metrics-Logs-Traces 3-Pillar Observability 체계 확립 - 부하 테스트를 위한 대량 데이터 확보가 불가능하던 문제를
CommandLineRunner+JdbcTemplateBatch Insert 기반 목 데이터 Runner로 해결, 인덱스 해시 및 다층 무작위 조합 알고리즘으로 100만 건 무중복 데이터 주입을 보장하고@Profile("mock-data")+mock-data.scale로 스케일(1.0x / 0.1x / 0.01x) 동적 제어 - 사용자가 계좌번호만 입력해도 은행을 자동 인식해야 하는 요구를 KFTC 계좌 템플릿 및 Y-Code 과목코드 패턴 규칙 엔진(
BankDetector) 으로 구현하여 22개 금융기관 추론 API(POST /api/v1/banks/detections) 완성 - 11-14자리 계좌 입력 시 프리픽스를 검증하지 않는 규칙 때문에 7-9개 은행이 동시 추천되던 오추천 현상을, 추론 규칙을
List<DetectionRule>선언적 테이블로 구조화하고 신뢰도(HIGH/LOW) 기반 필터링을 도입하여 단일 은행 추론으로 정정, 정밀도 검증 테스트(detectPrecisionTest) 신설 - 전역 예외 핸들러가
Exception메시지를 그대로 응답에 노출하고DataIntegrityViolationException을 무조건 409로 반환하던 보안 · 정확성 문제를, 내부 메시지 차단 및 유니크 제약 위반만 409로 분리하는 방식으로 개선하여 에러 응답 규격 표준화 - 회원가입 진행 중(비회원 상태) S3 Presigned URL 발급이 401로 차단되던 문제를
SecurityConfigpermitAll 등록과JwtAuthenticationFilter의 토큰 예외 허용 경로 처리로 해결, 온보딩 중 프로필 이미지 업로드 정상화 - 상품 카테고리 단일 선택 구조의 확장 한계를
product_categoryN:M 매핑 엔티티로 개편하고LEFT JOIN기반 카테고리 필터링 쿼리를 적용하여 다중 카테고리 및 인기 통계 정렬 지원 - 선물 준비 임시 저장(
IndividualFundingDraft,FundingTogetherDraft) Upsert API를 구현하고 날짜 유효성 · 계좌 소유권 검증 및 연관 선물 리스트 Cascade 삭제 처리 - REST API 환경에 맞춰
SessionCreationPolicy.STATELESS전환 및 CORS · 소셜 로그인(구글/카카오) · 비회원 공개 API 경로를 세분화한SecurityConfig설계 Dockerfile및 GitHub Actions 기반 CI/CD 파이프라인을 구축하고 Nginx 프록시 헤더 설정을 적용하여 배포 자동화,v1.0.0정식 배포 수행
일정 : 2026.04 ~ 2026.08
기술 스택 : React 19, TypeScript, Vite, TanStack Query, TanStack Router, Zustand, React Hook Form, Zod, Tailwind CSS, shadcn/ui, dnd-kit, Motion, AWS Amplify
참여 인원 : 12인 (프론트엔드 4인)
서비스 : 모집 공고 등록부터 지원 · 서류/면접 평가 · 팀 매칭 · 활동 관리까지 리크루팅 전 과정을 하나로 연결하는 웹 플랫폼
설계 기준 : 운영진 · Plan 챌린저 · 일반 챌린저 3중 역할 기반 권한 분기, 지부/학교 단위 멀티 테넌시 데이터 모델
- 지부 목록이 프론트엔드 코드 전반에 상수로 하드코딩되어 신규 지부 추가 시마다 코드 수정이 필요하던 구조적 문제를,
GET /v1/chapters/with-schools기반useSchoolChapterMap훅으로 전환하고Chapter타입을string으로 확장하여 클라이언트 수정 없이 신규 지부가 동적 반영되도록 개선 - 평가 담당자 배정 페이지 진입 시 접속자 소속과 무관하게
groups[0](특정 학교)이 고정 선택되어 타 학교 운영진이 노출되던 권한 문제를,me.schoolId기반mySchoolGroup탐색 로직으로 해결하고 진행 중인 모집 차수가 없을 때의 빈 상태 안내를 추가 - 학교 회장 권한 계정이 모집 인원(TO)을 저장할 때 권한 없는 타 학교 API 요청까지 함께 전송되어 403으로 실패하던 문제를 요청 범위 제한으로 해결, 권한별 저장 플로우 정상화
- OAuth 첫 로그인 시 유저 상태가 반영되지 않던 현상을 콜백 처리 및 쿼리 캐싱 구조로 보완하고, 이메일 인증번호 오기입 시 로그인 화면으로 강제 이동하던 인터셉터 오동작을 인증 요청 경로 예외 처리로 수정하여 온보딩 안정화
- 학교 · 지부 목록 등 변동이 적은 데이터의 반복 API 호출을 TanStack Query 캐싱 훅으로 일원화하고 내 정보 · 활성 기수 정보를 캐싱하여 렌더링 응답성 개선
- 프로젝트 필터 선택 후 새로고침 시 상태가 초기화되던 현상을 URL Query Parameter 동기화로 해결하여 동일 필터 뷰 공유 및 탐색 UX 개선
- 프로젝트 수정 시 임시저장(DRAFT)에서 검토대기(PENDING REVIEW)로 상태 전이되지 않던 오류를 캐시 무효화 및 예외 처리 보완으로 해결하여 신청/수정 워크플로우 정상화
- 지원 현황 집계에서 iOS · Android가 누락되던 문제, 지부장/회장단 권한별 조회 범위 불일치, 프로젝트 멤버 수동 배정 시 하위 파트가 Frontend로 고정되던 오류 등 권한 · 집계 도메인 로직 결함을 연속 수정
- 공지사항 로딩 시 Layout Shift를 전용 Skeleton UI로 해결하고, 공지 본문 마크다운(리스트 · 볼드) 렌더링 및 회원가입 이름 유효성 검증(공백 trim · 10자 제한) 등 사용성 개선 다수 반영
- 외부 클릭 감지 로직을
useClickOutside훅으로 일원화하고 미사용 store를 정리하여 전역 이벤트 처리 구조 통합
일정 : 2025.12 ~ 2026.02
기술 스택 : React, TypeScript, Tailwind CSS, TanStack Query, Framer Motion, Axios, Vite, Vercel
참여 인원 : 8인 (프론트엔드 4인)
서비스 : 사소한 일상까지 루틴으로 기록하면 '루틴나무'에 열매가 맺히고, 통계와 친구 공유로 습관 형성을 돕는 모바일 웹 서비스
설계 기준 : 모바일 웹 브라우저 전용 반응형 환경, 일간/주간/월간 통계 API 응답 시각화
- 모바일 브라우저 접속 시 상하단 시스템 바 배경색이 페이지와 달라 몰입감이 저해되던 문제를 뷰포트 메타 태그 및 글로벌 CSS 통일 설정으로 해결하여 일관된 UI 제공
- 통계 데이터 로딩 중 시각적 피드백이 없어 이탈 위험이 있던 구간에 전용 로딩 스피너 UI를 구현하여 체감 대기시간 개선
- 루틴 트래커 · 성취도 통계 API 응답 처리를 TanStack Query 기반 구조로 전환하여 일간/주간/월간 달성률 동적 렌더링 구현
- 친구 검색 · 신청 · 수락 · 삭제 및 친구 루틴나무/아카이브 조회 API를 연동하고 라우팅을 구성하여 소셜 기능 완성
- 루틴나무 메인 페이지 및 마이페이지 전체 퍼블리싱, Framer Motion 기반 인터랙션과 공용 모달(로그아웃 · 공개설정 · 차단해제 · 회원탈퇴) 컴포넌트 구현
동국대학교 서울캠퍼스 (Dongguk University, Seoul, South Korea)
- 전공: 컴퓨터공학전공
- 기간: 2021.03 ~ 2027.08 (학사 졸업 예정)
- UMC (University MakeUs Challenge) 9th: Web Challenger | 2025.09 ~ 2026.02
- UMC (University MakeUs Challenge) 10th: Spring Boot Challenger | 2026.03 ~ 2026.08
- UMC (University MakeUs Challenge) 10th: Product Team Web Part | 2026.03 ~ 2026.08
