proxy를 사용할때와 사용하지 않을때 img 태그의 차이점?

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! 
- 먼저 유사한 질문이 있었는지 검색해보세요. 
- 서로 예의를 지키며 존중하는 문화를 만들어가요. 
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

//

//

//

안녕하세요. 저는 이 강의를 들을때 boiler plate를 쓰지 않았습니다.

그냥 혼자서 만든 boiler plate에 사용하고 있습니다.

저는 module에서 proxy값을 설정하지 않고, 그냥 cors 설정을 통해서 클라와 서버간에 통신을 시켜주고 있는데요.

궁금한점은

<img src={`http://localhost:5000/${image}`}></img>

이 부분입니다.

즉, 위 img테그는 get요청을

http://localhost:5000/uploads/이미지파일.jpg

위의 경로 보내게 됩니다.

그런데 저는 도통 이미지가 출력이 되지 않더군요.

그 이유가 혹시 proxy 설정을 해주지 않아서인가요?

즉. proxy설정을 하게되면,

http://localhost:5000/uploads/이미지파일.jpg

이 경로로 브라우저에서 enter를 치면 이미지파일이 보이나요?

저는 cors설정을 해서 그런지

http://localhost:5000/uploads/이미지파일.jpg

크롬에서 저 주소값을 enter를 치면 이미지파일이 보이지 않앗습니다.

그래서 fs.readfile을 써서 이미지파일을 읽어올수있게 바꿔서 설정했거든요.

음...proxy가 도대체 어떤 역할을 하길래, img파일가지 다 읽어주는지 궁금해서 질문드려봅니다.

안녕하세요 기운님 !
Cors를 쓰는게 더 이상적인것 같습니다... 저도 강의를 다시 찍는다면 cors를 사용할것같아요 ㅎㅎ
우선 질문해주시는 부분이 image 경로 부분인데 그 경로를 정해주는 부분은 proxy 보다는 node.js에서 설정해준 부분을 보면 됩니다. 현재 node.js 가 정적파일을 제공해주는데 그 부분을 설정해주는 부분이

index.js 파일에 보시면

//use this to show the image you have in node js server to client (react js)

app.use('/uploads', express.static('uploads'));

이렇게 써놓은 부분을 볼수있습니다.
이게 의미하는 것은 uploads 폴더에 들어있는 정적파일을 제공할 때 uploads 라는 경로를 사용해서 가져갈수있다는 것입니다.

https://expressjs.com/ko/starter/static-files.html

여기를 참조해주세요 ~!

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