안녕하세요,
프론트엔드 개발자 하유경입니다.
데이터 흐름을 파악하여 상태와 UI가 분리된 구조를 설계합니다.
공용 컴포넌트화로 복잡도를 낮추고, 렌더링 최적화로 사용자 경험을 개선합니다.
풀스택 경험을 바탕으로 효율적인 API 인터페이스를 고민하는 협업을 지향합니다.
프로젝트
2026.01 - 2026.03
Noiton | 노션 템플릿 공유 사이트
Next.js App Router를 활용해 대량의 노션 템플릿 리소스를 효율적으로 관리하고 탐색할 수 있는 서비스입니다. 이미지 렌더링 최적화를 통한 초기 진입 속도 개선과 Google OAuth 기반의 인증 시스템 구축 등 1인 개발자로서 설계부터 배포까지 전 과정을 주도했습니다.
Vercel
Next.js
Supabase
TypeScript
TailwindCSS
Redux
FigmaStreaming SSR및 이미지 포맷 최적화를 적용하여 대량 리소스로 인한 초기 로딩 지연 문제를 해결하고, LCP를 약 75% 단축 (9.8s → 2.4s)Next.js&Supabase기반 데이터 아키텍처 설계로 서버 컴포넌트 기반 데이터 흐름 설계로 JS 번들 및 하이드레이션 부하를 줄이고,OAuth기반 인증 및 데이터 처리 로직을 서버로 이전하여 성능과 보안 확보TanStack Query의 낙관적 업데이트 및 캐싱 전략을 적용하여, '좋아요' 등 빈번한 인터랙션 발생 시 서버 재요청을 최소화하고 즉각적인 피드백을 제공하는 매끄러운 UX 구현- URL 경로 파싱 기반의 동적
Breadcrumb시스템을 구축하여, 다단계 카테고리 내 사용자의 현재 위치를 시각화하고 직관 적인 경로 이동 및 공유 가능한 구조 설계 - 카테고리 및 페이지 상태를
URL Path와 실시간으로 동기화하여 새로고침 시에도 사용자 상태가 보존되도록 설계하여 탐색 편의성 증대
2025.08 ~ 2025.10
TYLE | 한글 타자 연습 사이트
Next.js App Router를 기반으로 대량의 텍스트를 실시간으로 처리하며, 타격감 있는 사용자 경험을 제공하는 타자 연습 플랫폼입니다. 실시간 연산 성능 최적화와 오디오 지연 해소, 그리고 웹 성능 지표 개선을 목표로 개발했습니다.
Next.jsTypeScript
ReactTailwindCSS
JestFigmaHangul.js기반의 자소 분리 로직에useMemo를 적용하여, 복잡한 한글 입력 상황에서도 평균 연산 시간을 0.1ms 수준으로 유지하며 끊김 없는 반응형 인터페이스를 구현AudioBuffer사전 로드와Audio Sprite기법을 도입해 네트워크 요청 횟수를 줄이고, 브라우저 오디오 컨텍스트 최적화를 통해 연속 입력 시 발생하는 사운드 밀림 현상을 해결Suspense와Skeleton UI를 설계하여Layout Shift방지 및 CLS 지표 개선 (0.137 → 0)- FileReader 비동기 API와 TextDecoder를 활용하여 대용량 파일 로드 시 발생하는 UI Blocking을 방지하고, 클라이언트 단 실시간 파싱 로직을 구현하여 서버 부하 최소화
Jest를 활용한 유닛테스트로 연산 로직 무결성 검증
포스팅
학습한 내용을 기록하고 공유하며 성장합니다.