목록reactquery (2)

yunkogong

언어를 바꿨는데 화면이 못 따라오던 날 — i18n 즉각 반영 디버깅 일기

2026년 7월 14일. 새로 짜던 홈페이지에 언어 전환 버튼을 달았다. 한국어·영어·일본어 세 개였다. 버튼을 눌렀더니 화면이 그대로였다. 새로고침해야만 바뀌었다. 까먹기 전에 일기처럼 남겨둔다. 거창한 다국어 설계 가이드가 아니라 그냥 "오늘 이게 이상했고, 이렇게 잡았다"는 기록이다.처음부터 새로 짜던 프로젝트였다7월 초부터 홈페이지 하나를 처음부터 새로 만들고 있었다(앞선 글에서 프로젝트 A라고 부른 그 프로젝트다). Vite + React + Tailwind 기반이었고, 다국어는 react-i18next로 달았다. 홈, 회사 소개, 서비스 안내, 뉴스, 자료실 같은 섹션들이 있고, 각 섹션은 정적 텍스트와 API 데이터를 섞어서 보여주는 구조였다.헤더에 언어 선택기 컴포넌트를 올리고, 클릭하면 ..
프론트엔드 개발 가이드 2026. 7. 22. 14:10
useEffect + useState에서 React Query로 — 서버 상태 관리 리팩토링기

환경: React + TypeScript / 데이터 페칭 + 페이지네이션 화면들어가며리스트 + 필터 + 페이지네이션이 있는 화면을 useEffect + useState로 만들다 보면, 어느 순간 컴포넌트가 "API 호출 + 상태 동기화 + 로딩/에러 관리 + 의존성 추적"을 한꺼번에 떠안게 됩니다. 기능이 늘수록 useEffect가 늘고, 의존성 배열을 잘못 건드려 무한 호출이 나기도 하죠.이번에 같은 화면을 React Query(TanStack Query) 로 옮기면서 코드가 어떻게 단순해졌는지 정리했습니다.1. 기존 구조 — useEffect로 호출, useState로 보관useEffect(() => { const params = { keyword, sort, page, size: 10 }; fe..
프론트엔드 개발 가이드 2026. 6. 22. 13:07
이전 Prev 1 Next 다음