분류 전체보기17 React 상태관리 라이브러리, 언제 뭐 써야 할까? React를 쓰다 보면 상태관리를 어떻게 할 것인가에 대한 고민에 종종 빠진다.처음에는 useState 하나만으로도 충분하다. 그런데 컴포넌트가 많아지고, 상태를 여기저기 전달해야 하고, 로딩 상태나 에러 상태 같은 공통 값들이 생기기 시작하면… 슬슬 전역 상태라는 개념이 필요해진다. React의 기본 상태관리 (useState, useContext)가장 기본적인 상태관리 방법은 useState다. 간단한 컴포넌트 내부 로컬 상태는 이걸로 충분하다.useContext는 전역 상태처럼 사용할 수 있는 기능인데, 단점은 상태 변화가 발생하면 해당 Context를 구독하고 있는 모든 컴포넌트가 리렌더링 된다는 것. 상태가 복잡해질수록 성능 이슈가 생기기 쉽다.그래서 어느 시점이 되면 상태를 따로 관리하는 .. 2025. 6. 10. Yashica flasher, Kodak Color plus 200 / T-MAX100 2022년 6월 12일 단비 결혼식,할머니 돼서도 늘 그래왔듯 똑같겠지 우린? 2025. 6. 10. 코닥 영화용필름 Vision3 2023년 12월 속초,따스했던 겨울 배추와 함께 !속초는 언제와도 좋은 것 같다. 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. 이전 1 2 3 다음
