기존 코드베이스를 기반으로 점진적인 마이그레이션 Tanstack Query의 useprefetch, staleTime, setQueryData 를 적용하고 Optimistic Update를 이용해 사용자 경험 개선 useFunnel 커스텀 훅과 FunnelContext를 만들어 퍼널 구조를 효율적으로 관리, 테스트 코드를 작성하여 예외처리 안정성 높임 TanStack Query의 쿼리 키 팩토리 패턴을 도입하여 쿼리 키 관리 중앙화 디자인 시스템 도입을 통한 버튼, 모달, time picker등의 효율적인 개발과 사용 URL 쿼리 파라미터를 이용한 결제 성공 여부 관리 Global Error Boundary, Layout을 통한 에러 관리 및 리다이렉션

更多

<어글리어스 웹 개선> 맡은 부분이 아니었지만 스스로 기존 코드에 대해 적극적으로 질문하며 개선사항을 찾음 S3에서 가져오는 이미지가 많아 Next.js의 이미지 최적화 대신 AWS Lambda@Edge, S3, CloudFront를 활용하여 이미지 캐싱, 리사이징 및 포맷 변환을 구현 사용자가 보는 첫 화면에 들어오는 이미지의 로딩이 느려 priority를 적용 → Google Lighthouse 성능 부분에서 총 18점을 향상 웹을 직접 사용해보며 UI/UX를 개선 → 기존 배송지를 수정하면 상세 배송지가 리셋되도록 수정 → 레시피 페이퍼를 받지 않으면 종이를 아낄 수 있다는 문구를 추가 테스트 코드 공통 코드를 모듈화해 리팩토링 <어글리어스 신규 어드민 개발 및 유지보수> 간단한 테스트 코드를 작성하여 함수가 의도대로 잘 작동하는지 확인, 덕분에 원활한 리팩토링을 통해 일정에 맞게 개발 컴파운드 패턴을 활용하여 코드 재사용성을 높이고 명확한 컴포넌트 구조를 나타냄 Lazy loading을 적용하여 Google Lighthouse 성능 부분에서 40점을 향상 useQuery와 useMutation을 별도 커스텀 훅으로 분리하여 재사용성을 높임 React Hook Form을 도입하여 효과적인 폼 상태 관리 구현 공용 UI 컴포넌트(react hook form+MUI input/select 컴포넌트, 캘린더 등)를 개발하여 생산성을 높임 코드 리뷰, 페어 코딩을 하며 더 나은 코드에 대해 의논하고 코드를 개선 QA에 참여하여 사용자 입장에서 생각하고 UI/UX 개선 → Auto complete search 사용 → 클릭 수 줄이기 → ‘저장’ 대신 ‘보관’ 단어 사용 제안 프론트엔드 개발자 온보딩 가이드 작성

更多