Frontend Engineer
Seoul, Korea 🇰🇷
Profile
About Me
-
사람을 생각하는 서비스
스타트업에서 웹 퍼블리셔로 근무하며 웹사이트 리뉴얼 프로젝트를 주도한 경험이 있습니다. 반응형 웹 구현과 메뉴 구조 개편을 통해 페이지별 방문자 수와 체류 시간을 30% 증가시킬 수 있었습니다. 이 과정에서 사용자 중심의 UX 설계와 개발이 서비스 성공에 필수적이라는 것을 깨달았습니다.
-
성능 최적화에 집중하는 개발자
제 개발 철학은 성능 최적화에 있습니다. 지속적인 모니터링을 통해 성능 문제를 파악하고 개선하는 데 집중합니다. 예를 들어, 이미지 최적화와 코드 스플리팅을 통해 빌드 시간을 47% 단축하고, LCP 성능을 23% 향상시킨 경험이 있습니다. 실제 사용자 상호작용과 연관된 지표를 중점적으로 모니터링하며, 잠재적인 성능 병목 현상을 사전에 파악하고 해결하는 것을 목표로 합니다.
Skills
| React | - React의 동작 원리(가상 DOM, 리액트 라이프사이클, 상태 관리 등)를 깊이 이해하고
있습니다.
- 함수형 컴포넌트와 리액트 훅(useState, useEffect)을 사용하여 상태 관리를 효율적으로
할 수 있습니다. |
| --- | --- |
| JavaScript | - ES6+ 문법을 이해하고 있으며, 비동기 프로그래밍(Async/Await, Promises)에 익숙합니다.
- DOM 조작과 이벤트 핸들링에 능숙합니다. |
| TypeScript | - TypeScript를 사용하여 정적 타입 검사와 인터페이스를 활용한 안정적인 코드 작성을
할 수 있습니다.
- 타입 시스템을 활용하여 코드의 가독성과 유지보수성을 높이는 방법을 이해하고 있습니다. |
| HTML, CSS | - HTML5와 CSS3를 사용하여 반응형 웹 디자인을 구현할 수 있습니다.
- Flexbox 및 Grid 레이아웃 시스템을 활용하여 복잡한 레이아웃을 효율적으로 구성할 수
있습니다. |
Projects
EVENTRIX
다양한 컨퍼런스 및 이벤트 티켓을 예약할 수 있는 온라인 플랫폼입니다.
2024.04 ~ 2024.05 (4주)
FE 1명
GitHub Service
- 주요 언어 및 기술
- React, TypeScript, Vite, Tailwind CSS, Firebase, Tanstack Query, Jest, Cypress, Zustand, shadcn/ui
- 구현 기능
- 포트원 SDK를 통해 다양한 결제 옵션을 제공하여 결제 편의성 향상
- 티켓 정보를 로컬 스토리지에 저장하여 장바구니 상태가 유지되도록 구현
- 핵심 내용
- React DevTools 프로파일러를 활용한 컴포넌트 렌더링 성능 개선
- 문제: 복잡한 사용자 인터페이스로 인해 컴포넌트 렌더링 시간이 비효율적으로 증가
- 해결: React DevTools 프로파일러로 컴포넌트 렌더링 병목 지점을 식별하고, 메모이제이션과 코드 스플리팅 기법을 적용하여 렌더링 속도를 50% 향상시킴
- Bundle Analyzer로 빌드 최적화
- 문제: 애플리케이션의 초기 빌드 시간이 사용자 경험을 저하시키는 주요 요인으로 작용함
- 해결: Vite 환경에서 Bundle Analyzer를 사용하여 빌드 과정을 최적화하고, 불필요한 종속성을 제거 → 필수 리소스만 포함시켜 빌드 시간 47% 개선 (11.66초 -> 6.15초)
- Lighthouse를 기반으로 LCP 성능 개선
- 문제: 페이지 로드 성능 저하로 사용자가 컨텐츠를 보기 위한 시간이 길어지는 문제가 발견됨
- 해결: Lighthouse 분석을 통해 주요 성능 병목 지점을 식별하고 이미지 리사이징 등을 통해 최적화해 LCP 63% 감소 (3.0초 -> 1.1초), 성능 점수 23% 증가시킴 (75점 -> 92점)