전체 글 (90) 썸네일형 리스트형 상용 환경에서야 잡은 하이드레이션 에러 ( i18n 번역파일 경로 이슈.. ) 평화로울 뻔했던 배포날 문제가 터졌다. 개발 환경에서는 보지 못했던 에러가 상용 배포 후에 발견된 것이다.로컬에서 빌드한 뒤 띄워도 재현되지 않았고, 오직 실제 배포 환경에서만 발생했다.#425 — Text content does not match server-rendered HTML#418 — Hydration failed because the initial UI does not match what was rendered on the server파악해 본 결과 하이드레이션 에러였다.콘솔 에러와 함께 페이지가 뜨는 순간 CSS가 적용되지 않은 쌩UI가 잠깐 보였다가 사라지는 FOUC 현상도 포착할 수 있었다.📌 접근1 : CSS 로드 상태 확인FOUC 현상을 보자마자 가장 먼저 떠오른 건 CSS다.CS.. 스켈레톤 UI가 Hydration 때문에 보이지 않게 된 이유 기존 CSR(Vue) 프로젝트를 SSR(Remix)로 전환하며 차트 라이브러리(ECharts) 때문에 이슈를 겪었다. 회사 모든 서비스의 차트 라이브러리는 ECharts로 통일되어 있어 기술스택 변경없이 그대로 들고 간 거였는데, 서버에서 렌더링되지 않는다는 치명적인 단점이 있었다.그래서 차트를 그리기 위해 useEffect를 통해 마운트가 끝난 시점에 렌더링 시키는 방식으로 사용을 했다.📌 문제 정의 : 스켈레톤 UI가 깜빡이는 것처럼 보인다.차트만 클라이언트에서 렌더링되다 보니 혼자 뿅하고 나타나는 것처럼 보이길래, UX 개선을 위해 스켈레톤 UI를 도입했다.하지만 렌더링이 빨리 끝나는 환경에서는 스켈레톤이 화면에 나타났다가 사라지는 게 깜빡이는 것처럼 보여 오히려 UX가 저하되는 느낌을 받았다... Promise를 외부로 꺼내 비동기 직접 제어하기 (Deferred Pattern) 하이브리드 앱 웹뷰 환경에서 네이티브앱과 통신을 주고받다보면, 백엔드 API 와의 통신과는 또 다르게 비동기 문제에 부딪힐 때가 있다. 이번 이슈는 앱과 블루투스 기기를 연동할 때 펌웨어 유효성을 검증하는 로직에서 발생하였고,해결을 위해서는 네이티브 앱에서 비동기로 넘어오는 파편화된 이벤트를 순서대로 제어하는 방법이 필요했다. 📌 문제 정의 구현하고자 하는 기능은 단순했다.1. 웹뷰 -> 앱에 기기 정보를 요청2. 앱이 응답3. 백엔드API로 펌웨어 검증4. 검증 성공 시 블루투스 연결 하지만 실제 구현과정에서는 크게 3가지 걸림돌이 있었다. 1. 펌웨어 검증이 완벽히 끝난 후 결과에 따라 블루투스 연결 시도 로직이 실행되어야 한다.앱 응답이 언제 도착할지 모르는 구조 특성상 호출부에서 검증 완료 시점.. 항해99 취업 리부트 코스 수강 후기 💻 수강 전본격 취업 준비를 위해 나름대로 열심히 서류를 준비를 하고 야심차게 여러 곳 지원해봤지만, 넣는 족족 서류탈락을 했었다. 꽤나 큰 충격과 좌절감을 맛보고 뭘 더 준비해야 할 지 갈피를 잡지 못하는 상황 속에서 취업 리부트 코스를 알게 됐다. 이력서,면접 코칭부터 개인 프로젝트 진행까지 체계적으로 보이는 커리큘럼이 마음에 들었고, 취업 전까지는 비용을 받지 않겠다는 부분에서 항해99의 자신감이 느껴져 신뢰가 갔다. 그래서 신청하고 간단한 전화 면접을 거친 후 취업 리부트 코스에 합류-! 💻 수강 과정프로그램의 모든 기본적인 진행은 게더 내부에서 팀 단위로 이루어졌다. 주차마다 새롭게 팀이 변경되었고, 처음에는 어색했지만 코스가 끝날 때쯤엔 많은 사람들과 꽤 친해질 수 있었다~~맨날맨날 게더에.. 제어 컴포넌트 최적화 방법 3가지 (+ 비제어 컴포넌트와 비교) 폼 데이터를 관리하다가 제어 컴포넌트와 비제어 컴포넌트에 대해 공부해보게되었다.📌 제어 컴포넌트와 비제어 컴포넌트제어 컴포넌트리액트 상태에 의해 값이 제어되는 컴포넌트이다. 사용자 입력값으로 자신의 상태를 관리하고 업데이트하고, 상태가 업데이트 될 때마다 컴포넌트는 리렌더링된다.폼 데이터가 상태에 저장되어 있어 데이터의 흐름이 명확하고, 로직 구현도 수월하지만, 빈번한 리렌더링으로 인해 불필요한 api 호출 등 자원 낭비가 발생할 수 있다.import React, { useState } from 'react';function ControlledComponent() { const [inputValue, setInputValue] = useState(''); const handleChange = (ev.. 이미지 최적화로 이미지 크기 75% 줄이기 🚨 고민 발생판매 상품 등록 시 이미지가 필수로 등록되어야 한다. 등록된 이미지는 firebase storage에 저장되고 storage url을 통해 이미지를 불러오게 된다. 전체 상품을 조회하는 페이지에서 다량의 상품 이미지를 불러오는데 이때 소요되는 로딩 시간이 너무 길어 사용자 경험이 떨어지는 문제가 발생한다. 📍 고민 해결 방법크기가 작은 썸네일용 이미지를 만들자!긴 로딩시간의 원인이 불필요하게 큰 이미지 크기라고 생각했고, 전체 상품 조회 페이지에서 보여질 크기가 작은 썸네일을 별도로 저장하는 방법을 선택했다. 📍 이미지 최적화 과정이미지 크기를 줄이기 위해서 두 가지 방법을 쓸 수 있었다.1. 이미지 크기 압축2. 이미지 포맷 변환 썸네일 크기에 맞는 수치로 이미지 크기를 압축하고, .. 에러 바운더리를 사용한 선언적 에러 핸들링 📍 기존의 에러핸들링매번 try-catch로 api 통신 에러만 잡아냈을 뿐 에러처리에 대한 진지한 고민을 해본 경험이 없었다. 에러의 종류를 알고 커스텀 에러를 정의해 전역적인 에러 처리를 하고 싶다는 생각이 들었다. 📍 에러 핸들링 방법 선택에러 핸들링 방법은 여러가지가 있다 1. try-catch문- 특정 동작이나 함수 호출에 대한 에러 처리 2. promise catch문- 네트워크 요청 등의 비동기 코드에서 발생한 에러 처리 3. axios interceptor- 네트워크 에러 처리- axios 라이브러리 제공 기능 4. react-query onError- 데이터 fetching 중 발생한 에러 처리- react query 라이브러리 제공 기능 5. error boundary- 하위 컴포넌.. 상세 상품 prefetch로 인한 불필요한 네트워크 요청 해결 📌 문제상황 - 사용자 경험 향상을 위해 상품 상세 페이지 로딩 시간을 줄이고자 상품 데이터 prefetch 도입- 전체 상품 조회 페이지에서 상품 썸네일 이미지에 hover 했을 때 상품 데이터 prefetch 하도록 설계- 마우스 움직임에 따라 불필요한 네트워크 요청 다량 발생 📌 원인 분석 const { handlePrefetchProduct } = usePrefetchProduct({ productId: data.id }); // prefetch 커스텀훅 const handleMouseEnter = () => { handlePrefetchProduct(); }; ;- 마우스가 잠깐이라도 스쳐지나간 경우 (ex 스크롤 시) 스쳐간 모든 상품에 대한 데이터 prefetch 동작 .. 이전 1 2 3 4 ··· 12 다음
