apollo-link-rest

https://www.apollographql.com/docs/react/api/link/apollo-link-rest/

REST Link

이번에 맡게 된 웹 애플리케이션에서도 아폴로 클라이언트를 사용한다. 최근에 REST API를 연결해야 해서 방법을 고민하다가 apollo-link-rest라는 좋은 것을 찾게 되었다. 팀 슬랙 채널에 "나 이거 써본다?"라고 들이대고 시도해봤다. 다른 사람이 예전에 작업한 내용을 보니 axios를 사용해 통신했는데, 이미 그 이전에 아폴로 클라이언트로 GraphQL API를 사용하고 있었다. REST API를 여기에 연결하면 괜스레 HTTP 클라이언트 라이브러리를 두 개나 사용할 필요가 없겠다 싶어 채택한 방법이다.

CORS 설정 때문에 살짝 애를 먹었다. 아무리 클라이언트 코드를 봐도 잘못이 없다면 서버 쪽 코드도 같이 봐주는 편이 빠르게 문제가 해결된다. 서버 개발자랑 같이 원인을 찾아본 결과, api에서 preflight 요청에 대한 응답 처리를 제대로 해주지 않고 있었다. 내가 보낸 요청을 눈을 크게 뜨고 보면, Access-Control-Request-Method 헤더가 있다. 서버 쪽에서 이 메서드를 Access-Control-Allow-Methods 헤더 안에 허용한다고 명시해야 preflight 요청에 대한 응답이 정상으로 돌아와서 본 요청이 진행된다. Access-Control-Allow-Origin 헤더에다 origin 설정도 요청 보내는 쪽으로 잘 설정해줘야 한다. 응답 코드도 당연히 200 OK로 보내야 한다. 서버 개발자가 나에게 왜 Postman 툴을 사용해서 요청을 날리면 응답이 제대로 들어오는데, 브라우저는 다르냐고 물어봤다. 아니 이 사람이 왜 나한테 그거를... 그런데 나도 모르겠어서 구글링 해보니 Postman은 브라우저 환경이 아니기 때문에 SOP(Same Origin Policy)를 상관하지 않는다. 마찬가지로 cURL 같은 CLI를 사용해 요청을 날려도 SOP를 상관하지 않는다. 이 점을 유의해야겠다.

크롬 브라우저보다는 파이어폭스 개발자 도구 네트워크 탭이 OPTION 메서드 요청을 잘 보여준다. 크롬은 POST 요청만 보여줬었나? 아무튼 잘 기억은 안 나는데 시원찮았다. 것도 그렇고 전체적으로 요청과 응답을 뜯어볼 때 파이어폭스가 가독성이 좋은 것 같다. 크롬이 은근 파이어폭스보다 개발자 도구가 안 좋은 부분이 있다. 앱을 사용하는 유저 대부분이 크롬 브라우저를 사용하므로, 여기서 먼저 개발하다가 뭔가 시원찮으면 파이어폭스는 다르겠지 기대하며 실행한다. 이번에도 파이어폭스 덕분에 문제 해결을 잘할 수 있었다. 모질라 최고! 그렇지만 이 글은 크롬에서 쓰고 있다.

같이 일하는 시니어 개발자가 자기가 생각했던 방식보다 훨씬 괜찮았다며, 작업하다가 막히면 보라고 자신이 완성한 브랜치를 나에게 보여주었다. 매우 고마웠다. 그 친구가 작업한 것을 보니 디렉터리 구조가 상당히 좋았다. 역시 짬바는 못 따라가... 나는 최대한 뭔가 만들어보려고 하지 않고 프로젝트에서 사용하는 라이브러리의 문서를 최대한 훑어보고 거기서 제공하는 플러그인 등을 통해 기능을 확장하려는 편이라서, 만약 REST api 서비스를 직접 구현하려고 했으면 시간이 오래 걸렸을 것이다. 이번 경우처럼 언제나 그런 부가 기능이 있을 거라고 장담은 하지 못하므로 만약을 대비하여 머릿속에 살짝 기억해 두어야겠다.

오랜만에 컴포넌트 라이브러리 개발하다가 아폴로 쪽 작업하니까 재밌다! 역시 왔다 갔다 해야 기분이 리프레쉬된다.

---

https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/OPTIONS

OPTIONS - HTTP | MDN

https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request

Preflight request - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

https://stackoverflow.com/questions/36250615/cors-with-postman

CORS with POSTMAN