미리보기

룩코에서 세컨솔드(앱, 웹뷰, 웹), 룩코AI(빈티지 판매 간편화 솔루션 웹, 앱), 에이클로젯(디지털 옷장 앱) 프론트엔드 개발을 담당하고 있습니다.

세컨솔드(빈티지 커머스) 프론트엔드 개발

세컨솔드 웹 csr에서 nextjs로 마이그레이션 및 리팩토링

• sst 배포 툴과 github action을 이용한 aws cloudfront s3 배포 ci/cd 구축

• ssr metadata 및 시멘틱 태그 개선을 통한 lighthouse기준 검색엔진 최적화 점수 100점까지 개선(네이버 검색엔진 기준 전달 대비 노출 약 1500% 증가)

• ssr에서 tanstack-query dehydrate 통해 Layout Shift 감소

• react-window를 활용하여 view에 노출되는 아이템만 노출시켜 리스트 성능 개선

• sentry를 통하여 에러 로그 모니터링 연결 작업

세컨솔드 웹뷰 초기 구성 및 개발

• 크로스 플랫폼에서 키보드 동작 이슈를 ReAnimated를 통한 플랫폼별 애니메이션 구현

• 웹뷰 브라우저 pull to refresh 기능 개발

• 웹뷰와 앱간의 브릿지 통신을 zod를 사용하여 typesafe하게 구성 및 런타임 에러 대응

상품 리스트 및 상세 기능 구현

• 기존 상품필터가 store기반으로 UI data와 query data가 함께 관리하면서 유지보수가 어려웠던 문제를, react-hook-form(query data) jotai scope(UI data)를 활용하여 사용하는 곳에서 조립하며 편하게 사용할 수 있도록 합성 컴포넌트 모듈 구성

• 기존 하나의 상품상세 페이지에서 일반셀러, 프로셀러에 따른 다양한 UI 분기로 인한 유지보수 문제를 상품상세 합성 컴포넌트로 모듈을 구성하여 별도로 분리하도록 하여 유지보수의 용이성 및 확장성 확보

• 상품 리스트의 다양한 레이아웃(2열, 3열 등)을 편하게 사용하기 위해 커스텀훅으로 리스트 컴포넌트의 props를 관리하도록 구성하여 유지보수 용이성 증대

• 상품 리스트를 tanstack-query를 사용하여 가져올 때 상품 상세 query에도 cache 데이터를 넣어주도록 하여 미리보여줄 수 있는 데이터를 빠르게 보여주도록 함

• 상품 상세에 진입 하였을 때 용량이 큰 상세 이미지를 로드 하기전까지 리스트에서 보여준 cache된 썸네일 이미지를 미리 보여주도록하여 사용자의 이탈을 줄임

각종 세컨솔드 개발 및 리팩토링

• 앱내 스토어 기반의 복잡한 상태관리를 tanstack-query와 jotai를 도입하여 서버상태와 앱 전역상태 분리하여 유지보수 용이성 증가 및 개발속도 증가

• reanimated를 활용한 앱내 각종 인터렉션 개발

• 합성 컴포넌트와 react-hook-form 활용한 각종 도메인 로직의 모듈 구성

백오피스 개발

• 백오피스를 통해 동적으로 앱 배너 및 공지 바텀시트 개시 로직 개발

• canvas를 통해 세일중인 샵들의 배너를 동적으로 이미지 생성 및 배너 개시 로직 개발

• 각종 운영 관련 컨텐츠 개발

프론트 팀 내부

• 다양한 코드 스니펫을 공유하여 팀원들과의 코드 일관성 증가

• github action self hosted runner를 docker compose로 구성하여 회사 내부 서버에 필요에 따라 구성할 수 있도록 함

Looko-AI(B2B 빈티지 상품 등록 및 관리 솔루션)

상품 등록 및 관리 기능 개발

• tanstack-query와 jotai(draft data)를 활용하여 실시간 자동저장 기능 개발

• 입력해야되는 상품 정보수가 많을 때 렌더링으로 인한 버벅이는 이슈를 useMemo, useCallback을 활용하여 참조형 데이터를 memoization하여 해결(이후에는 react-hook-form을 활용하여 리팩토링 진행하여 개선방식 변경)

• 기존의 상품 데이터 form의 복잡한 validation 분기문을 react-hook-form과 zod를 도입하여 유지보수 용이성 증대 및 코드수 감소

• react-hook-form과 합성 컴포넌트로 상품 정보 form 컴포넌트를 모듈화하여 수정, 등록 화면에서 필요한 form을 조립하여 사용하도록 개선

상품 리스트 개발

• 엑셀시트로 보여줘야되는 요구사항이 있어서 jspreadsheet 라이브러리에 필요한 기능을 patch하여 엑셀시트 컴포넌트 설계 및 개발

• 필터 UI 데이터, searchParams, 요청 query 간의 데이터 구조를 설계하고

  searchParams를 zod로 데이터 검증 작업하는 hook을 구성한 custom hook 구축

• 각종 필터 UI 컴포넌트를 합성 컴포넌트로 구성하여 필요한 각각 필요한 곳에서 조립하여 사용하도록 설계

앱, 웹 기본 기능 개발

• axios interceptors(request, response)를 사용하여 bearer 인증 방식의 token 처리 로직 개발

• 웹에서 jotai persist로 refreshToken을 관리하여 로그인 유지 기능 구현

• 카페24 OAuth 기능 구현

• react-navigation을 사용하여 앱내 네비게이션 구조 구축 및 deepLink 핸들링 구현

• notifee/react-native 라이브러리를 활용한 IOS, AOS foreground, background, quit 상태에 따른 push 알림 핸들링 구현

• 회원가입, 각종 설정 컴포넌트들을 react-hook-form과 합성 컴포넌트로 유저 정보 form 컴포넌트를 모듈화하여 마이페이지 수정, 회원가입, 온보딩 단계에서 조립하여 사용할 수 있도록 구성

각종 레이아웃 애니메이션 구현

• 지라의 사이드바를 벤치마킹하여 기능 동작, 방식을 정의 및 설계 후 사이드바 drawer를 css animation을 활용하여 구현

• css animation을 활용하여 스크롤에 따른 상단 영역 슬라이드 애니메이션을 갖는 공통 컴포넌트 제작

에이클로젯(디지털 옷장) 프론트엔드 개발

옷 등록 프로세스 개발

• 옷 업로드 대기시간 중 axios onUploadProgress를 활용하여 프로그래스바 개발

• 중간저장기능이 store기반으로 UI와 query데이터가 혼용되어 복잡했던 문제를 routeParams(UI)와 jotai persist(중간저장 data)를 활용하여 개선

에이클로젯 옷장 월간 RECEP 웹뷰 기능 개발

• 인스타 스토리를 벤치마킹하여 기능 정의, 설계 및 로직 개발

• 동적으로 그린 월간 RECEP 이미지를 저장하는 로직 개발

기간: 2024년 7월 ~ 10월

내용: 스터디원들끼리 해당 기간동안 자유롭게 글을 작성 및 공유하여 토론