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/develop 2-브랜치 배포 전략을 정립하고 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 + JdbcTemplate Batch 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로 차단되던 문제를 SecurityConfig permitAll 등록과 JwtAuthenticationFilter의 토큰 예외 허용 경로 처리로 해결, 온보딩 중 프로필 이미지 업로드 정상화
• 상품 카테고리 단일 선택 구조의 확장 한계를 product_category N: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