프로젝트들이 어느 정도 진행되어서 삽질(?)한 과정을 기록으로 남긴다. 이 과정에서 이해한 소셜 로그인 과정과 백엔드와 확인 테스트를 진행하며 네트워크 탭으로 CORS 얘기를 주고받은 소통 내용들을 정리하고자 한다.

아직 완전한 문제 해결은 안 되었지만, 그래도 소통을 주고받는 과정에서 배운 게 많았다. 프론트엔드가 내부 로직에 대해 고민하고 회사가 아닌 곳에서 백엔드와 이렇게 치열하게 소통할 일은 흔치 않을 것 같다.

소셜 로그인

현재 진행 중인 Effitizer 프로젝트는 구글, 카카오, 네이버 3가지의 소셜 로그인을 사용하고 있다. 구글은 아주 오래 전에 비교적 손쉽게(?) 구현이 되었는데 카카오와 네이버가 아직까지 백엔드를 고생시키고 있다.

사실 카카오/네이버의 소셜 로그인은 프론트쪽에서 인가 코드를 받아서 다시 보내주면 사용 가능한 토큰을 발급해준다. 하지만 백엔드에서는 구글을 구현할 때 자체 토큰을 만들어 사용한 방식을 카카오/네이버에서도 사용하기 위한 방법을 찾고 있었다.

백엔드가 소셜 로그인에 대해 고민하는 동안 나는 3주 동안 '소셜 로그인'이란 과정 자체에 대해 이해하려고 애썼다. 이 부분은 프론트쪽에선 굳이 알 필요 없다고 했지만 그래도 대부분을 백엔드가 구현한다 해도 전체적인 과정을 프론트에서 알고 있어야 한다고 생각했다.

자료 글을 몇 개를 읽어도 이해가 잘 안 되고 솜 씻어먹은 너구리 마냥 머릿속에 들어온 개념들이 증발되는 것을 반복한 후 이걸 한번에 해결해준 것이 바로 다음 글이다.

🧨 REST-API 활용한 카카오 소셜 로그인 구현(feat. React)

위 글을 보고 드디어 3주 간의 방황을 종료했다. 이미지로 설명되어있으니 한눈에 들어왔다. 우리 프론트 팀원이 오프라인 회의 때 소셜 로그인에 대해 그렇게 열심히 설명해줬는데 나의 의도와는 상관없이 한 귀로 들어와 한 귀로 그대로 나갔던 것을 생각하면..😭(ㅈㅅ)

나에게 유레카를 준 그림이 바로 다음 그림이다.

위 과정을 이해하는 차원에서 글로 풀어서 써보았다.

1. 브라우저에서 사용자가 카카오 소셜 로그인(노란 버튼)을 누르면 프론트엔드가 카카오에게 redirect URI을 보낸다.
2. 카카오는 주소창 뒤에 쿼리로 붙는 인가코드(code)를 프론트에게 준다. (이건 useRouter 쓰면 꺼내쓸 수 있음)
3. 프론트가 카카오에게서 받은 인가코드(code를 useRouter로 꺼내서 POST 통신으로 보냄)를 백엔드에게 보낸다. (=> 현재 프로젝트에서는 CORS 때문에 이 부분이 막혀 있다)
4. 백엔드는 프론트에게 받은 인가코드(code)를 다시 카카오에게 보낸다(이거 우리가 너희한테 받은 인가코드야..) 이때 프론트에서 카카오쪽에 보냈던 redirect URI도 함께 넘긴다.
5. 카카오는 redirect URI가 프론트와 백엔드가 보내온 것이 서로 일치하는지 확인하고(유효성 검증), 일치하면 토큰을 발급해서 백엔드에게 보낸다.
6. 백엔드는 카카오에서 받은 토큰을 가지고 '유저 정보를 활용해서(여기는 무슨 말인지 모르겠다)' 우리쪽 서버만의 전용 토큰을 발행한다.
7. 프론트에서는 백엔드가 보낸 토큰을 받아 보관(? 쿠키? 로컬 스토리지?)하고 사용자가 사이트를 이용할 수 있도록 적절한 화면으로 리다이렉트시킨다.

이해한 기념으로 라쿤좌 등장
(저 인자한 표정..)

글로 정리하다보니 알게 되었다.
카카오 로그인에서 백엔드 자체 토큰을 쓸 수 있다는 걸 ㅎㅎ
이 방법이 카카오에서 가능한지 백엔드에서 찾고 있다고 했는데 내가 찾은 건가? 하지만 이미 백엔드에선 알고 있을 듯

여기까지가 3주 동안 그토록 이해하려 애썼던 소셜 로그인 과정이다.
네이버도 카카오와 비슷하다고 했으니, 아마 카카오에서 자체 토큰이 된다면 네이버에서도 비슷한 방식으로 가능할 것이다.

사용자는 소셜 로그인 버튼 클릭 후 2-3초 지나면 바로 로그인이 되어 화면이 나타나지만 그 짧은 시간 동안 눈에 보이지 않는 이 수많은 일들이 일어난다니.. 프로그래밍의 세계란 놀랍다.

백엔드와의 협업 과정 (feat. Slack)

다음은 소셜 로그인을 테스트해보는 과정에서 백엔드와 주고받은 슬랙 내용이다.

개발용1 서버와 개발용2 서버 두 가지를 가지고 백엔드와 토큰 테스트를 해보는 과정이다.

이때는 아직 소셜 로그인 과정을 제대로 이해 못한 상태여서 여러 가지 기본 질문들을 많이 했었다.

혼자서만 하다보면 이상한 데 파고 있기도 하고 잘못 이해한 부분도 생기는데, 이렇게 실시간으로 소통을 하니 그런 부분이 빨리 잡혔다.

에러가 떴을 때

에러가 떴을 때는 다음과 같이 에러 화면과 함께 작성한 코드를 슬랙에 올려뒀다.
그리고 답변을 기다리는 동안 나름대로 해결 방안을 찾아본 링크도 공유했다.

주로 답변을 교환했던 백엔드 분이 회사에 다니고 계셔서 나 혼자서 이렇게 슬랙에 막 올려두면 나중에 밤 시간에 상세히 답변이 왔다. (가끔은 업무 시간 중에도 종종 답변이..)

그리고 이 모든 대화는 프로젝트의 모든 개발자에게 공개된 'dev' 채널에서 이루어졌다.
공개 채널에서 얘기하는 건 나의 부족함이 다 까발려지기(?) 때문에 처음에는 매우 부끄럽고 어색했지만 이제는 뭐.. 🤹‍♀️🙌

팀으로 일할 땐 실력을 숨기지 않는 게 좋은 것 같다. 상대의 퍼포먼스를 예측할 수 있어야 다음 진행도도 예측이 가능하고, 혹시 발생할지 모를 경우도 대비할 수 있기 때문이다. 아직은 이렇게 적극적으로 주고받는 부분이 조금 어색하지만, 개발은 곧 협업이니까 계속해서 극복해나가려고 한다.