$ cat about.md

About

heum2
heum2조은흠
Frontend Developer

5년차 프론트엔드 개발자로, 복잡한 기술 문제를 실용적으로 해결하는 것을 즐깁니다.
2만 건 데이터 렌더링 성능 95% 개선, 이미지 최적화로 로드 속도 87.5% 개선한 경험이 있습니다.
Next.js, TypeScript, React Query를 활용한 모던 프론트엔드 개발과 성능 최적화에 강점이 있습니다.
성능 최적화와 사용자 경험 개선에 관심이 많으며, 가독성과 유지보수성을 고려한 코드 작성을 지향합니다.
기술 블로그를 운영하며 문제 해결 과정을 공유하고 있습니다.

EmailGitHubBlog

WORK EXPERIENCE

2024.07 - 현재

알라딘커뮤니케이션Frontend Engineer (프리랜서)

2025.01 - 현재

만권당 - 전자책 플랫폼 웹/백오피스 개발

  • Next.js (App Router)
  • React Query
  • TypeScript
  • Styled Components
  • Tailwind
성능 최적화
  • ·이미지 로딩 성능 개선: 메인 페이지에 다수의 전자책 표지 이미지가 동시 로딩되어 초기 로딩 시간이 길어지는 문제를 Intersection Observer 기반 lazy loading으로 해결. 리소스 요청량 22.6% 감소, 초기 로드 속도 87.5% 개선
핵심 기능 개발
  • ·구독 관리, 쿠폰 시스템, 이벤트 페이지 등 비즈니스 로직 구현
  • ·3D 북 시각화, 룰렛 게임 등 인터랙티브 UI 구현
UX 개선
  • ·Next.js 14 App Router 뒤로가기 동작 개선: 새 탭에서 URL 직접 접근 후 뒤로가기 시 빈 화면이 나타나는 문제 해결. App Router에서 지원하지 않는 router.events 대신 SessionStorage를 활용한 진입 경로 추적으로 메인 페이지 리다이렉션 구현
  • ·Layout Shift 이슈 대응:
    • -모달 오픈 시 스크롤바 사라짐으로 인한 화면 떨림 현상을 스크롤바 width만큼 padding-right 추가로 해결
    • -이미지 로딩 전 영역 미확보로 인한 레이아웃 변경을 스켈레톤 UI로 해결
  • ·Pull to refresh, 모바일 키보드 대응, 모달 스크롤 처리 등 크로스플랫폼 모바일 웹 최적화
백오피스 개선
  • ·폼 검증 시스템 구축: React Hook Form + Zod 기반 타입 안전 폼 검증 시스템 도입으로 런타임 에러 감소
  • ·엑셀 다운로드 안정성 개선: 중복된 다운로드 로직을 공통 모듈로 리팩토링하여 유지보수성 향상
  • ·URL 쿼리스트링 타입 안전성 확보: nuqs 도입으로 검색 파라미터 오류 사전 방지 및 유지보수성 향상
2024.07 - 2024.12 (계약직)

알라딘 백오피스 웹 리뉴얼 개발

  • Next.js (App Router)
  • React Query
  • MUI
  • TypeScript
  • React Hook Form
  • Zod
성능 최적화
  • ·대용량 데이터 렌더링 성능 개선: 레거시 시스템에서 2만 건의 상품 데이터를 한 번에 전달하는 제약 상황에서, 전체 데이터를 DOM에 렌더링하여 발생하는 화면 버벅임 문제를 가상 스크롤 기법으로 해결. 렌더링 성능 95% 개선
2024.02 - 2024.06 (5개월)

프리랜서 경력Frontend Engineer

2024.04 - 2024.05

MunchSkill - 스킬 테스트 서비스 백오피스 개발

  • Next.js
  • React Query
  • Ant Design
  • TypeScript
  • ·프로젝트 초기 구조 설계 및 개발 환경 구축
  • ·React Query 도입으로 API 중복 호출 최소화 및 네트워크 성능 최적화
2024.02 - 2024.06

검진해 - 건강검진 비교 서비스 백오피스 개발

  • Next.js
  • Apollo Client
  • Ant Design
  • TypeScript
  • ·GraphQL 기반 복잡한 검진 상품 관리 시스템 개발
  • ·권한별 UI 접근 제어를 통한 사용자 경험 개선
2020.06 - 2023.10 (3년 4개월)

로디언즈Frontend Engineer (정규직)

메인 프로젝트, 3년 운영

로디언즈 - 의료사고 대응 서비스

  • React
  • React Native
  • Next.js
  • Redux Saga
  • Express
  • TypeORM
  • TypeScript
레거시 시스템 전면 개편 (3개월 리팩토링)
  • ·문제: ejs 기반 1,000줄 이상의 백엔드-프론트엔드 결합 코드로 인한 유지보수성 저하
  • ·해결: 백엔드(Express + TypeORM)와 프론트엔드(React) 완전 분리, 컴포넌트 기반 구조 재설계
  • ·성과: 필요한 부분만 수정 가능한 구조로 개선, 신규 기능 개발 및 버그 수정 시간 대폭 단축
