들어가며
2차 프로젝트가 끝이났다.
내가 맡은 웹페이지는 텀블벅 이란 크라우드펀딩 서비스 페이지였다.
약간 생소했던게 내가 봐왔던 웹페이지들은 보통 구매가 목적인 경우가 많았는데
이번에 맡은 텀블벅 페이지는 구매 목적이아닌 창작물에 후원을 하면 그 감사의 표시로 선물을 전달해주는 프로세스를 가지고있었다.
여러 방식들을 배우고 경험해보고싶었던 나에겐 좋은 기회였던것같다.
이번 2차 프로젝트땐 목적이 명확했다.
1차 프로젝트때 해보지못한 기능들 위주로 배워보기로 했고 난 그중에
카카오 소셜로그인을 구현하기로했다.
로그인 페이지 영상
구현사항 설명
REST API 로그인
일단 카카오 소셜로그인을 구현하는것에있어 https://data-jj.tistory.com/53 이 글을 많이 참조하였다.
개발늦둥이님에게 샤라웃을 보낸다.
소셜 로그인을 구현하는 방식이 꽤 다양한데 난 REST API를 이용했다.
카카오 REST API 공식문서 https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api
1 프론트가 카카오 서버에 인가코드를 요청하고
2 받아온 인가코드를 우리쪽 백엔드분에게 전달
3 백엔드분이 카카오에 토큰을 요청하고
4 받아온 토큰을 프론트에 전달
5 리다이렉트 페이지로 이동시키기
겪은 Issue와 느낀점
카카오 Oauth방식은 백엔드 개발자분과의 조율이 필수적이였다.
REST API를 백엔드 개발자분과 맞췄어야 했는데 그 점을 놓쳤다.
REST API를 서로 맞춰야한다는 점, 카카오 서버가 중간에 개입되어서 더 복잡했던 과정이였다. 다행히 백엔드 개발자분과 서로 자료를 수집하고 계속해서 대화하면서 구현에 성공할수있었던것같다.
기능도 기능이지만 서버개발자분과의 대화와 협업이 아주 중요하다는것을 느꼈다.
배경화면을 랜덤으로 띄우기
로그인 구현을 다끝내고나서 시간이 조금 남아 연습겸 심심해보였던 로그인페이지에 새로고침시 랜덤으로 배경화면이 바뀌게끔 재밌는 기능을 추가해봤다.
const backgroundArr = [img1, img2, img3, img4, img5];
const randomIndex = Math.floor(Math.random() * backgroundArr.length);
const backgroundImg = backgroundArr[randomIndex];이미지를 총 5개 import한뒤에 그 이미지들을 배열에 담았다.
그리고 이미지의 length만큼 랜덤으로 돌아가게끔 값을 할당했다.
최종
이번에 소셜로그인을 구현하면서 어떻게하면 유저입장에서 더 편하게 가입을할수있을지, 어떤기능이 얼마나 더 간편하게 만들어질수있을지에 대해 생각해볼수있는 기회였던것같다.
아쉬웠던 점은 기획단계에서 좀 더 많은 페이지를 담당해서 더 많은 경험을 할수있도록 노력했어야 했는데 스스로 한계를 규정짓고 한 페이지만 가져간것이 아쉬웠다. 다음에 또 기회가 된다면 난 이 정도만 해야지 보단 더 적극적인 자세로 더욱 완성도 높은 프로젝트를 만들도록하겠다.
그래도 부가적인 read.me작성이나 동영상 편집, 프로젝트 발표 등 다른 부분에선 적극적으로 나섰던건 참 잘한일인것같다.
