Passport 를 사용한 소셜 로그인 구현 - 항해99 9주차 회고

싱클베어·2022년 3월 13일
0

항해99 회고록

목록 보기
9/13
post-custom-banner

그동안의 이야기

아홉번째 회고록을 작성하게 되었다. 실전 프로젝트가 구체적으로 윤곽이 잡히고 구현이 시작되었고, 동작하는 모습들을 살펴볼 수 있게되었다. 백엔드 개발자의 입장에서는 여전히 화면단이 오픈되어 있진 않아서 깜깜한 화면만 보며 API 테스트를 하고 있지만 점점 살이붙어가고 있는듯 하다. 3주까지 일정이 좀 빡빡하긴 하지만, Minimum Viable Product 라 부르는 MVP의 모습이 다음주중에는 나올 것으로 보여 기대가 많이 되고있다.

  • 실전프로젝트 구현
  • 생각보다 복잡한 소셜 로그인 (Passport 사용하기)
  • 코드 리팩토링과 테스팅
  • 느낀 점
  • 내게 아쉬웠던 것

실전프로젝트 구현

실전프로젝트 1주차엔 아래와 같은 일을 했다.

  • 기능 중 챌린지 전체 기능, 캐릭터, 채팅에 대한 데이터베이스 설계
    • MySQL 시도하였으나 좋아요, 참여하기, 인증샷 부분과 관련한 테이블 관계 설정에 어려움을 느껴 MongoDB로 변경.
  • 공통 폴더 구조, 모델, 초기 공통 서버 기본 코드 작성, 개인별 기능 구현 진행.
  • 깃허브 연결, feature 별로 별도 브랜치 생성하여 작업하고, 완료 시 main에 합치는 전략 수립.
    • 이는 main, dev, feature branch 로 나누었다. 지속적으로 테스트 진행 중에는 dev에 feature들을 합치고, 배포 시 dev를 main에 합쳐 진행했다.

2주차에는 이어서 아래와 같은 일이 진행되었다.

  • API 기능 테스트 중 발생한 버그 해결 및 예외 처리 작성.
  • 캐릭터에 대한 모델, 공통 기본 코드 작성, 개인별 기능 구현 진행.
  • 소셜 로그인(카카오), 테스트 코드, 서버 커스텀 로그 남기기 작성.

그 중 소셜로그인이 생각보다 좀 오래 걸렸다. 거의 이틀 이상을 소비했다.

그리고 디자이너분들의 손을 거쳐, 우리 서비스의 캐릭터가 탄생되었다.

작심삼일 이 핵심 단어이다 보니 머리에 3을 쓰고있는 친구다. 이 친구를 성장시키는 것이 서비스의 주요 기능이 될텐데.. 무엇을 더 해볼 수 있을지 정말 많은 고민이 된다. 현재는 서비스를 이용하면서 얻는 포인트로, 의상이나 악세사리, 표정 같은것을 구매하고 꾸밀 수 있게 하려고 하고있다.

5주에 진행될 고객 마케팅부분도 계속해서 고려사항으로 가져가고 있다. 서비스가 "매일 인증" 단위로 돌아기 때문에 고객들이 이탈할 확률이 매우 높을 것으로 예상되서, 어떻게 해야 고객들이 계속해서 사용할 지를 고민하고 있다. 이 친구가 슬퍼하지 않도록 서비스를 계속해서 잘 꾸려나가야겠다.

생각보다 복잡한 소셜 로그인 (Passport 사용하기)

결론부터 이야기하자면, 이 링크의 플로우로 1차적인 구현이 완료되었다.

소셜 로그인의 구현 방식이 정말 다양하게 나올 수 있는데, 공통적으로 3개의 동작을 동시에 봐야해서 다같이 모여서 어떤 과정으로 로그인이 되는지를 서로 들여다보고 이해하였다.

  1. 사용자의 웹페이지에서, 카카오계정 로그인 버튼 클릭.
  2. 로그인 한 후 ?code=%카카오계정코드% 값을 Backend 서버에 넘기기
  3. 백엔드 서버에서, 해당 코드를 다시 카카오 측으로 보내 유효한지 확인 후, 자체 서비스에서 jwt 토큰을 생성하여 사용자 웹페이지에 전달
  4. 해당 토큰으로 서비스 이용

과 같은 플로우로 진행된다.

