2차 프로젝트...달달한 슈크림! 환상의 팀웍
🗓 프로젝트 기간: 01월 03일 ~ 1월 14일(12일)
🎼 구성원: 프론트엔드 2명 / 백엔드 2명
✅ 내가 맡은 역할
- 카카오 API를 활용한 소셜 로그인 기능 구현
🍉 협업 방식
이번 프로젝트를 진행하면서는 좀더 빠른 의사소통에 집중하여 빠르게 MVP를 만드는 것을 우리 팀의 방향점으로 잡았다. 그러기 위해서 와이어프레임 등의 과정은 이번 프로젝트에서는 생략하고 애자일하게 트렐로를 활요해서 빠르게 서로의 상황을 공유하면서 개발을 진행했다.
2차 프로젝트는 좀 더 백엔드와 통신을 하여 기능을 구현하는 기능을 맡아서 해보고 싶었다. 1차 프로젝트는 리액트를 활용해서 화면을 구성하는 것이 메인 목적이었다면 2차에서는 좀 더 다른 부분을 성장하고 싶었기 때문이다. 그래서 내가 맡은 것이 바로 카카오 소셜로그인 기능 구현이었다. 살면서 처음 해보는 것이지만 이제는 공식문서를 읽어야함을 아는 정도로 성장을 해서 카카오 API 활용한 소셜로그인 기능 구현 공식문서를 읽었으나...
도저히 무슨 말인지 이해를 할 수가 없었다. 그리고 그 이유는 당연히 나의 지식의 부족함이었다. 문서를 읽으면서 용어의 의미를 제대로 모르니깐 읽어도 이해를 할 수 없었던 것이다. 그렇다면 내게 남은 방법은 오직 구글링과 멘토와 잘하는 동기들에게 질문하는 것 뿐!
그렇게 한줄 한줄 영어문장 해석하듯이 공식 문서를 읽어가면서 나는 소셜로그인 기능 구현을 위햇 5단계를 나누었다.
- 1단계: 카카오에서 인증코드를 받아오기
- 2단계: 카카오에서 받아온 인증코드를 다시 카카오에게 보내서 토큰을 요청하기
- 3단계: 카카오에서 받은 카카오 토큰을 백엔드 서버에 넘겨서 슈크림 서비스의 토큰 요청 받아오기
- 4단계: 받아온 토큰을 로컬스토리지에 저장하기
- 5단계: 로컬스토리지에 저장된 토큰 유무에 따른 navigation bar 상태표시 변동하기
1,2단계는 카카오 공식문서에 따라서 REST API를 이용해서 구현하였다. 3단계는 fetch API를 활용하여 저희 서비스의 백엔드 서버에 요청을 보내 토큰을 받아와서 로컬스토리지에 setItem을 이용하여 토큰을 저장하는 방식으로 하였고 react의 useState 훅을 이용해서, 로컬스토리지에 토큰이 저장되어있는지 유무를 상태관리를 하였다. 그리고 토큰 유무에 따라 5단계인 navigation bar를 변동시키는 식으로 기능을 구현 완료
🌈 성장 포인트
슈크림 프로젝트를 통해서는 백엔드와 통신을 하여, 인가코드와 토큰 등을 받아와 저장하는 법을 좀 더 익힐 수 있었다. 그리고 토큰의 저장 상태에 따라 navigation bar 상태를 변동하는 방법을 연습힐 수 있었고 또한 그 와중에 발생하는 에러코드(400, 401)들을 해결하기 위해서 useEffect를 활용해서 해결하면서 좀 더 리액트의 훅을 다루는 역량을 기를 수 있었다.
개발 외적으로도 이번에는 팀을 위해서 내가 최종 발표를 맡으면서 우리가 구현한 프로젝트를 위코드 수강생들과 멘토들 앞에서 발표를 하였다. 이를 통해서 어떻게 사람들에게 프로젝트의 결과를 기술적으로 잘 설명하고 전달하는지를 좀 연습 할 수 있었다. 발표자료 링크
🌟 최종 결과물
