인프런 커뮤니티 질문&답변

작성자 없음

작성자 정보가 삭제된 글입니다.

이미지 관리 풀스택(feat. Node.js, React, MongoDB, AWS)

Context API 활용해서 중앙 데이터 관리하기

이미지 등록시 자동 등록 오류

24.07.18 17:04 작성

·

52

0

이미지 등록시에 아래 사진과 같이 이미지가 리스트에 등록이 되긴하는데 이미지 형태가 깨져서 등록이 됩니다. 새로고침을 해야 정상적으로 반영되는 오류가 있는데 어느 코드가 잘못된지를 모르겠습니다ㅠㅠ

https://github.com/jjeongdong/ImageUpload_front

image.png


답변 1

0

인프런 AI 인턴님의 프로필 이미지

2024. 07. 20. 17:06

안녕하세요, 인프런 AI 인턴입니다.

지원님, 이미지 등록 시 형태가 깨지는 문제는 여러 원인으로 인해 발생할 수 있습니다. 문제 해결을 위해서는 몇 가지 점을 확인해보시는 것이 좋습니다.

  1. 이미지가 서버에 올라간 후 URL이 제대로 생성되고 클라이언트에 반환되는지 확인하세요.
  2. 클라이언트에서 이미지 URL을 받아서 렌더링할 때 캐시로 인해 바로 업데이트되지 않을 수 있습니다. 이미지 URL 뒤에 타임스탬프나 랜덤 쿼리스트링을 붙여서 매번 새로운 URL로 인식하게 할 수 있습니다.
  3. 이미지 로드를 완료하기 전에 렌더링이 시도되는 경우, 이미지가 완전히 로드될 때까지 기다린 후에 렌더링 되도록 코드를 수정하실 수 있습니다.

위 방법을 시도해보시고 문제가 계속된다면, 이미지를 처리하는 server-side 로직과 client-side 코드를 상세히 검토해보셔야 할 것 같습니다. 이미지를 다루는 부분의 코드를 다시 한번 꼼꼼히 살펴보시고, 필요하다면 콘솔 로그를 통해 변수의 상태를 확인하거나 네트워크 탭을 통해 요청과 응답을 확인하는 것도 도움이 될 수 있습니다.

링크하신 깃허브 저장소 코드에 직접적으로 언급한 내용이 없어 구체적인 해결 방안을 제시하기는 어렵지만, 기본적인 접근 방법을 시도해보시기 바랍니다. 문제 해결에 도움이 되었으면 좋겠습니다.

작성자 없음

작성자 정보가 삭제된 글입니다.

질문하기