Today I Learned
외부 서버 이미지 프록시 서버로 가져오기
: 이번에 흔히 말하는(?) 이미지 URL로 이미지를 업로드하는 기능을 만들고자 했다. 예를 들어,
위에 이미지처럼 이미지 주소 복사 기능을 이용해서 주소를 복사 한다음에 현재 운영중인 홈페이지에서 input tag에 해당 이미지 주소를 붙여넣기하고 업로드를 하면, canvas에 해당 이미지를 업로드해서 작업을 할 수 있는 기능을 구현하고자 했다(img tag의 src attribute에서만 쓸 경우 cors 이슈가 없다).
이 기능을 구현하기 위해 처음에는 FE 단에서 해당 주소(복사한 이미지 주소)로 fetch 요청을 보내서 이미지를 받고자 했다. 하지만, 당연하게도 cors 정책에 걸려서 이 방법을 쓸순 없다는 것을 알았다(jsonp 등 다양한 방법을 시도했지만, 완전한 해결책은 없었다).
하지만, 사실 되게 심플한 해결책이 있었다. cors는 브라우저에서 보낸 요청에 대해 동일한 도메인인지를 체크하는 것이므로 백엔드 쪽에서 해당 주소를 가지고 이미지를 받아와서 fe한테 전달해주면 되는 일이었다. 즉, 프록시 서버를 거쳐서 이 문제를 해결하는거다. 그렇게 해결을 해서 잘 쓰고 있었는데, 이번에 우리의 프로젝트가 사외 버전으로도 제작되면서 우리의 백엔드 API를 쓸 수 없는 이슈가 생겼다. 따라서, 다른 방법을 찾아내야했다.
그렇게 서치하다가 찾아낸건 https://allorigins.win/ 여기였다. 사실 우리가 만들었던 백엔드 서버의 api가 하는 역할과 동일한 기능을 하는 단순한 프록시 서버가 제공하는 api인데, 우리 서버는 거칠 수 없었기에 외부 망에 배포돼있는 서버를 이용하고자 했고, 그중에서도 나름 인지도 있는 api를 선택했다. 하지만, 속도 부분이 좀 아쉬워서 이 api를 호출하는 식보다는 https://github.com/gnuns/allorigins 해당 링크에서 프로젝트를 다운 받아서 우리 백엔드 서버에서 가져다 쓰는 방식으로 구현했다.
이 때, 좀 궁금한게 기존에 우리 백엔드 팀이 만들어준 API를 썼을 때는 일부 이미지 업로드에 실패하는 케이스가 꽤 많았다. 하지만, 이 api를 태우니까 그게 없어졌다. 따라서, 혼자서 백엔드 API를 구현해보면서 연습해보면 좋을 것 같다.
추가 정보
//api.allorigins.win/getfetch에 태울 때, 꼭 앞에 프로토콜을 붙여주지 않고, 이런식으로 써도 된다. 그러면 자연스럽게 해당 브라우저에서 현재 접속된 사이트에서 이용한 프로토콜을 앞에 쓰게 된다.- encodeURIComponent : URI로 데이터를 전달하기 위해서 문자열을 인코딩 해주는 메서드.
예를 들어,http://a.com?name=egoing&job=programmer&blogger이런 url로 요청을 보낸다고 했을 때 뒤에programmer&blogger이부분에서&이 문자는 URI 쿼리 파라미터의 값중에 하나이다. 하지만, 그 전에 나온a.com?name=egoing&job=pr여기서의 & 는 쿼리 파라미터의 복수형을 표현하기 위한 기호이다. 따라서, 둘을 구분해줘야한다. 이 때, 뒤에&기호를http://a.com?name=egoing&job=programmer%26blogger이와 같이%26치환해주는 역할을 하는게encodeURIComponent이 메서드이다.
mini 과제
- 주말에 내가 만든 썸네일 메이커 사이트의 이미지 url 업로드 부분을 수정해보자.
- 로딩 스피너 만들기
- url 포맷 아닌걸 입력하면 에러 메시지 리턴하기
- 백엔드 서버를 만들어서 api 좀더 빠르게하기
- 사이트 : https://velog-thumbnail-maker.vercel.app/
