pug로 express 로딩 화면 구현 및 전체 코드 // views/loading.pug html head link(rel='stylesheet', href='/stylesheets/style.css') body div#divPosition img(src='/images/loading.gif') //css body { font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; } a { color: #00B7FF; } #divPosition { background-color: white; position: absolute; width: 400px; height: 200px; margin-left:-200px; margin-top:-100px; top: 50%..

이전글에서 webview로 카카오 로그인 창을 제공하는 것까지 소개하였다. Access Token 발급 및 사용자 정보 조회하기 처음에는 카카오 로그인 웹에서 계정 정보 입력 완료 후 redirect url(나의 api 서버 경로)로 보내주는 인가 코드를 서버에서 받아 처리하여 access token을 발급받고 이 토큰을 사용하여 사용자 정보(내 경우 회원 번호만 필요했기에 정확히는 토큰 정보에서 user_id를 받아왔음.)를 반환 해주도록 구현하였다. (프론트 -> 웹뷰 -> 서버 -> 웹뷰 -> 프론트) //서버 코드 요약 const {getKakaoUserId} = require('../services/get_kakao_user_id'); const {getKakaoToken} = require('..

리액트 네이티브 앱 프로젝트를 진행하면서 카카오 소셜로그인을 구현한 과정을 기록하고자 한다. 개발 환경은 아래 이미지로 요약하고자 한다. 카카오 로그인 로직을 간단하게 요약하자면 아래와 같다. 1.react-native 프론트 단에서 webview를 사용하여 rest api 방식으로 카카오 로그인 창을 띄워준다. 2.사용자가 카카오 계정 정보를 입력하면 url형태로 인가 코드를 반환 받는다. 3.인가 코드를 api 서버에 전송한다. 4-1.api 서버는 인가 코드를 통해 access token을 발급받는다. 4-2.토큰으로 사용자의 카카오 회원번호(user_id)를 받아 프론트와 DB에 전송한다. 5.프론트는 user_id를 asyncstorage에 저장하고 이후 최초 로그인 여부를 asyncstorag..