Web/React11 리액트 카카오(kakao) 소셜로그인 구현 카카오 소셜 로그인 구현 (React - Spring) 여기서 프론트엔드는 카카오에게서 인가코드를 받아서 백엔드에게 전달만 하면 끝이다!1. 애플리케이션 등록https://developers.kakao.com/ Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com먼저 여기서 Kakao Developers에 로그인 후 애플리케이션 생성하고 REST API 키 및 Redirect URI를 설정해야 한다.2. 카카오 로그인 요청 사용자가 '카카오 로그인' 버튼을 클릭하면 카카오 인증 페이지(https://kauth.kakao.com/oauth/authoriz.. 2025. 1. 23. React Daum Postcode(카카오 우편번호 서비스) 방법이 두가지가 있었다.1. 다음 우편번호 서비스 API 사용하기(react-daum-postcode)https://www.npmjs.com/package/react-daum-postcode react-daum-postcodeDaum Postcode service for React. Latest version: 3.1.3, last published: a year ago. Start using react-daum-postcode in your project by running `npm i react-daum-postcode`. There are 24 other projects in the npm registry using react-daum-postcode.www.npmjs.com 2. 카카오 우편번호 .. 2024. 11. 29. React axios 통신 DELETE 메서드 400 에러 axios 통신 도중 delete에서 계속 400 에러 발생 요청 바디에 { clubName: '동아리명' } 형태로 보내야하는데 에러가 찍히지만 내가 원하는대로 잘 보내지길래 왜이러지 ? 싶었다 보내는 방식은 post에 요청 바디 보낼 때와 동일한 형태로 보냈음. 근데 저 에러에서 clubName 밑에 data: undefined가 조금 꺼림직했다. 혹시나 하는 마음에 지피티에게 물어보니 DELETE 요청을 보낼 때도 요청 바디를 포함시킬 수 있다 >> 요청 바디를 포함 시키려면 data 옵션을 사용하라. 고 했다 !!! 그래서 아래의 형태로 보냈었던 요청을 const result = await API().delete('/admin/club', { clubName: name }) data 옵션을 사용해.. 2024. 4. 8. React 로그인 상태 전역으로 관리하기(useContext) 이전 포스팅에서 로그인 성공 후 응답으로 돌아온 토큰을 로컬스토리지에 저장하는 것까지 성공했다. 이후 로그인이 된 상태를 유지해야 하고 로그인 여부에 따라 다른 UI를 보여줘야 한다. 많은 페이지의 UI를 다르게 띄워줘야하는데 페이지마다 로컬 스토리지의 토큰을 get 해와서 처리하는 것은 번거로울 것 같았다. 그래서 생각해낸 방법은 useContext를 사용해서 전역으로 로그인 상태를 관리하는 것이었다. 로그인 된 상태 true / 로그인 하지 않은 상태 false 로 처리해서 전역변수 처리를 한 다음 다른 UI를 띄워줘야할 때 true/false 값을 활용해 간단하게 처리할 수 있는 것이다. 해야할 것은 1. LoginContext.jsx 생성하여 전역 변수로 선언해주기 2. 로그인하면 isLogged.. 2024. 4. 7. React 자체 로그인, jwt 토큰 로컬스토리지에 저장 로그인 로직 동아리연합회와 협업 프로젝트를 진행하고 있고 그 중 로그인 부분을 진행하고 있다. 이번 로그인은 몇가지 조건이 있다. - 동아리 사람들만 로그인할 수 있다. (동아리 소속 아닌 사람들은 로그인 자체가 안됨) - 처음 로그인 하는 동아리원들은 동의 수집 페이지를 거쳐야 한다. 위의 항목들을 만족하지 않으면 에러로 돌아오고 에러 처리를 해줘야 한다. 정리해보면, 로그인 시도(/login)를 했을 때 - 동아리원O, 동의O -> 로그인 성공(200) -> 메인으로 이동 - 동아리원O, 동의X -> 401 에러 -> 동의 항목 페이지로 이동 -> 동의하기(/agree) -> 로그인 재시도(/login) -> 로그인 성공(200) - 동아리원X -> 400 에러 -> 로그인 불가능 // 로그인 con.. 2024. 4. 6. React, RN 프로젝트 시작 명령어 React 리액트 프로젝트 생성 : npx create-react-app 프로젝트명 리액트 실행 : npm start React Native ReactNative cli 리액트네이티브 프로젝트 생성 : npx react-native init 프로젝트명 ios 실행 : npx react-native run-ios android 실행 : npx react-native run-android expo cli expo cli 설치 : npm install -g expo-cli 프로젝트 생성 : npx create-expo-app my-app 2024. 4. 1. 이전 1 2 다음
