[Sprint 1]Social Login/Get Main API 구현(Week4)

실제 코드 구현 기간 : 11/20~11/29

 

3주간의 SR, 즉 프로젝트 기획 과정을 거치고, 4주차부터 본격적으로 서비스 구현을 위한 코드 작업을 시작하게 되었다.

 

코드 작업 하기 전에...

실제로 나는 백엔드를 메인으로 풀스택 포지션으로 기능들을 구현했다. (덤으로 팀장도 했다 힣)

백엔드를 메인으로 풀스택???

구체적으로 프로젝트 기간동안 내가 맡은 역할에 대해서 이야기해보고자 한다.

 

기본적으로 서버의 API들의 코드 구현과 서버 배포 테스트, 그리고 필요 시 DB 변경을 담당했으며,

클라이언트에서는 실제 서버와 통신하는 코드 작성 및 기존 프론트개발자가 fake data로 구현한 클라이언트 코드에 실제 서버에서 받은 데이터 형태를 기반으로 코드를 refactoring을 담당했다,

필요에 의해 아주 기본적인 컴포넌트? 정도는 구현했으나 기본적인 스타일과 화면 구현은 모두 프론트 개발자 분이 담당해주셨다.

 

즉 나는 서버의 대부분의 작업을 메인으로 하되, 실제 서비스 구현을 위한 서버와 클라이언트 통신, 

그리고 이를 바탕으로 지속적인 통신 테스트와 에러 체크, 배포 테스트를 진행했다.

(실제로 수많은 에러들 덕분에 에러에 무덤덤해지고...익숙해지는 내공을 가지게 되었다...)

 

프로젝트 Sprint 1주차

 

코드 작업 1주차의 가장 메인 업무는 소셜 로그인과 로그인 완료 후 유저가 home screen으로 들어갔을 시에 보게 될 화면을 구현하는 것이었다. 이를 위해서는 server에서는 소셜로그인/home screen에 렌더링할 data read할 get API 구현하는 것이며, client에서는 렌더링된 데이터를 화면에 구현 하는 것이었다.

 

이 중 내가 진행했던 부분에 대해서 정리해보고자 한다.

 

ToDo 1 : 소셜로그인 구현

 

소셜로그인 구현 관련해서는 블로그에 이미 정리해두었으니 기술관련해서는 아래 글들을 참고하면 좋을 듯 하다.

소셜로그인의 원리

python_flask로 서버사이드 소셜로그인 구현하기

React Native 소셜로그인 구현하기(웹뷰 활용)

 

** login screen

실제 위에서 보이는 화면은 프론트 개발자(상현님)이 해주신 것이며, 카카오 로그인 버튼을 클릭하면, web view를 통해 소셜로그인 구현 하는 것을 진행했다.

 

**소셜로그인 진행 gif

server : 기본적인 소셜로그인 구현을 server side로 진행했다, 서버 사이드라 함은, 클라이언트에서는 카카오 로그인 버튼 클릭시에 실제로 소셜로그인 진행을 위한 서버주소로 이동하게 되고, 키와 토큰받기와 카카오 접근하기, 유저의 정보 받아오고 db에 저장하는 모든 작업을 서버에서 진행하도록 하였다.

->client는 최대한 가볍게 만드는 것이 좋다는 이야기를 들었고, 이를 위해 최대한 서버에서 할 수 있는 작업은 서버에서 하기 위해서 이렇게 진행했다. 

->이로 인한 단점은, 소셜로그인 진행 과정동안 아주 잠깐 보이는 것 같은 하얀 빈화면이 디바이스의 통신 상황에 따라서 아주 오랫동안 보일 수 있고, 이것이 디자인상 좋지 못하다는 점이다...이는 수정보완할 예정이다.

 

client: 우선 프로젝트 시작하자마자, expo 환경에서의 한계를 바로 느껴버렸다. 소셜로그인 구현을 위한 native 키 사용에 한계가 있고, 일단 마일스톤 및 더 중요한 기능 구현들을 위해서는 웹뷰가 가장 현실적인 방법이었다. 

빠르게 웹뷰에 대해서 공부하고 구현했던 기억이 있다.(이때 사실 머리 부서질뻔했다...하고 나니까 너무 뿌듯했지만)

 

또한 로그인 과정에서 유저 인증 관련하여 JWT 토큰을 활용했으며, 이를 client에 전달 준 후, client에서는 Async Storge라는 react native 라이브러리를 사용했다. 

 

해당 부분에 대해서도 블로그에 정리해두었으니 하단 블로그 링크 참고하면 된다.

Flask JWT토큰으로 회원 인증 하기(블로그 정리글)

react native Async Storage로 세션값 저장하고 관리하기

 

 

ToDo 2: home screen API 통신 구현 

** home screen

-> 위에서 보이는 화면이 로그인 후에 가장 먼저 볼 수 있는 약올림 서비스의 home screen이다. 프론트 개발자 분이 fakadata로 구현해 놓은 해당 화면을 이제 서버의 api 와 연동 후에, 실제 데이터로 잘 렌더링 되도록 refactoring 해주는 작업까지 해주었다,

-> 이 과정에서 react hook에 대해서 알게 되었다. 

(리액트 훅에 대해서는 곧 블로그로 정리해서 첨부할 예정이다)

 

 

ToDo 3: 통신 배포 테스트 /  에러 체크/ 코드리뷰

그리고 나는 새로운 이슈를 담당하는 것보다 서버와 클라이언트 코드를 expo를 통해 실제 디바이스에 테스트 하면서 작은 버그와 에러들을 체크했다. 내가 해결할 수 있는 부분은 최대한 내가 해결하고 각 이슈를 담당한 팀원분의 코드 수정으로 가능한 부분은 코드 리뷰를해주었다.