Dev15 React 상태관리 라이브러리, 언제 뭐 써야 할까? React를 쓰다 보면 상태관리를 어떻게 할 것인가에 대한 고민에 종종 빠진다.처음에는 useState 하나만으로도 충분하다. 그런데 컴포넌트가 많아지고, 상태를 여기저기 전달해야 하고, 로딩 상태나 에러 상태 같은 공통 값들이 생기기 시작하면… 슬슬 전역 상태라는 개념이 필요해진다. React의 기본 상태관리 (useState, useContext)가장 기본적인 상태관리 방법은 useState다. 간단한 컴포넌트 내부 로컬 상태는 이걸로 충분하다.useContext는 전역 상태처럼 사용할 수 있는 기능인데, 단점은 상태 변화가 발생하면 해당 Context를 구독하고 있는 모든 컴포넌트가 리렌더링 된다는 것. 상태가 복잡해질수록 성능 이슈가 생기기 쉽다.그래서 어느 시점이 되면 상태를 따로 관리하는 .. 2025. 6. 10. 프론트엔드에서 마주치는 HTTP 304 Not Modified, 어떻게 대처할까? NIFI 관리 페이지를 담당자에게 인수인계하면서 304 Not Modified 응답이 반복적으로 발생하는 이슈를 확인했다. 실제로는 API 호출 자체는 성공했지만, 응답 본문이 비어 있거나 UI 갱신이 되지 않아 프론트엔드에서 문제가 발생하는 것으로 보였다. 304 Not Modified는 HTTP 표준 상태코드로, 클라이언트가 마지막으로 요청한 이후 서버 리소스가 변경되지 않았음을 의미한다. 이는 주로 브라우저나 중간 프록시 서버에서 캐시 최적화를 위해 사용된다. 문제는 이 상태에서 axios나 fetch 등 클라이언트 측 라이브러리는 응답 본문이 없기 때문에 .data 또는 .json()으로 받은 데이터가 undefined가 된다.이 프로젝트에서는 axiosInstance를 공통으로 설정해 사용 중이.. 2025. 6. 9. Stream API 응답 처리 중 발생한 Invalid JSON 이슈 해결 기록 최근에 챗봇 관련 페이지를 구현하면서,사용자 질문에 대한 응답을 stream 형식으로 받아 한 글자씩 출력해주는 로직을 작성한 적이 있다. const reader = response.body?.getReader();const decoder = new TextDecoder('utf-8');while (true) { const { done, value } = await reader.read(); ...} stream으로 들어오는 데이터를 한 글자씩 queueRef에 쌓아두고,setInterval을 사용해서 타자치는 것처럼 한 글자씩 answer state에 붙여주는 방식이었다. 서비스 납품 후 콘솔 확인 시 간헐적으로 해당 오류 로그가 찍히는 것을 확인 'a', ':' 이런 단일 문자들이 왜 JSON .. 2025. 6. 9. rem 단위부터 폰트, 컬러까지, Tailwind 스타일 시스템 구축기 최근 진행한 프로젝트에서는 팀의 디자인 가이드를 반영해서 tailwind.config.ts를 커스터마이징해서 사용했다.그 과정을 정리해두면 다음 프로젝트나 리팩토링 때도 참고하기 좋을 것 같아 기록해둔다. 1. 기본설정pnpm add -D tailwindcss postcss autoprefixernpx tailwindcss init -p * 설정 파일을 .ts로 쓰고 싶으면 Vite에서는 tailwind.config.ts로 작성해도 됨. 2. px → rem 변환 유틸 추가왜 px 대신 rem을 쓰는가? 1) 사용자 접근성 (Accessibility) 향상브라우저에서 기본 폰트 사이즈를 키우면 rem 단위는 함께 커지지만, px은 고정된 크기라 변하지 않음.즉, rem을 쓰면 시력이 좋지 않은 사용자도 .. 2025. 6. 5. API 에러 응답도 표준이 있다? RFC 9457로 깔끔하게 처리 API 연동 작업을 하다 보면 이런 에러 응답, 한 번쯤 받아봤을 것이다.{ "message": "Invalid request"} 이런 에러 발생시에 어떻게 처리해야할지 발생시마다 백엔드에 물어보거나, 로그를 뒤져보거나, 요청 데이터를 찍어보는 등 불필요한 시간낭비를 할때가 종종있다. 이런 비효율적인 커뮤니케이션을 줄이기 위해, 에러 응답 구조를 표준화한 RFC 9457을 사용하면 백엔드와 프론트엔드 사이의 불필요한 확인 작업을 크게 줄일 수 있다. RFC 9457이 뭔데? 간단히 말해, HTTP API의 에러 응답을 표준 JSON 포맷으로 구조화하자는 문서.이전엔 RFC 7807이라는 게 있었고, RFC 9457은 그걸 확장한 버전이다. 주요 필드로는,type: 오류 유형을 식별하는 URI. 예:.. 2025. 6. 4. Pretendard preload 경고 (preload but not used 경고 대응) React나 Vite 기반 웹 프로젝트에서 웹폰트 로딩 성능을 높이기 위해 CDN으로 제공되는 CSS를 `preload`하는 경우가 많다. 이때 아래와 같은 경고 메시지를 본 적이 있다면, preload의 사용 방식과 실제 적용 시점을 점검해볼 필요가 있다. 이 경고는 브라우저가 preload된 CSS 리소스를 로드 후 몇 초 이내에 실제로 사용하지 않았을 때 발생한다. 즉, 다음과 같은 경우에 경고가 뜰 수 있다: - preload는 했지만 ``로 연결되지 않음 - preload된 리소스가 렌더링 타이밍상 너무 늦게 사용됨 해당 경고가 발생했을 때는 다음처럼 `preload`와 `rel="stylesheet"`를 함께 사용하는 방식으로 해결할 수 있다: 이렇게 하면:preload로 리소스를 .. 2025. 6. 4. 이전 1 2 3 다음
