만들고 검증하며 성장하는 프론트엔드 개발자, 조현돈입니다.
About Me
배운 내용과 시행착오를 기록하고 공유합니다.
- •IT 동아리 신입 부원을 대상으로 Git 브랜치 전략과 커밋 컨벤션 세션을 준비하면서, 브랜치 전략과 커밋 컨벤션을 사용하고 있었지만, 각각의 기준과 이유를 설명하는 데 어려움이 있었습니다. 이를 계기로 배운 내용과 문제를 해결한 과정을 기록하기 시작했고, 기술 블로그 120편 이상을 작성하고 유튜브 쇼츠 8편을 제작했습니다.
반복을 줄여 생산성을 높이기 위해 AI를 활용합니다.
AI를 코드 생성만 사용하지 않고, 계획 → 구현 → 검증 과정에서 결과를 확인할 수 있는 도구로 활용합니다.
- 1.FSD 구조에서 계층 간 import와 Public API 규칙 위반을 반복해서 확인하는 반복 작업을 줄이기 위해, 정적 규칙으로 1차 필터링하고 애매한 케이스는 Claude Code로 판단하는 검증 도구를 만들었습니다. GitHub Actions에 연동해 PR마다 규칙 위반과 E2E 테스트, 주요 기능 동작을 자동으로 확인했습니다.
- 2.사부작사부작에서 AI로 코드를 수정할 때 예상하지 않은 파일까지 변경되는 경우를 줄이기 위해 Plan-First Workflow를 적용했습니다. Playwright MCP로 주요 사용자 흐름을 확인해 테스트 시나리오를 정리하고 E2E 테스트 30건을 구축했습니다.
Projects
BlogAi - AI 기술 블로그 작성 플랫폼
2026.01 ~ 2026.06
Next.js 16, TypeScript, Supabase, FSD
프로젝트 개요 및 개발 중점
멋쟁이사자처럼 인턴십 17기에서 블로그 글 120편을 작성하며 반복적으로 글 구조를 설계하는 불편을 줄이기 위해 만든 AI 기술 블로그 작성 서비스입니다. 기획 설계 개발 배포까지 단독으로 진행했으며, 생성 과정의 상태 유지와 체감 응답 속도, 서비스가 커져도 유지할 수 있는 구조를 중점적으로 개선했습니다. 인턴십 종료 후에도 개인적으로 리팩토링을 이어가고 있습니다.
주요 개선
- •useSyncExternalStore로 sessionStorage 기반 생성 상태를 동기화해 SSR/CSR 하이드레이션 불일치를 해결하고, 페이지 이동 후에도 생성 상태를 유지하도록 개선했습니다. (Link)
- •React 19 useOptimistic을 적용해 글 삭제 UI 반영 시간을 2.4초 → 0.3초로 단축했습니다. (Link)
- •폰트 서브셋과 favicon 캐싱 설정을 점검해 폰트 리소스 4,090KB → 1,048KB로 경량화하고, favicon 요청 시 발생하던 비정상적인 로딩 지연을 해결했습니다. (Link)
- •FSD 검증과 GitHub Actions CI를 구축해 cross-import 위반 6건 → 0건, Public API 커버리지 9.5% → 100%로 개선하고, PR마다 빌드 E2E 아키텍처 규칙을 자동 검증하도록 구성했습니다.
사부작사부작 - 사회초년생 커뮤니티 플랫폼
2025.01 ~ 2025.04
Next.js 16, TypeScript, Supabase
프로젝트 개요 및 개발 중점
사회초년생이 커뮤니티와 청년정책,금융, 직업 정보를 한곳에서 확인할 수 있는 서비스입니다. 디자이너 2명, 백엔드 개발자 1명과 협업해 프론트엔드를 담당했으며, 외부 API와 대량 데이터를 사용하는 기능의 응답 시간과 사용자 액션의 체감 지연을 줄이는 데 중점을 두었습니다.
주요 개선
- •금융교육, 직업정보 위젯에 Next.js fetch 캐싱(revalidate: 3600)을 적용해 캐시 히트 시 약 2,400ms의 외부 API 요청을 생략했습니다. (Link)
- •청년정책 2,000건 전체 조회 구조를 Supabase DB 동기화와 서버 페이지네이션(9건/페이지)으로 전환해 응답 시간을 2,448ms → 68ms로 97% 단축했습니다.
- •useOptimistic, startTransition을 적용해 댓글 수정, 삭제의 1~2초 UI 반응 지연을 제거하고 요청 실패 시 이전 상태로 롤백하도록 구현했습니다.
- •Playwright MCP 기반 테스트 생성 검증 흐름을 구축해 홈 화면 주요 사용자 흐름에 대한 E2E 테스트 30건을 확보했습니다.
Experience
멋쟁이사자처럼 인턴십 17기
2026.02 – 2026.03
- •BlogAI를 기획, UI 설계부터 프론트엔드, 백엔드 개발, 배포까지 단독으로 진행했습니다. (자세한 내용은 위 Projects 섹션 참고)
- •중간 QA에서 발견한 사용자 흐름과 UI 문제를 우선순위에 따라 개선하며, 기능 구현 이후에도 사용성을 검증했습니다.
SWYP Web 11
2026.01 – 2026.03
- •PM, 디자이너, 백엔드 개발자와 문서 번역 서비스를 개발하며 요구사항, 구현 범위, 화면 상태, API 응답 형식을 조율했습니다.
- •소셜 로그인 완료 후 리다이렉트되는 과정에서 인증이 유지되지 않는 오류가 발생해, 요청에 인증 정보(credentials)를 포함하도록 프론트엔드 설정을 조정하고 네트워크 요청과 백엔드 쿠키/CORS 설정까지 함께 점검해 백엔드 설정 문제였던 근본 원인을 파악하고 해결했습니다.
멋쟁이 사자처럼 8기 프론트엔드 스쿨
2024.08 – 2025.03
- •HTML, CSS, JavaScript부터 React, TypeScript까지 학습하며 프론트엔드 개발의 기초를 익혔습니다.
- •팀 프로젝트를 통해 Git 기반 협업과 컴포넌트 설계, API 연동, 배포까지 웹서비스 개발의 전체 흐름을 경험했습니다.
Activities
GDG on Campus | Core Member, Frontend Lead
2025.01 – 2026.07
- •프론트엔드 리드로 부원들의 개발 진행을 지원하고, Git Flow와 GitHub Flow를 비교한 브랜치 PR 전략 세션을 진행했습니다.
Blaybus Hackathon
2026.01 – 2026.02
- •React와 Three.js를 활용해 3D 공학 데이터를 웹에서 시각화하는 핵심 화면과 사용자 흐름을 구현했으며, 일주일 내 MVP를 완성해 예선을 통과하고 본선에 진출했습니다.
Skills
- •Language: JavaScript, TypeScript
- •Framework: React, Next.js (App Router)
- •State/Data: TanStack Query, Zustand
- •Styling: Tailwind CSS, styled-components
- •Backend/Infra: Supabase, Vercel
- •Tools: Git, GitHub Actions, Playwright, Claude Code, Cursor
Education
대진대학교 | 경제학 전공, 컴퓨터공학 복수전공 (2018.03 ~ 2025.08)