vavoya
로그인

허동영 프론트엔드 개발자 포트폴리오 (요약)

2025.07.11

1. 소개

안녕하세요. 프론트엔드 개발자 취업을 준비 중인 허동영입니다.

저는 사용자 경험과 유지보수성을 고려하여, 직관적으로 파악할 수 있는 구조적이고 안정적인 프론트엔드 개발을 지향합니다.

  • 폴더·파일 구조와 이름으로 각 요소의 역할과 기능을 명확히 나타냅니다.

  • 외부 라이브러리 도입 시 프로젝트의 적합성과 비용을 우선 고려합니다.

  • 모든 예외상황을 사전에 대비하는 로직을 구현합니다.

  • 적절한 추상화를 통해 내부 로직 이해나 추가 설정 없이 직관적인 사용성을 제공합니다.

  • 제네릭, 타입 가드, 오버로딩을 활용한 정교한 TypeScript 기반 타입 설계를 합니다.


2. 프로젝트 경험

2.1. [Next.js 풀스택 블로그 플랫폼 서비스 (개인 프로젝트)](/)

  • **기술 스택**

    • Next.js 15, React 19, TypeScript

    • Zustand, React Query, SCSS

    • MongoDB, next-auth

    • Vitest, Testing Library

  • **프로젝트 개요**

    기존 블로그 플랫폼(네이버, 티스토리, velog)의 단점을 보완하고 Next.js 서버 컴포넌트 및 SEO 최적화를 목표로 직접 설계한 블로그 플랫폼 서비스입니다.

  • **핵심 기능 및 구현 사항**

    1. **창 관리 시스템 도입**

      • 하나의 페이지에서 여러 관리 작업을 동시에 수행 가능

      • React에 맞게 변형한 C++ 윈도우 프로시저 방식으로 구현

      • 윈도우 포커스, 크기, 위치, z-index 조절 가능

    2. **비동기 작업 동기화 관리 모듈**

      • 버전 충돌 방지를 위해 비동기 작업을 순차적으로 처리

      • ESM 모듈 캐싱을 활용한 싱글톤 방식

      • 제네릭과 타입 가드 활용으로 타입 안정성 확보

    3. **공통 API와 내부 API 분리**

      • 내부 API는 환경변수 기반 인증 미들웨어를 통해 보안 유지

      • 서버 컴포넌트 및 내부 Fetch 캐시 활용

    4. **기능별 폴더 구조 분리**

      • 유지보수성을 위해 fetch, service, data-access 로직을 루트 폴더에 별도 관리

    5. **Toast 메시지 함수 추상화**

      • createRoot와 ESM 모듈 캐싱으로 단일 인스턴스 유지

      • 간단한 함수 호출로 즉시 Toast 렌더링 가능

  • **성과**

    • Chrome Lighthouse 성능 100, SEO 100, 접근성 92점 달성

    ![Lighthouse 점수](https://lh3.googleusercontent.com/d/18_44r49OfcOreP6_YkmyNWrqNrZJa8ay)Lighthouse 점수

    • vitest 및 Testing Library로 FE 통합테스트 및 BE 단위테스트 진행

      ![테스트 커버리지](https://lh3.googleusercontent.com/d/1jHkLU8LvdR2Ut9WltMkBp2bsrkN7On4a)테스트 커버리지

  • **주요 기능 시연 영상**


2.2. Softeer 부트캠프 통학버스 예매 서비스 (팀 프로젝트)

![딩동이미지](https://lh3.googleusercontent.com/d/1V-jJ5Kzwi3MW1E92ZxVGNstP5oE9HkpU)딩동이미지


  • **기술 스택**

    • React 19, TypeScript, React Query, StyledComponent, WebSocket

  • **역할**

    • 팀 프론트엔드 개발자로 참여하여 실시간 UI 관리 및 네트워크 최적화 구현 담당

  • **핵심 기능 및 구현 사항**

    1. **WebSocket 기반 실시간 상태관리**

      • 실시간 버스 위치 데이터를 바이너리 인코딩하여 전송량 최소화

      • 실시간 상태 변화에 따른 UI 즉시 반영

    2. **React Query 캐시 활용**

      • 서버 요청 없이 클라이언트 캐시 직접 조작으로 UX 최적화

    3. **중앙 집중식 에러 처리**

      • 미들웨어 기반 CustomError 클래스 사용으로 에러 유형별 대응

      • 에러 발생 시 URL 유지하며 모달로 안내하여 사용자 흐름 유지

    4. **결제 페이지 세션 보호**

      • 서버에서 HttpOnly 쿠키 기반 결제 토큰 검증으로 비정상 접근 방지

  • **주요 기능 시연 영상**


2.3. Vanilla JS 기반 React 직접 구현 및 Taskify 페이지 제작 (개인)

![딩동이미지](https://lh3.googleusercontent.com/d/1tJHnCjwYcqeozNY_hxaDa0jBC0-jR161)딩동이미지


  • **기술 스택**

    • JavaScript

  • **핵심 구현 사항**

    • React 렌더링 사이클(createRoot, render, commit 단계) 직접 구현

    • setState 배치 처리(마이크로 큐 개념) 및 생명주기(useEffect, cleanup) 구현

    • React Node, hook(useState, useEffect, useRef, createPortal) 구현

    • WeakMap 활용 이벤트 위임 및 메모리 관리 구현

  • [깃헙 저장소](https://github.com/vavoya/vanillaJsReact_Taskify)

  • [구현 페이지](https://vanilla-js-react-taskify.vercel.app/)


2.4. Obsidian 스타일 Markdown → AST 파서 라이브러리 제작 (개인)

  • **기술 스택**

    • TypeScript

  • **핵심 구현 사항**

    • 함수형 프로그래밍 원칙을 기반으로 파서 구현

    • 상태 머신과 prefix 기반 파싱 방식 적용

    • LRU 캐시 활용으로 성능 최적화 적용

  • [NPM 패키지 배포](https://www.npmjs.com/package/md-ast-parser)


2.5. 대학 동아리 떨이식품 중개 서비스 (팀 프로젝트)

  • **기술 스택**

    • React, React Native, StyledComponent, Redux

  • **주요 협업 경험**

    • Git을 통한 협업 (브랜치 전략, PR 리뷰, 커밋 컨벤션 도입)

    • API 통신 오류 및 상태관리 이슈 대응 경험

  • [프로젝트 깃허브](https://github.com/jaetteoli)


허동영 프론트엔드 개발자 포트폴리오 (요약) - sim-log