1. 프로젝트 소개 및 역할
11/15부터 시작해서 11/26까지 프런트3명 백엔드 2명으로 구성된 팀으로 핀터레스트를 구현하는 2차 팀 프로젝트를 위코드에서 하게 돼었다. 팀원들과 초기세팅을 마치고나서 역할 분담을 어떻게 할지 회의했는데 3가지 파트로 나누어서 분담하기로 햇다. Nav바 업로드페이지, 로그인페이지 카카오 소셜로그인, 메인페이지 마이페이지, 이렇게 파트로 나누었고 나는 로그인페이지 카카오 소셜로그인을 맡기로 했다.
2. 사용된 기술
1. React
2. React hook
3. JavaScript
4. Styled-Component
5. git
3. 카카오 소셜 로그인 구현!!!!
처음에 소셜로그인을 맡았을때 상당히 쉬울거라고 생각을 했다. 정말 오만도 이런 오만이 없을거다. 사용자가 입력한 아이디 비밀번호를 카카오 서버에다가 전달해주는 이런 방식으로 생각했는데 기능구현을 위해서 블로그를 찾아보자 절망에 빠졌다...
3.1 블로그마다 너무나도 다른 방법들..
소셜로그인 구현하는 블로그를 30개 넘게 찾아봤었다. 블로그 작성자들 마다 너무나도 다르게 구현을 했고 이해조차 제대로 하지못했다.
유튜브를 보면서 생각없이 코드를 따라쳐보기도 하고 블로그에 있는 코드를 가져와서 복붙해보기도 하고 정말 많은 코드들을 써봤다.
3.2 백엔드 카카오 서버와 같이 통신
하지만 저 코드들은 거의 다 프론트에서 바로 직접 카카오 서버와 통신해서 모든 정보를 가져오는 로직들이었다. 내가 구현해야하는 로직은
카카오 서버에 통신후 백엔드한테 카카오 서버로부터 받은 정보를 백엔드한테 넘겨줘서 백엔드에서 발급한 자체 토큰을 받아오는 로직이었다. 정리하자면 프론트에서 카카오 서버에 인증/인가 코드전달 -> 카카오측에서 발급해준 access_token 저장 -> access_token을
백엔드 headers에 담아서 전달 -> 백엔드측 자체 토큰을 받아 로컬스토리지에 저장.
3.3 공식문서를 보면서 RestApi 로 구현
백엔드랑 여러번 이야기를 한 후 저 위 로직들을 이해하고 코드로 구현하기 위해서 카카오 개발자 공식을 보면서 했다. 여태 공식문서를
보면서 제대로 기능구현을 한 적이 없었던 나는 상당히 애를 먹었다. 멘토님들이 항상 공식문서를 보면서 하라고 했던 이유를
이번에 카카오 소셜로그인을 구현하면서 많이 깨달았다. 개인블로그에 나와있는것들을 방법이 다 다르고 뭔가 더 응용을 하기에는
한계가 있다는걸 느꼈고 공식문서도 잘읽으면 답이 나와있다. JavaScript Sdk와 RestApi중 RestApi로 구현하기로 선택했다.
3.4 백엔드와 통신하기까지 난관
프론트에서 카카오서버로부터 정보를 보내는것부터 벽을 만났다. RestAPi 형식으로 카카오 서버에 사용자 정보를 전달해주기 위해서는
queryString형식으로 body에 담아서 전달해줘야하고 이를 위해서 구글링을 정말 수십번을 했었다.
이를 해결하고나서 마지막 관문인 백엔드와 통신하는게 남아있었다. 이 과정도 정말로 쉽지않았다. 백엔드와 같이 Redirect Url을
맞추는거부터 시작해서 마지막으로 RestApi키 값도 통일해서 해야하는 사실을 3시간동안 삽질을 하면서 알게되었다...
3.5 로그인 화면
카카오 소셜로그인에 성공하게되면 메인페이지로 넘어가는 장면이다.
4. 아쉬운점
기능구현을 하면서 결국 내 머리속에서 로직이 어떻게 돌아갈지 제대로 이해하고 있어야 코드를 짤 수 있다는걸 뼈저리게 느꼈다.
기능구현에만 급급해서 이해 못한채로 단순히 남의 코드를 복붙해서 구현하는건 머리속에서 남지도 않고 응용도 하지못한다는걸
이번 프로젝트에서 배웠다.
그리고 로그인페이지에서 마우스 스크롤 방향에따라 이벤트를 작동하거나 제어하는거를 완전히 구현하지 못해서 아쉬웠다.
5. 로그인페이지 화면
UseRef를 사용해서 버튼을 클릭했을때 원하는 곳으로 이동하는걸 구현했다. UseEffect와 setTimeOut을 이용해서 2초 간격으로
자동으로 문구와 색깔이 변하도록 구현했다.
6. 프로젝트 후기
정말 만족스러운 2차 팀프로젝트라고 말할 수 있을거같다. 팀원들 모두 각자 맡은 부분을 너무나도 잘 구현해줘서 좋은 결과물이
나온거라고 생각한다. 또한 공식문서를 보면서 기능구현을 한 내 자신에게도 만족스러운 프로젝트였다. 계속해서 배우고 찾아가면서
공부하는 방법도 습득한 좋은 시간이었다. 다만 1주차에 체력적으로 좀 지쳐서 금요일 일요일에 제대로 못한건 아쉽지만은
이 또한 체력관리도 지속적으로 해줘야 개발을 잘 할 수 있다는걸 알게된 2차 팀프로젝트였다.