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

Question

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. // // // 안녕하세요. 저는 이 강의를 들을때 boiler plate를 쓰지 않았습니다. 그냥 혼자서 만든 boiler plate에 사용하고 있습니다. 저는 module에서 proxy값을 설정하지 않고, 그냥 cors 설정을 통해서 클라와 서버간에 통신을 시켜주고 있는데요. 궁금한점은 < img src = { `http://localhost:5000/ ${ image } ` } > 이 부분입니다. 즉, 위 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파일가지 다 읽어주는지 궁금해서 질문드려봅니다.

John Ahn · Answer

안녕하세요 기운님 !   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 여기를 참조해주세요 ~!