Hi, I'm ToKyun

Frontend Developer

About Me

UI/UX를 중요하게 여기는 프론트엔드 개발자 김도균입니다.
실패했을 때 좌절하지 않고, 미래를 위해 노력하는 목표지향적 가치를 중시합니다.
높은 학구열로, 지금 이 순간에도 끊임 없이 학습하고 있습니다.
성공적인 협업을 위해 지속적인 소통은 매우 중요하다고 생각합니다.

Profile

My Projects

Epigram

Epigram

하루 한 번 짧은 격언(에피그램)을 작성하고 감정을 기록·공유하는 소셜 플랫폼

Epigram

E2E 테스트로 Safari 크로스 브라우저 이슈를 발견·해결하고, variant 기반 공용 컴포넌트를 설계한 프로젝트

Next.jsTypeScriptTanStack QueryzustandReact-Hook-FormzodPlaywrightJestStorybook
Taskify

Taskify

GitHub Projects처럼 칸반 보드 및 칼럼별 이슈를 관리하는 협업 플랫폼

Taskify

BFF 패턴으로 XSS를 원천 차단하고, TanStack Query 캐싱 전략을 설계한 프로젝트

Next.jsTypeScriptTanStack QueryReact-Hook-Formzod@hello-pangea/dndzustand
Open Mind

Open Mind

CRUD 기능을 활용한 CSR 기반 익명 소통 플랫폼

Open Mind

CLS 이슈를 직접 발견·개선하고, 35개 파일을 일괄 점검하며 배포 품질을 높인 프로젝트

ReactReact RouterInfinite ScrollGitHub ActionsHusky

Skills & Expertise

Frontend Development

React & Next.js

서버 컴포넌트·서버 액션을 이해하고 활용합니다. TanStack Query의 stale-while-revalidate 전략과 queryKey 계층화로 서버 상태를 관리합니다. React-Hook-Form과 zod 스키마를 단일 진실의 원천으로 활용하여 유효성 규칙·타입·에러 메시지를 한 곳에서 관리합니다. generateMetadata를 활용하여 페이지별 SEO를 최적화합니다.

전역 UI 상태

zustand나 Context API를 사용하여 Toast·Modal 등 전역 UI 상태를 관리합니다. zustand를 활용한 모달 상태 관리로 컴포넌트 간 의존성을 낮추고 재사용성을 높였습니다.

TypeScript

any 타입을 지양하고, 추론이 어려운 경우 unknown으로 대체합니다. zod 스키마와 safeParse를 활용하여 런타임 타입 안정성을 확보합니다.

UX

사용자 경험을 최우선으로 고려합니다. CLS(Cumulative Layout Shift)·Skeleton UI·Loading Spinner 등 Core Web Vitals를 고려하여 컴포넌트를 설계합니다.

UI 컴포넌트 설계

shadcn 설계 방식을 참고하여 variant 기반 공용 컴포넌트를 설계합니다. cva()·clsx·tailwind-merge를 활용하여 props 조합만으로 모든 상태를 표현할 수 있는 재사용 가능한 컴포넌트 시스템을 구축합니다.

Testing & Quality

E2E 테스트

Playwright로 Chrome·Firefox·Safari 3개 브라우저 크로스 브라우징 검증을 자동화합니다. E2E 테스트를 통해 WebKit의 Secure 쿠키 이슈 등 브라우저별 엣지 케이스를 발견하고 해결한 경험이 있습니다.

단위·통합 테스트

Jest로 컴포넌트 단위 테스트 및 통합 테스트를 작성합니다.

Storybook

MDX를 활용하여 공용 UI 컴포넌트를 시각화·문서화합니다. 각 컴포넌트의 다양한 상태를 Story로 명세하여 팀 내 시각적 불일치와 회귀를 방지합니다.

Error Monitoring

Sentry를 통해 오류 모니터링을 수행합니다. 불필요한 에러 리포팅을 개선하고, throw 대신 nullish return handling·토스트 안내로 대체하는 방향을 제안한 경험이 있습니다.

Tools & Collaboration

Version Control

GitFlow·GitHub Flow 등 브랜치 전략을 이해하고 적용합니다. rebase·squash merge로 선형적 커밋 히스토리를 관리하며, 코드 리뷰를 팀 성장의 핵심으로 여깁니다.

일정 및 Task 관리

Jira·GitHub Projects·Notion 등 협업 툴을 활용합니다. GitHub Actions와 Jira를 연동하여 이슈 자동화 파이프라인을 구축한 경험이 있습니다.

스타일링

Tailwind CSS·CSS Modules·CSS-in-JS를 상황에 맞게 사용합니다. Mobile First 원칙을 지켜 반응형 웹을 구현합니다.

Work Experience

(주)비바리퍼블리카 · Deus Team

Frontend Developer Assistant (인턴)  |  2025.04 – 2025.10

E2E Testing

사용자 인터랙션이 빈번한 웹 애플리케이션에 E2E 테스트를 작성하여 배포 전 버그를 사전에 검출했습니다. 테스트가 실제로 프로덕션 버그를 잡아내는 경험을 통해 테스트 코드의 가치를 체감했습니다.

Agile Process

Jira·Linear·Slack을 활용한 스프린트 기반 프로젝트 관리에 참여했습니다. GitHub Actions와 Jira를 연동하여 PR Close 시 이슈가 자동 동기화되는 파이프라인 구축 경험이 있습니다.

UX Perspective

사용자 입장에서 불편함을 먼저 발굴하고 개선안을 제안합니다. 캔버스의 초기 카메라 설정에서 겪는 불편 사항을 직접 발견하여 팀에 제안·반영한 경험이 있습니다.

Error Monitoring

Sentry를 통해 오류 모니터링을 수행하며, 보고가 불필요한 에러를 리스트업하고 개선했습니다. Error를 throw하여 보고하는 방식 대신 nullish return handling이나 토스트 안내로 대체하는 방향을 팀에 제안하여 노이즈를 줄인 경험이 있습니다.