아무리 여러 번을 해봐도 로그인은 늘 어렵다.....ㅎㅎㅎ 그리고 아직 친해지지 못한 맥북 + 리액트 네이티브 환경에서 하려니 엄청난 에러를 겪고 겨우 성공한 카카오 로그인... 시작!! ⭐️Frontend 0. 카카오 개발자센터 애플리케이션 설명 생략 1. 리액트네이티브 카카오 로그인 라이브러리 설치 npm install @react-native-seoul/kakao-login //RN 0.60.X 이상부터는 Auto linking 지원 pod install https://github.com/crossplatformkorea/react-native-kakao-login GitHub - crossplatformkorea/react-native-kakao-login: react-native native m..

리액트 네이티브 카카오 로그인 라이브러리를 사용하려면 sdk가 필요한데 내가 개발하고 있는 Expo 환경에서는 이 방식이 불가능하다. 대신 webview 라이브러리를 사용해서 소셜 로그인 구현이 가능하다. 📌React-native-webview npm install react-native-webview //웹뷰 설치 리액트 네이티브 웹뷰는 말 그대로 web 화면을 띄우는 데 사용하는 라이브러리이다. 웹뷰를 사용해서 소셜 로그인을 구현할 때에는 웹 개발 시 REST API로 동작했던 방식 그대로 리액트 네이티브에 적용해 주면 된다. 나는 이번 프로젝트에서 카카오 / 네이버 / 깃허브 로그인을 사용하기로 했다. 1. 카카오 앱키 발급 카카오 개발자 센터에서 애플리케이션을 등록하고 이중 REST API 키를 ..

🤍Passport 모듈 SNS 서비스에는 로그인 기능이 필요하다. Passport 모듈을 사용하면 세션과 쿠키 등 복잡한 과정 없이 간편하게 로그인 구현이 가능하다. 요즘 자주 사용되는 카카오톡, 페이스북 등의 SNS 로그인 또한 Passport를 사용해서 해결할 수 있다. 🤍Passport 모듈로 로컬 로그인 구현하기 1. Passport 모듈 설치 npm install passport passport-local passport-kakao bcrypt 2. Passport 관련 index.js 작성 serializeUser : 로그인 시 실행되며, 세션 객체에 어떤 데이터를 저장할지 정하는 메서드임. deserializeUser : 매 요청 시 실행됨. 여기서 매개변수는 사용자의 아이디이며 serial..

🤍REST API) 카카오 로그인 API 서비스 환경설정 1. 카카오 개발자센터에 접속 후 로그인한다. 2. 애플리케이션을 추가하기 3. 아래와 같이 이름을 설정해서 추가해준다. 4. WEB 플랫폼 등록 5. 도메인 등록 6. 카카오 로그인 활성화 7. Redirect URI 설정 8. 동의 항목 설정 9. 이곳에서 카카오로그인 버튼 소스를 가져온다. (축약형, Middle) 10. 로그인 화면에 카카오 로그인 버튼을 추가한다. 11. 카카오 로그인 요청을 보내는 Request URI는 아래와 같이 만들면 된다. GET /oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code HTTP/1.1 Host..