inflearn logo
강의

講義

知識共有

イメージ管理フルスタック (feat. Node.js、React、MongoDB、AWS)

Context APIを活用して中央データを管理する

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

211

작성자 없음

投稿した質問数 0

0

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

https://github.com/jjeongdong/ImageUpload_front

image.png


react node.js aws mongodb express lambda

回答 1

0

communityai8509

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

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

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

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

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

Router.use 두번째 파라미터 ImageRouter : undefined 전달 오류

0

107

2

소스코드 요청

0

153

1

프록시 관련 질문

0

151

1

Presigned URL 사용시 데이터베이스 저장 시점

0

322

1

강의에 사용된 코드 다운 받는 사이트 주소 있나요?

0

373

2

axios 이용해서 백엔드로 이미지 전송 중 새로고침

0

471

1

ImageList 컴포넌트에서 업로드 한 사진을 리스트에서 바로 보기 위해 이 방법도 괜찮나요??

0

377

1

이미지 처음 올릴 때만 나타나는 오류

0

250

1

es6 스타일로 Import 할때 동작하지 않습니다.

0

382

1

이미지 업로드시

0

359

1

node js를 이용하고 mysql에 이미지 경로 저장

2

1258

1

선생님 cloudFront를 사용하게되면 S3는 private으로 사용하는게 좋을까요

0

539

1

선생님 aws-sdk 모듈을 찾을 수 없다고 합니다.

0

663

1

new aws.S3 version 확인

2

506

1

react-router-dom v6 useHistory 이슈

7

636

0

람다에서 시간 초과 에러가 뜹니다!

0

315

1

첫 로드시 동일한 이미지 두번호출

2

485

1

이미지 업로드 시 배열로

2

524

1

Promise.all에 대한 질문

0

421

1

세션에 관한 질문이 있습니다.

0

428

1

Promise.all관련 질문 ("여러 이미지 미리보기" 중...)

0

303

1

cdn 주소

0

502

1

특정 user 페이지 가져오기 질문있습니다.

0

289

1

mime-types에서 jpg타입 저장이 안됩니다.

0

414

2