미리보기

아몬즈 유저 서비스 (웹, 모바일) 신규 피처 개발에 참여

• 상품 상세 페이지 유저 구매에 영향을 주는 신규 피처 개발

  • 상품 상세 페이지 신규 피처 간 tantack-query의 prefetch 기능을 적용해 서버사이드 패칭을 적용해 렌더링 속도를 향상시키고, 이미지 컴포넌트 최적화를 적용해 페이지 로딩 시간 단축 (2.4s -> 1.5s)

  • 모바일 환경에 최적화된 고객경험을 제공하기 위해 스크롤 복구 로직을 재 구축하고, 이미지를 포함한 리스트 형태의 페이지 이동 간 네트워크 요청 낭비를 방지하기 위해 캐싱 전략을 수립해 적용

• 홈 경로의 다양한 컴포넌트의 타입 안정성을 확보할 수 있도록 ts-pattern 라이브러리를 적용해 선택적 랜더링을 적용하고, 데이터 로깅, 좋아요 로직 등 공통화된 로직을 모듈화 해 유지 보수성을 향상 시킴.

• Open Graph, mata tag를 활용해 페이지 공유 간 해당 페이지의 대표이미지 및 타이틀, 설명을 노출할 수 있도록 페이지 별 스키마를 적용한 SEO 최적화 작업 진행

백오피스 서비스(임직원, 셀러 어드민) 기능 개발 및 유지보수 

• MVC 패턴의 서비스 구조를 MVVM구조로 개선하고 tantack-query, typescript, 함수 컴포넌트로 전환하는 개발 환경 모던화 작업을 진행

• Axios를 사용하는 메인 패처를 개선해 에러 예외 처리를 전역에서 처리하도록 개선하고, 데이터 송수신 시 etag 를 적용해 리소스의 중복 요청을 방지

• 유저 인증 및 권한 체계 고도화

  • RBAC(Role-Based Access Control) 기반의 3단계 권한 체계를 가진 어드민 서비스를 다양한 도메인에 대한 액션 기반의 권한을 부여할 수 있는 ABAC(Attribute-Based Access Contro) 권한 체계를 CASL 라이브러리를 적용해 구축

  • 13가지 주제, 42가지 세부 액션을 세부적으로 권한을 지정 가능

모던환경 개발화 및 코드 안정화

• 오래된 패키지를 제거하고, 유저 웹, 모바일 서비스 모두 React 18, Next 13버전으로 마이그레이션 함.

• Jest, react-testing-library, story-book 등 테스팅 툴을 적용한 유닛 단위 테스트, 기능 단위 통합 테스트 코드 작성

• 사내 디자인 시스템(ADS) 파운데이션 정의에 참여해 이를 적용하고, 작은 단위 컴포넌트(Card, Divider 등) 개발

GA4를 활용한 전자상거래 수치 파악 및 CRM 마케팅 자동화 툴 기술 지원

• GA4, Google Tag Manager를 활용해 구매, 탐색 등 유저의 활동 지표를 서비스 전반에서 확인할 수 있도록 로깅 이벤트를 이식하는 작업을 진행 (구매 기준 서비스

  데이터 파악율 80%)

• 자동화 CRM 마케팅 툴 Braze를 활용해 홈, 장바구니, 상품 상세 페이지에서 유저 액션에 기반한 상품 구매 추천 팝업과 NPS(순고객추천지수) 팝업 피처 등을 노출 가능하도록 기술 지원.

메타버스 생태계에 접목할 수 있는 웹 커머스 서비스 개발에 참여

• 신규 커머스 서비스(밈즈샵) 론칭을 위한 기획 및 개발에 참여

• 새로운 스택(Next.js 등) 도입을 적극 주도해 사업 운영팀의 SEO 최적화 요구 사항을 충족시키고, 프리패칭과 이미지 로딩 최적화 등을 통해 유저에게 보다 쾌적한 서비스 경험을 제공

• Lighthouse 웹 사이트 측정 시 스코어 27점 향상 (66 → 93)

• 베타 서비스 론칭 이후, 서비스 운영 동안 발생한 QA 이슈 처리를 전담하며 경험한 주요 이슈를 해결하기 위해, 신규 라이브러리(React Query)를 적극 도입하며 기능 단위 리팩토링을 진행.

• 스마트 오더 시스템을 위한 어드민을 서비스 구현

코드잇 프론트엔드 단기 심화과정 멘토링에 참여해 주니어 개발자 역량 향상에 기여