Design. Build.
Optimize.
" 실패를 두려워하지 않고 코드의 흐름을 빠르게 읽고 문제점을 파악하여 "
바로 개선할 수 있는 개발자입니다.
About Me
**End-to-End 기능 구현** 경험이 있으며, 특히 **OAuth** 위임(소셜 로그인) 및 **S3 Presigned URL** 최적화를 수행했습니다.
유지보수 가능한 깔끔한 코드를 작성하고 확장 가능한 시스템을 구축하는 것을 중요하게 생각합니다. 현재는 Next.js와 클라우드 아키텍처를 활용한 모던 웹 스택 마스터에 집중하고 있습니다.
Experience
풀스택 트랙 @ 코드잇
강도 높은 풀스택 개발 부트캠프를 수료했습니다. 프로젝트 기반 학습에 집중하였으며, 다수의 프로젝트를 성공적으로 완수했습니다.
운영 지원 (프론트엔드) @ 한국교육평가원
프론트엔드 유지보수 및 운영 지원을 담당하며 시스템 안정성과 사용자 만족도 향상에 기여했습니다.
반응형 웹 디자인 과정 @ 대우직업능력개발원
HTML/CSS 레이아웃 기법과 반응형 디자인 원칙을 마스터했습니다.
Personal Projects
개인적으로 기획부터 배포까지 전 과정을 주도한 프로젝트입니다.
오롯이 (orosi)
집중 공간 실시간 혼잡도 서비스
서울 전역의 카페, 도서관, 공원, 코워킹 스페이스의 실시간 혼잡도를 제공하는 집중 공간 탐색 서비스입니다. 서울시 공공데이터 API와 사용자 투표를 결합해 지금 이 순간 가장 여유로운 공간을 추천합니다.
주요 기능
서울시 공공데이터 API와 사용자 피드백을 결합한 실시간 혼잡도 분석
현재 위치 기반 카카오맵 연동으로 가까운 집중 공간을 한눈에 확인
시간대별 패턴 분석으로 카페·도서관·공원 중 가장 여유로운 공간 추천
IP 해시 기반 중복 방지로 실제 체감 혼잡도를 반영한 커뮤니티 데이터 수집
기술 스택
AI-Assisted Development
Claude CodeStop Hook 세션 로그 강제화
세션 종료 시 stop.sh가 실행되어 오늘 날짜 로그 파일이 없으면 exit 1로 Claude에게 피드백을 전달 — 작업 내역 누락 원천 차단
CLAUDE.md 컨텍스트 자동 주입
FSD 구조·기술 스택·컨벤션·토큰 절약 전략을 CLAUDE.md에 문서화해 매 세션마다 재입력 없이 일관된 코딩 패턴 유지
Memory 시스템으로 장기 컨텍스트 관리
.claude/memory/sessions/에 날짜별 세션 로그를 축적해 이전 미해결 이슈·수정 파일·다음 할 일을 다음 세션에 자동 전달
커스텀 슬래시 스킬 자동화
/commit으로 Conventional Commits 형식 커밋 자동 생성, /review-pr로 PR 코드 리뷰 자동화해 반복 작업 제거
Supabase MCP 서버 연동
settings.json에 MCP 서버를 등록해 자연어로 DB 스키마 탐색·SQL 실행·마이그레이션 관리
주요 기능
커밋 패턴, 사용 기술, 코드 품질을 AI가 종합 평가
시장 데이터와 경력 기반 예상 연봉 범위 산출
GitHub 프로필 기반 맞춤형 기술 면접 질문 자동 생성
스킬셋 기반 다음 프로젝트 아이디어 제안
기술 스택
Featured Projects
풀스택 개발 기술을 활용하여 성능과 사용자 경험에 중점을 두고 개발한 팀 프로젝트들입니다.
Backend
- Passport 기반 소셜 로그인(구글/카카오/네이버) OAuth 인가 위임 흐름을 USER/DRIVER 타입 분리 정책에 맞게 설계
- state 인코딩으로 type·redirectOrigin을 Provider에 전달, 콜백에서 디코딩하여 타입 복원
- redirectOrigin을 CORS allowlist 기반으로 OAuth start/callback 2중 검증하여 오픈 리다이렉트 차단
- S3 Presigned URL(PUT) 발급 → 짧은 만료 + Content-Type 검증으로 서버 부하 제거, private bucket에 object key 저장
Frontend
- 여러 패턴의 카드디자인 컴포넌트 제작 및 기사님/사용자용 프로필 UI 구현
- 소셜 로그인 시 sessionStorage에 기대 타입 저장, GET /auth/me로 실제 타입과 비교하는 방어 로직 구현
- hasProfile 기반 프로필 설정 페이지 자동 유도로 가입 전환 UX 최적화
- Presigned URL 플로우(URL 발급 → S3 업로드 → object key 저장)를 사용자 화면에 자연스럽게 연결
Tech Stack
Backend
- AWS S3 활용 이미지 저장 시스템 구축 — 원본·워터마크 이미지 안정적 업로드
- Sharp 라이브러리로 리사이즈/워터마크 합성, 파일 기반 → 버퍼 방식 전환으로 성능 최적화
- 마이갤러리 전체 API 개발 — 등급별 개수 계산, 포인트 차감, 날짜 처리 로직 포함
- checkQuantity 미들웨어 분리 — 판매 가능 수량과 거래 중 수량을 정밀 계산하여 초과 판매글 생성 방지
Frontend
- ESLint/Prettier/Husky 기반 코드 품질 관리 환경 초기 세팅 + TailwindCSS 글로벌 세팅 및 폴더 구조 설계
- React Query + Zustand 도입으로 서버/클라이언트 상태 분리 관리 구조 구축
- 마이갤러리 페이지 — 검색·필터링·페이지네이션 + 포토카드 생성/관리 인터페이스 개발
- 재사용 가능한 커스텀 드롭다운, 버튼 컴포넌트, 외부 클릭 감지 훅 제작
Tech Stack
Backend
- 스터디 CRUD 기능 구현 및 이모지 생성·토글 기능 개발
- 집중 시간에 따른 포인트 집계 로직 설계
- Prisma 활용 데이터베이스 스키마 정의 및 ERD 작성
Frontend
- Atom 단위 컴포넌트(이모지, 태그, 드롭다운) 제작 및 스터디 상세 페이지/모달/토스트 UI 구현
- 텍스트 오버플로우, 인풋 크기, 상태 관리 로직 수정 등 UI/UX 이슈 개선
- 모든 페이지 반응형 padding 조정으로 사용자 경험 보완
Tech Stack
Previous Works
웹 퍼블리셔 및 프론트엔드 유지보수 업무를 수행하며 작업했던 프로젝트들입니다.
Let's work together
현재 새로운 기회를 찾고 있습니다. 궁금한 점이 있거나 인사를 나누고 싶으시다면, 언제든 편하게 연락주세요! 최대한 빠르게 답변 드리겠습니다.
dlrhkdcp11@gmail.com