react로 프로그램을 만들면서 결제기능을 추가함으로써 차별성을 넣으려고
했으나.. 일단은
나같은 경우에는 실제로 업체와 연동하지 않고 테스트로 구현만 해볼려고 했기 때문에 공식 문서를 참고했다.. 이 때 가맹점 코드 (CID)를 실제 결제에서는 요구하지만, 만약 테스트만을 목저으로 한다면 이 코드를 TC0ONETIME로 사용하여 가상으로 결제를 진행하며 테스트 할 수 있다.
그래서 결국 일단 카카오페이만 연동을 완성 하였다...
참고 사이트
추가적으로 플랫폼을 등록해주어야 한다. 본인은 Webview로 해당 화면을 띄워줄 것이기에 웹 플랫폼으로 이를 등록했다. 그리고 개발서버에서 테스트를 진행하기 위해 http://localhost:3000을 사이트 도메인에 추가해주었다. 만약 사이트 도메인을 추가하지 않는다면 요청이 정상 승인 되지 않으므로 꼭 위에 언급한 작업을 미리 해주도록 하자!
결제준비를 위한 요청관련 세부 사항은 공식문서에서는 다음과 같이 소개하고 있다.
POST /v1/payment/ready HTTP/1.1
Host: kapi.kakao.com
Authorization: KakaoAK {APP_ADMIN_KEY}
Content-type: application/x-www-form-urlencoded;charset=utf-8
참고 자료에서
이를 보고 가장 먼저 들었던 생각은 Host 환경에 따른 Proxy 설정이었다. 우선적으로 로컬환경에서 테스트를 진행해볼려고 했기 때문에 당연히 CORS 문제를 맞닦드릴 수 밖에 없는 것은 기정 사실. 따로 서버를 두고 서버에서 요청을 처리하여 CORS 문제를 우회할 수도 있겠지만 별도로 서버를 구축하기는 싫었기 때문에, CRA에서 깔려있는 Webpack의 devServer와 Proxy 설정을 이용해서 우회해야겠다고 생각했다. 관련 설정은 매우 간단하게 CRA로 만든 리액트 프로젝트에서 package.json에 단 한줄만 추가해주면 된다.
"proxy": "https://kapi.kakao.com"
오늘날 CRA로 설치된 리액트 프로젝트에서 대부분의 편의기능을 이미 Webpack이 탑재해 놓고 있는 경우가 많아서 단순히 저 한 줄을 추가하여 Proxy 설정을 뚫어줄 수 있다.
간단히 CORS이슈와 Proxy에 대한 점을 아주 간단하게 짚고 넘어가보자 한다.
라고 했는데,, 이부분을 생략 하고 나는 axios로 결제준비 api에 url을
요청 할때, "https://kapi.kakao.com/v1/payment/ready" 이런식으로
바로 넣어 줬는데 되었다.. 그래도 짚고 넘어 가야할거 같아서
(CRA에서 깔려있는 Webpack의 devServer와 Proxy 설정을 이용해서 우회해야겠다고 생각했다) 이 부분이 이해가 안가서 구글링을 해보았는데,
나는 여태 온전히 react를 create-react-app으로 생성하여 온전히 react 문법에만 집중을 했었는데 cra없이 손수 프로젝트를 만든다는 생각을 해보지 못하였다. 이 기회로 인해서 webpack같은 번들링 도구들이 어떻게 동작하는지에 대해 생각을 해보는 시간을 가져보기로 하였다.
