FE/기능
-
# OnBoarding.jsx시작하기 Button # KakaoLogin.jsx 1) 카카오 로그인 버튼 누르기 전 : 사용자가 카카오 로그인을 시작할 수 있도록 카카오 로그인 페이지(kakaoURL)로 리디렉션하는 역할const REST_API_KEY = "ff5cfd59376e7e4e903dd4b45e1f7a50"; const Redirect_URI = "http://localhost:3000/login/oauth2/code/kakao"; const kakaoURL = `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${REST_API_KEY}&redirect_uri=${Redirect_URI}&response_..
React 카카오 소셜 로그인 구현(REST API)# OnBoarding.jsx시작하기 Button # KakaoLogin.jsx 1) 카카오 로그인 버튼 누르기 전 : 사용자가 카카오 로그인을 시작할 수 있도록 카카오 로그인 페이지(kakaoURL)로 리디렉션하는 역할const REST_API_KEY = "ff5cfd59376e7e4e903dd4b45e1f7a50"; const Redirect_URI = "http://localhost:3000/login/oauth2/code/kakao"; const kakaoURL = `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${REST_API_KEY}&redirect_uri=${Redirect_URI}&response_..
2024.05.30 -
# 배경하루네컷 서비스에서 결제기능을 맡게 되었다.결제 요청은 프론트에서 진행하고, 그것을 검증하는 단계를 백엔드에서 맡아주기로 했다. 우리가 진행한 방식은 아래와 같다 # 결제 연동 코드 작성 전 준비 단계결제 연동 코드를 작성하기 위해, 알고 있어야 할 정보가 있다. 1. 고객사 식별 코드(IMP)2. PG 상점 아이디(MID)테스트 용으로 채널 등록을 할 때, '일반 결제'를 선택했더니 제공되었다 # 포트원 라이브러리 추가- 공식 문서에는 리액트 메뉴얼이 없어서, 리액트로 변경했다. 코드는 다른께서 블로그에 잘 정리해주셔서 활용했다- useEffect 안에 스트립트를 넣었다. useEffect(() => { // 포트원 라이브러리 추가 let script = document.queryS..
React에서 Portone(포트원) 결제 연동하기(카카오페이)# 배경하루네컷 서비스에서 결제기능을 맡게 되었다.결제 요청은 프론트에서 진행하고, 그것을 검증하는 단계를 백엔드에서 맡아주기로 했다. 우리가 진행한 방식은 아래와 같다 # 결제 연동 코드 작성 전 준비 단계결제 연동 코드를 작성하기 위해, 알고 있어야 할 정보가 있다. 1. 고객사 식별 코드(IMP)2. PG 상점 아이디(MID)테스트 용으로 채널 등록을 할 때, '일반 결제'를 선택했더니 제공되었다 # 포트원 라이브러리 추가- 공식 문서에는 리액트 메뉴얼이 없어서, 리액트로 변경했다. 코드는 다른께서 블로그에 잘 정리해주셔서 활용했다- useEffect 안에 스트립트를 넣었다. useEffect(() => { // 포트원 라이브러리 추가 let script = document.queryS..
2024.05.29