0. 프로젝트 전반 설계 방향 요약

본 프로젝트의 기술적 이슈들은 단순 버그 수정이 아니라,

다음 세 가지 원칙을 기반으로 해결되었다.

1. 제어권 단일화

   인증 흐름, 토큰 재발급, Toast 상태, DOM transform 등

   하나의 책임은 한 곳에서만 관리하도록 설계하였다.

2. 관심사 분리

   API 정의와 React Query 상태 관리,

   레이아웃과 페이지 로직을 명확히 분리하여 유지보수성을 확보하였다.

3. 불필요한 재요청 및 중복 실행 제거

   캐시 전략 통제, Strict Mode 대응, 동시성 제어 등을 통해

   네트워크 낭비와 예측 불가능한 동작을 구조적으로 제거하였다.

이후의 이슈들은 위 설계 원칙을 실제로 적용한 사례들이다.

이슈 1. 프로필 수정 후 이미지 미갱신 및 무한 재요청 현상 - 에잇/양수지

1. 문제

• 이미지 미갱신: 프로필 수정 완료 후 마이페이지나 메인 페이지로 이동했을 때, 서버 데이터는 변경되었으나 화면에는 이전 프로필 이미지가 그대로 남아 있는 현상 발생.

• 불필요한 재요청: 이를 해결하기 위해 이미지 URL에 타임스탬프를 추가하자, 닉네임 입력 등 다른 상태가 바뀔 때마다 이미지를 매번 새로 불러오는 성능 저하 발생.

2. 원인

• 이미지 미갱신 원인 (브라우저 캐싱): 브라우저는 URL이 동일하면 서버에 새 파일을 요청하지 않고 로컬 캐시를 사용함. 프로필 이미지 경로(URL)가 고정되어 있어 서버의 파일이 바뀌어도 브라우저가 이를 인지하지 못함.

• 불필요한 재요청 원인 (인라인 Date.now() 사용): 캐를 강제로 깨기 위해 src={${url}?t=${Date.now()}}와 같이 JSX 내부에 인라인으로 선언함.