관리자 기능에서 이미지 등록을 구현하였습니다. 하지만 이미지 수정후에 다시 조회를 할때 이미지를 정상적으로 조회하지 못하였습니다.
원인을 찾아보니 이미지를 새로 가져오지 않고, 한번 조회한 뒤에는 캐시로 조회를 하니 이미지가 정상적으로 조회되지 않았습니다.
이를 해결하기 위해 캐시 무효화 전략을 사용했습니다.
전략은 간단합니다.
브라우저가 이미지를 캐싱 안 된 새로운 파일이라고 인식하도록 img url 뒤에 임의의 값을 매번 새롭게 같이 할당해주면 되었습니다.
이렇게 하면 이미지의 동적 할당 캐싱 무효화를 성공적으로 할 수 있다.
이제 뒤로갔다, 앞으로 갔다, 왔다 갔다, 수정, 삭제 뭘 해도
계속 새로운 이미지가 동적으로 할당된다.
// 캐시 문제를 해결하기 위해, 요청 URL에 타임스탬프를 추가하고 no-store 옵션을 사용합니다.
const cacheBustedUrl = `${slide.image}?t=${new Date().getTime()}`
const response = await fetch(cacheBustedUrl, { cache: "no-store" })
또한 새로고침하지않고 연속으로 2번 수정할시 오류가 발생했습니다.
문제의 정확한 원인
현재 코드의 동작 방식을 살펴보면:
첫 번째 등록 후: router.refresh()가 호출되어 서버에서 새로운 이미지 목록을 받아옵니다.
두 번째 등록 시도: 하지만 React 컴포넌트의 imageSlides 상태는 여전히 이전(첫 번째 등록 전)의 이미지 URL을 가지고 있습니다.
이는 router.refresh()가 서버 데이터는 새로고침하지만, React 컴포넌트의 로컬 상태(useState)는 초기화하지 않기 때문입니다.
해결 방안: 등록 성공 후 상태 초기화
router.refresh() 호출과 함께 컴포넌트의 상태도 새로 불러온 데이터로 업데이트해야 합니다.
현재 코드를 수정하여 등록 성공 후 서버에서 최신 데이터를 다시 불러와 상태를 업데이트하도록 하겠습니다.수정된 내용 요약
fetchData 함수 분리: 데이터를 가져오는 로직을 별도 함수로 분리했습니다.
등록 성공 후 상태 업데이트: router.refresh() 대신 await fetchData()를 호출하여 서버에서 최신 데이터를 받아와 React 컴포넌트의 상태를 업데이트합니다.
불필요한 import 제거: 더 이상 사용하지 않는 useRouter를 제거했습니다.
2. 이미지를 올릴때 순서가 매번 바뀜
문제점 분석
FormData에 순서 정보 없음: 현재 handleSaveSlides 함수에서는 images, titles, companies만 FormData에 추가하고 있고, 순서 정보는 전혀 전송하지 않고 있습니다.
비동기 처리로 인한 순서 보장 불가: Promise.all(slideProcessingPromises)를 사용하고 있는데, 이는 각 이미지 처리가 완료되는 순서대로 FormData에 추가되므로 원래 순서가 보장되지 않습니다.
해결 방안
순서를 보장하기 위해 다음과 같이 수정하겠습니다:
순차적 처리: Promise.all 대신 for 루프를 사용하여 순서대로 처리
순서 정보 명시: 각 이미지의 순서를 명시적으로 전송
// 순서를 보장하기 위해 순차적으로 처리
for (let index = 0; index < imageSlides.length; index++) {
const slide = imageSlides[index]
댓글