[담당 업무] • 실시간 1:1 전문가 상담 플랫폼 런칭 및 프론트엔드 신규 피처 개발 • 백오피스 서비스(임직원) 기능 개발 및 유지보수 • 모던환경 개발화 및 코드 안정화 • GA4/Amplitude를 활용한 수치 파악 기술 지원 [수행 업무] 1. 초기 구축 단계에서 SSR과 CSR 하이브리드 렌더링을 적용하여 서비스 페이지의 최적화를 개선하였습니다. 2. 다수 이미지가 포함된 상황에서 Next.js의 Image 컴포넌트를 활용해 이미지 로딩 최적화(AVIF, WebP 포맷 활용 및 Lazy loading, priority 속성 적용)로 초기 페이지 로드 시간을 약 4 초에서 0.97초로 단축했습니다. 3. 실시간 음성 연결 서비스 웹에서의 음성 연결을 위해 WebRTC API와 WebSocket을 사용해 음성 연결 기능을 구현하고, 크로스 브라우징 호환성에 대한 이슈를 경험하고 해결하며 다양한 환경에서 안정적인 서비스 이용을 가능하게 했습니다. 4. Sendbird SDK 마이그레이션 자체 서비스 구축의 단점(리소스 효율성과 네트워크 안정성)을 고려해 Sendbird SDK로 마이그레이션하여 서버 비용을 줄이고 UX를개선했습니다. 5. GA4/Amplitude 기반 데이터 분석 지원 GA4와 Amplitude API를 통해 유저 예약, 탐색 등 활동 지표를 기록하고 로깅하여 서비스 내 전반적인 데이터 확인이 가능하도록 구성했습니다. 6. GS 인증 획득 공공사업용 GS 인증 획득을 위해 성능 최적화를 수행하며, 프론트엔드 요구 사항을 충족했습니다. • TanStack-Query 캐싱과 Debounce를 통해 API 호출 집중 구간에서의 부하를 줄였고, 검색 , 저장, 수정 기능에 적용해 API 호출 횟수를 최적화했습니다. • @next/bundle-analyzer로 번들 크기를 분석하고 동적 import를 통해 성능을 개선했으며, React 18과 Next.js 14로 마이그레이션하여 최신 안정성을 확보했습니다.

더보기

[담당 업무] • 레거시 프로젝트(Vue) → React/Typescript 마이그레이션 • 백오피스 서비스(임직원, 안전요원) 기능 개발 및 유지보수 [수행 업무] 1. 레거시 프로젝트(Vue) → React/Typescript 마이그레이션 담당자의 부재로 레거시 코드를 React/Next.js/Typescript로 마이그레이션하며 공통 비니지스 로직 모듈화를 구축하고 DX를 향상 시켰습니다. 2. 자율주행 차량 실시간 차량 위치 관제 기능 개발 Axios polling 방식으로 인해 끊기는 차량위치 UI를 TanStack-Query의 캐시를 이용한 상태 관리 데이 터를 Map 라이브러리 Leaflet.js에 연동하며 매끄러운 차량 이동 UI를 제공하며 UX를 향상 시켰습니다.

더보기

[담당 업무] • 백오피스 서비스(임직원, 셀러 어드민) 기능 개발 및 유지보수 • HTTPS 보안 강화, 자동화된 배포 프로세스 구축

더보기

[Front-end] 대표 홈페이지에 포함되는 UI 컴포넌트, 디자인 상태를 핸들링하는 업무를 수행하였습니다. - UI 개발(HTML,CSS,JS)

더보기