원래는 블로깅주제를 소셜 로그인을 위한 Oauth 로 잡으려고 했다가. query string 이라는 신박한 개념을 발견하고 급 선회 하였다.
Query string 이란 무엇일까 ?
그전에 query는 무엇 일지 궁금해서 구글 사전검색을 해보았다.
우리가 사용할 쿼리 스트링의 쿼리랑 일맥 상통 한다고 할 수는 없겠지만 질문 ? question 이랑 어원을 같이 하는 것 이라 추측 할 수 있겠다.
주니어(진) 개발자인 내가 생각 하는 쿼리 스트링의 정의는 다음과 같다
Query String: 서버에게 무엇이 필요한지, 혹은 클라이언트에게 무엇이 필요한지 묻는 문자열.
question 이랑 왜 어원을 같이 할 것이라 추측 했는지 여기서 알 수 있다. 쿼리스트링은 서버 사이드에서는 클라이언트가 무엇이 필요 한지, 클라이언트에서는 서버에 무엇이 필요 한지를 올리는 것 이다.
서로 무엇이 필요 한지 묻는 다는 말이 다소 안 와닿을 수 있으니 예시 코드를 통해서 보도록 하겠다.
먼저 서버에서 다음같이 라우터를 열었다고 가정하면,
서버 코드에서 query 다음과 같이 정의된다.
즉 서버에 저런식으로 라우터를 열어 놓는 것은 마치 클라이언트에서
저런식의 함수를 사용하는것과 같은 효과를 불러 일으킬 수 있다는 것이다.
실제로 chopchop(4주 프로젝트 진행중인 아이템) 에서 `/videos/${this.props.videoID}` 이런 형식으로 서버에 요청을 보내면 해당 videoID를 가진 video 정보를 내려준다.
그럼 반대로 클라이언트에서 쿼리스트링을 어떻게 이용 할 수 있을까 ??
이전에 쿼리스트링을 쓰기 전에는 소셜 로그인을 위해 총 3개의 라우터가 필요했다.
- 소셜 로그인 요청을 받을 라우터
- 소셜 로그인 인증 과정을 거쳐서 소셜이 redirect 해준 라우터
- redirect 라우터에서 처리 하지 못한 토큰을 가져가는 라우터
그러나 쿼리 스트링을 사용하면서3번의 과정은 필요없이 2개의 라우터만으로 소셜 로그인을 구현 할 수 있게 되었다. 예시 코드는 다음과 같다.
저런식으로 클라이언트로 리다이렉트를 시켜주면 클라이언트에서는 리다이렉트 된 url 을 바탕으로 클라이언트에서 query string parse (다양하게 입맞에 맞추면 된다) 를 통해서 받은 토큰을 AsyncStorage 혹은 LocalStroage 등등에 저장 해주면 된다. codestates pre-course 에서 풀었던 용도를 알수 없는 toy problem 들의 용도를 어느정도 깨닫게 되는 과정 이었다.
원래 후자의 방법 밖에 알지 못했지만, 서버 사이드에서도 라우터 뒤에 파라미터를 설정 해줘서 라우터를 다양 하게 열거나, 굳이 포스트 요청 등을 사용 하지 않아도 다양한 겟 요청들을 처리 할 수 있다는 것을 알게 되었다.