Access token, refresh token을 사용해 실제 로그인 유효 시간을 체크하는 로직을 만들고 싶은데, 현재는 그렇게 까진 구현하지 못했다. 카카오계정으로 로그인 하면 카카오계정 + 서비스 에 부여되는 고유 profile.id 값과 닉네임을 받아와 가입시키고 서비스 이용이 가능한 상태까지 구현하였다.

카카오계정 로그인 시 닉네임이 중복될 여지가 있어서, 저장할 때 profile.nickname + '_' + Math.random(1,10000000) 와 같이 닉네임 뒤에 랜덤한 숫자를 부여해야될지는 좀 고민된다. 이 경우는 회원가입 직후 닉네임을 정하는 로직을 하나 넣어줘야 될텐데, 그럼 또 화면이 하나 늘어나고 이는 곧 프론트엔드의 추가적인 일감이 되는 셈이니.. 마이페이지에서 닉네임 변경을 지원할 예정이니 이 기능만으로 둘지 고민이 된다.

코드 리팩토링과 테스팅

팀원분이 jest, supertest 를 사용해 테스트 코드를 작성중에 있다.

다만, 특정 인자를 주고 받기 위해서는 컨트롤러로 빼야 가능하다는 이야기를 듣고, MVC 패턴을 적용해보고 있다.

router에 몽땅 몰려있던 기능, 함수들을 controller 폴더를 별도로 생성해 나눠주었다. 옮기면서 공통으로 뺄 수 있는 함수들은, 프로퍼티 계산을 담당하는 공통 모듈로 이동시켰다.

좋아요 여부, 참가여부, 습관 만들기의 진행 상태, 참여자 수, 총 인증횟수, 경과 날짜 계산, 오늘 업로드 여부 체크 등

공통적으로 쓰는 것이 생각보다 많아 분리하고나니, 코드가 꽤나 간결해졌다.

느낀 것

정말 항해99를 진행하면서 늘 시간이 빨랐는데, 실전 프로젝트 주간은 정말 거기에 더 빠른 가속도가 붙어 정말 빠르게 지나가고 있다. 얼마 구현하지 못한 것 같은데, 회의도 몇 번 하지 않은 것 같은데 눈 깜짝할 새에 지나가버렸다.

매주 금요일 저녁마다 쉬는 시간을 가질겸 팀원들과 아주 간단한 MBTI 성향 테스트를 같이 해보고 있다. 재밌게도, 프론트엔드와 백엔드가 성향이 정말 정확하게 갈리고 있다. 백엔드는 I와 J의 요소를 갖고있고, 프론트엔드는 주로 E와 P를 갖고있었다.

물론 안다. 테스트 해보는 컨텐츠 특성상 문항수도 적고, MBTI 검사 자체가 딱 칼로 무 자르듯 사람의 성격을 재단할 수는 없고 가중치가 단순히 약간 더 높다 수준이긴 한 것을 잘 알고 있다. 그래도 혈액형 심리학이 한창 유행할 때 보다는 훨씬 더 그 사람의 현 상태, 또는 지향하는 행동 양식을 알아보기엔 좀 더 유용하게 사용할 수 있다고 생각이 든다.

내게 아쉬웠던 것

늘 생각하는 거지만, 회의를 주도적으로 진행하고 있는 입장에서 아이스브레이킹을 좀 잘했으면 좋겠다고 생각이 든다. 적당히 근황 토크도 진행하고, 회의 안건으로의 연결도 잘 이어서 했으면 좋겠는데 쉽지가 않다.

한 주의 계획을 잡는 것도 구체적으로 제시를 하지 못했더니 백엔드의 경우 이번주는 좀 설렁설렁 지나갔단 생각도 든다. 실제로 한 것은 많은데, 무엇을 완료함 이라는 정확한 요소로 나타나지 못해 그게 좀 아쉽다.

이번주는 중간 발표도 껴있으니, MVP를 완성한다는 느낌으로 좀 더 완성도를 높이는 방향으로 키를 잡으려고 한다. 최종 발표때는 정말 뿌듯한 기분이 들었으면 좋겠고, 다들 이 포트폴리오로 취업 뽀개기를 잘 하셨으면 하는 바램이다. 그러기 위해, 스스로 좀 더 치열하게 고민하고 팀원들의 의견을 계속해서 들어나가 개선해야겠다고 생각이 든다.


참고 URL

profile
안녕하세요.
post-custom-banner

0개의 댓글