픽업전용 장바구니
픽업 주문 진입 경로를 장바구니로 모아 고객 접근성을 높인 개발 사례입니다. 매장 선택과 렌더링 방식을 개선하고, 모니터링까지 구성했습니다.
#SSR#CSR
4200
프론트엔드 기술 블로그 최신 글
필터 0
useInfiniteQuery로 무한스크롤 구현하기
무한스크롤은 `useInfiniteQuery`와 `useInView`로 구현했습니다. 뒤로가기는 세션 스토리지와 QueryClient 캐시로 상품 목록과 스크롤을 복원했습니다.
#Next.js#React
5600
올리브영 잡 챌린지! 프론트엔드 개발자로의 전환
올리브영 잡 챌린지를 통해 프론트엔드 직무로 전환한 경험과 W CARE 스쿼드에서의 실무 적응 과정을 공유했습니다. 구조도 작성, React 훅 활용, 컴포넌트 분리로 서비스 이해와 유지보수성을 높인 점이 핵심입니다.
#React#Next.js
2600
B2B 물류 스쿼드 백오피스 프론트엔드 성능 개선
신규 백오피스의 SPA 성능 저하를 코드 스플리팅, Nginx 압축, 정적 캐싱으로 개선했습니다. 브라우저 API 캐싱과 Vuex를 함께 사용해 로딩 시간과 중복 호출을 줄였습니다.
#Vuex#AWS
3200
사용자 인식과 웹 성능 측정의 변화
Lighthouse의 주요 성능 지표와 Speed Index의 측정 방식, 그리고 SI 중요도 논란을 정리했습니다. SPA 확산과 모바일 환경 변화로 SI의 해석이 달라지고 있습니다.
#Lighthouse#웹 성능
2900
React Hook Form
React Hook Form의 useForm 기본 사용법과 주요 기능을 정리했습니다. 또한 Controller, useController, useFieldArray, useFormContext 활용법도 함께 소개했습니다.
#React#React Hook Form
2000
새 배송지 추가 form 개발하기
배송지 추가 form을 만들며 상태, Context, ref, React Hook Form을 비교했습니다. 최종적으로 재렌더링과 관리 복잡도를 줄이기 위해 React Hook Form을 선택했습니다.
#Next.js#React Hook Form
3300
랠릿 standalone 적용기
Next.js standalone으로 Docker 이미지에 필요한 실행 파일만 포함해 배포 구조를 개선했습니다. ECR 이미지 용량과 배포 시간을 크게 줄이면서 환경 변수·정적 파일 처리 유의점을 정리했습니다.
#Next.js#Docker
000
무엇을 찾으시나요? 검색창 개편 여정
검색창을 고객 탐색의 첫 관문으로 보고 추천 구조를 개편한 사례입니다. AB 테스트와 추천 모델 적용으로 클릭 성과와 전시 효율을 크게 높였습니다.
#검색#추천
3800
React-query 를 사용해 상태관리를 해보자
React-query 를 사용해 상태관리를 해보자
React Query를 상태관리 관점에서 소개하며 데이터 패칭과 캐싱, 동기화 장점을 정리했습니다. 또한 useQuery와 useMutation, staleTime과 cacheTime 활용 방법을 예시로 설명했습니다.
#React#state management
800
웹앱의 전환, Micro Frontends 아키텍처
Micro Frontends 아키텍처로 웹앱을 전환한 과정과 어려움을 공유했습니다. 독립 배포와 런타임 통합으로 스쿼드별 개발 리듬과 사용자 경험을 함께 개선했습니다.
#Micro Frontends#React
2900
쏟아지는 사용자 입력 관리하기
다양한 사용자 입력을 분리하고 관리하는 방법을 소개했습니다. 입력 흐름을 체계적으로 다루는 관점을 공유했습니다.
2200
신입 개발자의 실패를 위한 온보딩 여정
신입 개발자의 실패를 위한 온보딩 여정
플레이키보드 iOS 신입 개발자의 온보딩 과정을 소개했습니다. 데일리 퀴즈와 코드 분석, 실패를 전제로 한 도전과제가 실무 적응과 성장에 도움이 되었습니다.
#iOS#Swift
2400
우리가 Android Compose를 택한 이유: 플레이키보드 이야기
우리가 Android Compose를 택한 이유: 플레이키보드 이야기
Compose를 택한 이유를 XML 대비 코드 감소와 재사용성 중심으로 설명했습니다. 버튼, 리스트, 디자인 시스템, 온보딩 화면 사례로 도입 효과를 보여주었습니다.
#Android#Jetpack Compose
2500