

픽업전용 장바구니
픽업 주문 진입 경로를 장바구니로 모아 고객 접근성을 높인 개발 사례입니다. 매장 선택과 렌더링 방식을 개선하고, 모니터링까지 구성했습니다.
새로운 기술 블로그가 추가되었어요


픽업 주문 진입 경로를 장바구니로 모아 고객 접근성을 높인 개발 사례입니다. 매장 선택과 렌더링 방식을 개선하고, 모니터링까지 구성했습니다.

기술 선택은 유행보다 서비스 요구사항, 조직 역량, 유지보수 가능성을 기준으로 판단해야 합니다. SPA·SSR 전환처럼 부작용과 운영 복잡도가 이득보다 큰지 검증할 필요가 있습니다.

적정기술을 개발 환경에 맞춰 선택해야 한다는 관점을 설명했습니다. 최신 기술의 무조건적 도입보다 요구사항, 팀 역량, 유지보수성을 함께 봐야 한다고 정리했습니다.

올리브영 라이브관을 신규 아키텍처와 SSR 기반으로 전환한 프론트엔드 경험을 공유했습니다. 이미지·영상 최적화와 공통 코드 관리, 크로스 브라우징 대응 방향도 함께 정리했습니다.

온라인몰 메인페이지의 초기 렌더링 지연과 느린 LCP 문제를 분석하고, 불필요한 지연 로직 제거와 탭 렌더링 순서 조정으로 개선했습니다. 또한 데이터 분리와 모니터링을 통해 FID, LCP, 로딩 타임을 함께 줄였습니다.
React Hook의 사용 규칙과 react-hook-form 기반 폼 관리 방식을 소개했습니다. 검증, 제출, 동적 필드 관리를 간결하게 구성한 사례를 설명했습니다.


Suspense의 fallback 전환이 유발하는 화면 깜빡임 문제를 짚었습니다. React 18 Transition과 Recoil 지원 기능으로 이전 화면을 유지하는 방법을 소개합니다.

웹 다크모드는 body 클래스와 CSS variable로 제어하는 방식을 제안했습니다. SSR·CSR 환경의 깜빡임과 웹뷰·구버전 OS 호환성도 함께 고려했습니다.
이 게시물은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

웹 다크모드는 body 클래스와 JavaScript로 제어해 다양한 정책을 지원할 수 있습니다. 렌더링 전 판별과 CSS 변수로 깜빡임 및 스타일 중복을 줄였습니다.

SSR의 개념부터 Vanilla JS와 Vue를 이용한 적용 흐름까지 단계적으로 설명했습니다. 또한 Hydration, state 동기화, 선택적 SSR과 실패 시 CSR 대체 방법까지 정리했습니다.