React Native 앱 개발 및 운영
  • ·웹뷰에서 네이티브 앱으로 전환하여 푸시 알림, 카메라 등 네이티브 기능 구현
  • ·CodePush 도입으로 배포 프로세스 개선: 앱 스토어 심사 대기(1-2주) → 즉시 배포 가능
  • ·App Store, Google Play 배포 및 운영
  • ·아임포트 결제, 본인인증 연동
풀스택 개발 경험
  • ·Express + TypeORM 기반 RESTful API 설계 및 개발
  • ·권한 시스템 설계 및 구현, Swagger API 문서화
  • ·Ant Design 기반 백오피스 개발 (반응형, 권한별 UI 분리)
  • ·ESLint, Prettier 도입으로 코드 품질 관리 체계 구축
개발 생산성 향상 시도
  • ·Storybook, CMS 템플릿 등 개발 도구 도입
  • ·Google Analytics 이벤트 추적 및 데이터 분석
  • ·유지보수 및 CS 이슈 대응
2023.01 - 2023.03

리얼파이 - 부동산 조각거래 플랫폼

  • Next.js (Pages Router)
  • Apollo Client
  • TypeScript
Apollo Client 캐싱 전략 최적화
  • ·문제: 페이지 전환 시마다 동일한 API를 반복 호출하여 네트워크 부하 및 로딩 지연 발생
  • ·해결: Naver D2 기술 발표를 통해 인사이트 획득, Server-Side와 Client-Side 캐싱 전략 수립 및 적용
  • ·성과:
    • -반복 API 호출 최소화로 네트워크 트래픽 절감
    • -페이지 전환 시 캐시된 데이터 활용으로 로딩 시간 단축, UX 개선
실시간 거래 시스템
  • ·GraphQL Subscriptions를 활용한 실시간 주문 체결 알림 구현
  • ·Intersection Observer API 기반 무한 스크롤 구현
5건

병행 프로젝트

  • ·라이브픽스타 (2022.03~06): React Native 앱, WebSocket 채팅, TTS 기능, 인앱 결제
  • ·찐부 (2022.10~12): 부동산 IP 중개 플랫폼, 아임포트 결제 연동
  • ·방배사 (2023.09~10): 상품권/가상자산 거래 플랫폼, 채팅 기능 개발
  • ·두리안 쇼핑몰 (2021.12~2022.02): 블록체인 쇼핑몰, 앱-웹 인증 토큰 동기화
  • ·그라운드피트 (2021.10~12): 스포츠 수업 예약/정산 앱, 백오피스 개발

SIDE PROJECT

2025.05 - 현재 · 7인 팀 (웹 FE 2, 앱 FE 2, 백엔드 2, 디자이너 1)

Grimity - 그림 커뮤니티

한국의 픽시브를 목표로 하는 그림 커뮤니티 플랫폼

  • Next.js (Pages Router)
  • React Query
  • TypeScript
  • SCSS
  • Zustand
월 1,500명 활성 사용자, 주 1-2회 배포
사용자 피드백 기반 운영: 트위터 채널 및 오픈 카카오톡을 통한 실시간 피드백 수집 및 개선
  • ·WebSocket 기반 실시간 DM 시스템 개발: 사용자 간 1:1 메시지 기능 구현
  • ·React Query v3 → v5 마이그레이션 주도: 팀 내 업그레이드 리딩, 호환성 이슈 해결
  • ·아이콘 컴포넌트 Layout Shift 이슈 해결: 캐시 미처리로 인한 미노출 문제 원인 분석, 캐싱 전략 수립 및 상수화 처리
  • ·랭킹 시스템 신규 개발: 작가별, 작품별 랭킹 페이지 구현
  • ·Google Ads 연동 작업 진행 중: 수익화를 위한 광고 시스템 도입
  • ·중복 컴포넌트 리팩토링: 코드 재사용성 향상 및 유지보수 효율 개선

SKILLS

Frontend
  • TypeScript
  • JavaScript
  • React
  • Next.js (App Router)
  • Next.js (Pages Router)
  • React Native
  • React Query
  • Apollo Client
  • Redux
  • Redux Saga
  • Recoil
  • Context API
  • Tailwind
  • Styled Components
  • SCSS
  • MUI
  • Ant Design
Backend
  • Node.js
  • Express
  • TypeORM
Collaboration & Tool
  • Git
  • Github
  • Slack
  • Notion
  • Discord
  • Jira
  • Asana
  • YouTrack
  • Figma
  • Zeplin

EDUCATION

2014.03 - 2019.02
고려직업전문학교 (학점은행제)
컴퓨터공학 전공
2018.11.16
정보처리산업기사