210722(목) - 소셜 로그인 기능, 게시판 수정 및 삭제

1. 소셜 로그인 기능 (프론트 + 백)

2. 게시판 수정 및 삭제 (프론트)

---

1. 소셜 로그인 기능 (프론트 + 백)

네이버와 카카오 OAuth (Open Authorization)을 적용을 마쳤다. 카카오를 기준으로 전체적인 과정에 대해서 설명하면 다음과 같다.

회원이 아닌 경우

• 로그인 페이지에서 '카카오로 시작하기' 버튼(a 태그로 만들어진 버튼) 클릭하면, a 태그의 href(카카오에서 제공하는  로그인 주소 + clientId 및 카카오로부터 응답을 받을 주소(redirect URI)를 합쳐 만든)를 통해 카카오 로그인 창으로 이동. 인가 코드는 우리 팀이 컴포넌트로 만든 페이지 주소(ex /auth/kakao)가 a태그 href에 포함되므로 카카오에서는 그곳으로 응답을 보낸다. 그럼 그 페이지의 URI에서 필요한 정보를 파싱하고, 백엔드와 논의를 통해 맞춘 정보를 추가하여 백엔드에게 보낸다. 백엔드는 그 정보를 토대로 카카오에게 다시 정보를 보내서 유효성 검증을 한다. 백엔드가 카카오로부터 받은 유효성 검증 응답을 바탕으로 프론트에게 요청에 대한 응답을 준다. 우리팀은 회원이 아닌 경우 백엔드에서 프론트에게 accessToken을 주지 않도록 했다. 회원이 아니므로 백엔드로부터 accessToken이 오지 않고 프론트엔드는 로직을 바탕으로 카카오 정보를 제외한 추가 정보(나이대, 닉네임)를 받기 위해 유저를 우리팀 앱의 자체 회원 가입 페이지로 이동시킨다. 유저가 정보를 입력하고 회원 가입을 누르면 프론트엔드에서 백엔드로 그 정보를 보내고 백엔드는 자체 회원 중복 로직을 통해 검증한 후, 통과하면 프론트로 accessToken을 응답한다. 프론트는 백엔드로부터 accessToken을 받으면 유저를 홈페이지로 이동시킨다. 

회원인 경우

• 로그인 페이지에서 '카카오로 시작하기' 버튼을 클릭하면 이미 로그인한 이력이 있으므로, 자동으로 로그인되고 인가 코드를 redirect URL(우리가 자체적으로 만든 빈 페이지 주소)로 준다. 그러면 프론트 로직에 의해 해당 페이지의 주소에서 파싱 해서 데이터를 백엔드로 전달하고, 백엔드는 카카오에게 다시 전달하여 회원임으로 검증받는다. 백엔드는 검증 결과를 토대로 프론트에게 accessToken을 주고, 프론트는 백엔드로부터 accessToken을 받으므로 유저를 홈페이지로 이동시킨다. 이 과정들을 유저 입장에서 보면 '카카오로 시작하기' 버튼을 누르면 바로 로그인이 되고 홈페이지로 이동된 결과를 보게 된다.

2. 게시판 수정 및 삭제 (프론트)

기존에 게시판 수정 및 삭제 api를 로그인 기능이 완성되기 이전의 브랜치에서 따서 작업했다. 오늘 로그인 기능이 완성되면서 게시판 수정 및 삭제 api의 서비스 로직을 따로 분리하고 우리가 정한 폼에 맞게 수정했다. api가 호출되는 과정은 클릭에 의해서 핸들러가 호출되면, 핸들러는 다시 서비스 로직에 있는 ~Async 함수를 호출한다. 이 함수 안에는 다시 fetch를 요청하는 request~ 함수를 호출한다. ~Async 함수에서 request~ 함수의 에러 처리를 하고 최종적으로 request~ 함수의 성공 및 실패의 상태와 데이터가 있다면 데이터를 반환한다. 이곳에서 에러 처리는 개발자를 위한 에러 처리이고, 실패 상태가 반환되었다면 핸들러에서 또다시 에러 처리를 하여 모달로 사용자에게 보여준다.