https://s3-us-west-2.amazonaws.com/secure.notion-static.com/39451d7d-171a-40ab-9ad6-7de5621db1a4/Frame_14.png

우리는 GraphQL을 사용한 Apollo Server에서 인증 과정을 어떤 식으로 처리할지에 대해 많은 고민을 했습니다. 그리고 directive를 사용하기로 했죠!

그래서 우리가 directive를 프로젝트에 적용하기까지의 과정에 대해 말씀드리려고 합니다.

바쁘신 분들을 위한 3줄 요약!

GraphQL은 어떤식으로 인증을 해야 할까?

처음에 우리 팀은 GraphQL에서 어떤 인증방식을 사용해야 하는지 고민했습니다. 모든 쿼리 요청이 들어올 때 context에서 인증을 처리할 수는 있었지만 쿼리마다 선택적으로 인증 여부를 선별하기에는 무리가 있다고 판단했고, 2가지의 방법을 생각해봤습니다.

REST API

저희가 생각한 첫 번째 방법은 서버를 GraphQL 서버와 REST API 서버로 분리해 인증 권한이 필요한 모든 요청은 GraphQL 서버에서 처리하고 인증 권한이 필요하지 않은 요청 (로그인, 회원가입 등)은 REST API를 통해 처리하는 것입니다. 다소 번거롭고 복잡할 수 있지만 구현할 수 있다고 판단했죠.

Resolver Wrapper

저희가 생각한 두 번째 방법은 인증이 필요한 쿼리의 리졸버 함수마다 래핑해주는 고차함수를 구현해 인증을 고차함수에서 처리하고 인증이 완료되었다면 인자로 넣어준 리졸버 함수를 실행해 처리하는 것입니다. 이 방법 역시 비교적 쉽게 구현할 수 있다고 생각했습니다.

여기서 우리 팀이 선택한 방법은 REST API를 사용해 인증을 처리하려 했습니다. 이 방법을 선택한 이유는 크게 두 가지 이유가 있습니다.

  1. 인증이 필요한 쿼리의 리졸버 함수마다 래핑을 한다면 매번 모듈을 import해와야 하는데 코드가 깔끔하게 작성될 것 같지 않았습니다.
  2. 우리의 프로젝트는 실제 상용화할 서비스가 아니라 "우리 이만큼 할 수 있어!"라고 보여주는 성향이 강한 프로젝트였기 때문에 프론트에서 Redux & Redux-Saga를 통해 우리의 역량을 좀 더 보여주고 싶었습니다.

그래서 REST API와 Redux, Redux-Saga를 통해 신나게 인증과정을 모두 구현했습니다! 그리고 주마다 멘토님들이 진행 상황을 보고 피드백을 주시는 시간이 다가왔죠.

피드백 중 인증처리 때문에 REST API와 GraphQL을 같이 쓰고 프론트에서 Redux-Saga까지 사용하면 많이 복잡할 것 같은데... GraphQL의 directive라는 기능을 참고해보세요! 라는 내용이 있었습니다.

그래서 우리 팀은 directive가 뭐지? 한번 찾아보자! 하며 공식 문서에서 관련 내용을 공부하고 다시 회의를 진행했습니다. 결론은 "지금까지 구현한 인증 과정을 모두 directive로 바꾸자!"였습니다.

처음 사용해보는 기술이라 러닝 커브가 있었지만, 한 가지 기술로 인증과정을 간편하게 처리할 수 있다는 장점과 실제로 directive가 적용된 코드를 살펴보니 좀 더 이해하기 쉬운 코드라고 생각했기 때문이었습니다.

그래서 directive가 뭔데? 🤔

GraphQL 공식 스펙을 살펴보면 directive에 대해 다음과 같이 정의하고 있습니다.

directive는 GraphQL 문서에서 대체 런타임 실행 및 유형 유효성 검사 동작을 설명하는 방법이다