20조 REWIND Frontend

Team

• Frontend : 오세명,한우석 (REACT)
• Backend : 오준석,최선강 (SPRING)
  
  
  

REWIND란?

• 그 동안 Backend,Frontend가 공부하고 정리했던 내용들을 각 프레임워크별 (Spring,React,Node.js)로 모두 공유할 수 있는 게시판을 구현하려고 합니다. 게시판은 기본적으로 메인페이지에 모든 프레임워크들의 게시글들이 한번에 보여지며 각 카테고리속에는 그에 해당하는 게시글들만 보여집니다. 유저는 로그인을 하여야 기본적인 서비스를 이용할 수 있습니다.

Kakao Login

이번 프로젝트에서 가장 짜릿했던 순간을 뽑으라고 한다면 난 주저하지 않고 카카오 로그인을 성공한 것을 뽑을 것이다.

처음 프로젝트를 시작 할 때만 해도 카카오 로그인은 "그냥 버튼에 링크만 달아주면 백엔드가 알아서 처리 해줄게요~" 라고 하셔서 아무런 걱정 없이 프로젝트를 진행하다가 막바지가 되어서 카카오 로그인을 구현하려고 하니 연결이 되지 않았다.

백엔드 강의 내용에서는 클라이언트와 통신 없이 모든 요청을 백엔드에서 처리한 후 클라이언트로 URL redirection만 걸어주면 로그인이 구현되서 가장 쉬운 기능 정도로 치부하고 진행을 했었는데 다른 팀들 역시 하나,둘 같은 문제에 직면하게 되었다.

여러 사람들이 모여 토론을 하고 의견을 나누며 고민을 하다가 다들 포기하고 돌아갔는데 우리 팀은 오기가 생겨 끝까지 하고 말겠다는 생각에 방법을 찾아 나가기 시작 했다.

• https://kauth.kakao.com/oauth/authorize?client_id={REST_API_KEY}&redirect_uri={REDIRECT_URI}&response_type=code 프로트 서버에서 위 링크를 실행한다.
• https://kauth.kakao.com/oauth/authorize 서버로 통신하여 client_id의 REST_API_KEY를 확인 그리고 카카오계정을 확인하여 카카오서버에서 redirect_uri의 url로 통신한다. 그리고 서버에서는 카카오 서버에서 보내온 정보를 가지고 기존 회원이면 카카오id만 db에 저장하여 강제 로그인하고, 기존 회원이 아니면 회원가입과 강제 로그인을 한다.
• 여기서 Frontend와 Backend의 통신과정에서 카카오 로그인을 시도하면 계속 500에러가 떴었는데 구글도 찾아보고 했지만 도무지 방법을 알 수 없었을때 REDIRECT_URI이 기존 설계 경로와는 다르게 설정되어있었다는 것을 발견했었다. 작은 실수지만 이렇게 많은 시간을 잡아먹을 수 있다는것을 다시한번 느끼게 되었으며 앞으로는 수정,변경,작성시에 최대한 꼼꼼하게 살펴봐야겠다 라는 생각이 다시금 들게 되었습니다.

위의 문제들은 해결했지만 소셜로그인이 정상 작동 하지않아서 제대로 구현하기로 마음먹고 시작했던 과정

• 백엔드 측에서 REST API 키를 받고 카카오 서비스 규약에 맞게 URI를 구성하여 링크를 만들면 유저는 해당 링크에 접속을 하여 카카오에서 선행적으로 로그인을 진행한다.
• 카카오 로그인이 성공적으로 완료되면 자동적으로 Redirection Link에 인가코드와 함께 GET 요청을 보내게 되고, 서버는 그 인가코드를 통하여 카카오 서비스에 재요청 후 Access token과 Refresh Token을 받아 클라이언트에 제공한다.
• 처음 기능을 구현할 때 프론트와 백엔드 모두는 단순히 서비스 구현 URI를 링크로 담은 엘리먼트를 만들면 된다는 생각을 하였다. 그러나 엘리먼트를 만들고 그 URI에 실제로 접속한 순간 JSON만 보여줄 뿐, 클라이언트의 스코프로부터 완전히 벗어났다.
• 해당 문제에 관하여 백엔드와 프론트엔드가 토의 결과 백엔드에서의 서버사이드 렌더링 로직을 클라이언트와의 통신에도 적용하고 있다는 논리적 오류를 발견하였다. 이 문제를 발견한 후 클라이언트에서 인가코드를 직접 보내는 로직을 작성하였다.
• 클라이언트 측에서 카카오 로그인 기능을 구현하기 위해서는 앞서 말씀드렸던 규약 URI에 접속하도록 컴포넌트를 구성해야하지만, Redirection URI를 클라이언트 측으로 바꾸어야 했다. 클라이언트에서 직접 인가 코드를 받게되고 이를 서버에 GET을 통하여 전송한다면 클라이언트의 스코프를 벗어나지도 않고, 서버에서는 인가코드를 받은 것으로 정상적으로 카카오에 요청을 한 후 응답을 통해 토큰을 내려줄 수 있기 때문이다.
• 서버에 정상적으로 인가코드를 전송하였으나 서버에서 카카오로 요청을 보내는 과정 속에서 오류가 발생하였는데, 이는 기존에 카카오에 요청할 때 보내는 endpoint를 클라이언트의 주소로 맞춰야 하는 규칙을 지키지 않았기 때문이다. 해당 부분을 클라이언트의 요청 URI로 바꾸어 요청한 결과 정상적으로 토큰이 발급되었고, 로그인을 구현하였다.
• 카카오 로그인을 구현하면서 클라이언트와 서버 간의 커뮤니케이션 이슈를 겪었으며, 문제의 결정적인 원인은 강의에서 배운 내용으로만 소통을 하였기 때문이라는 생각을 가지게 되었다. 서버 사이드 렌더링과 REST API 통신은 엄연히 다른 경계에 속해있으므로, 해당 기능을 이야기 할 때 정확하게 어떤 맥락에서 이야기를 하고있는지 알아야겠다는 생각을 하였다.