Projects/Fake.Kakaopay 6

6. 회고/생각

- 2024.03.25 수업을 듣다가 재밌겠다고 생각이 들어서 갑작스럽게 시작하게 되었다. 오랜만에 리액트를 실행하니 낯설었는데, 처음 리액트를 배울때와 다르게 기본설정되어있는 코드들 중에 지워도 되는게 무엇인지 어느정도 구분이 되는걸 보고 그래도 실력이 늘긴 했다는 생각이 들더라. 수업은 index.html에 js까지 쓰는 코드였지만, 나는 react를 쓰고, 값 몇개는 받아와 사용하는 거기 때문에 코드가 달라지면서 이론적으로 배운거랑 실제 써보는건 다르다는걸 다시한번 느꼈다. 환경변수 설정한 값이 노출되는거 때문에 몇시간 붙들고 고생했는데 일단은 에러가 아닌걸로 예상된다. 고생은 했지만 덕분에 더 발전했다고 생각한다. 구상한대로 바로 구현하고 싶지만, 프론트적인 실력이 부족해서 바로 구현하기가 힘들다..

4. 오류/에러

- 2024.03.24. 21:04 일단 1차적으로 만들고 gh-pages를 사용해 git에 배포를 해보았다. 그런데 소스에 환경변수에 넣어둔 고객사식별코드가 노출되었다. 열심히 검색해보면서 환경변수 우선순위나 테스트/배포용 환경변수 설정 같은 글을 보긴 했지만, 답은 없었다. 그래서 gh-pages는 local에서 배포작업을 하니 git repository를 가져다 배포하는 netlify를 통해 배포해보기로 했다. 그렇게 netlify에 배포해봤는데도 똑같이 고객사식별코드가 노출이 되었다. 그런데 gh-pages와 netlify 모두 다 환경변수 설정을 안해줬는데 고객사식별코드 값을 가지고 있었다. 그래서 로컬의 .env 파일을 지우고 배포하면 둘 다 고객사식별코드가 없다고 나온다. 뭐지?? gh는 그..

3. 구현

- 2024.03.25 우선 Repository를 fake-kakaopay로 만들고 react를 만들어 연동했다. https://github.com/SpringDream0406/fake-kakaopay GitHub - SpringDream0406/fake-kakaopay Contribute to SpringDream0406/fake-kakaopay development by creating an account on GitHub. github.com 수업때 배운건 html과 js로 구성되었기 때문에 포트원에서 제공한 리액트에서 아임포트 결제 연동하기 페이지를 참고했다. https://github.com/iamport/iamport-react-example/blob/master/manuals/PAYMENT...

2. 구상

- 2024.03.25 발상하면서 구상도 대충 해두었다. 일단 변경 가능한 결과값은 금액과 상품명이다. 일단 1차 구상으로는 위 왼쪽 사진처럼의 결과에 내가 변경 할 수 있는 부분을 위 오른쪽 사진처럼 빈칸 input으로 입력하여 실행하는걸 생각했는데, 은근히 시각적인 면이나 입력하는 방법이나 불편할 것 같다는 생각이 들어서, 입력하는게 2개 밖에 안되니 입력하는 공간을 왼쪽에 만들고, 오른쪽에 예상 결과값을 보여주는 방식으로 하는게 좋을듯 싶다.

1. 발상

NestJS 수업을 듣는데 결제 연습으로 포트원을 통해 kakaopay 를 이용했다. 그런데 이게 예전에는 당일 결제 내역을 환불해주는 식이었던것 같은데 지금은 가상의 금액으로 가상결제를 하는 식이다. (아니면 카카오페이만 지원해주는 기능인듯?) 실제 카톡 알림으로 구매내역이 온다. 구매처가 KakaoDevelopers로 나오는걸 보면 카카오에서 제공해주는 기능인것 같다. (KakaoDevelopers에는 무통장 입금 생성기능말고는 없는게 결제사를 위해 제공해주는 기능인듯?) 무튼 구매처가 KakaoDevelopers로 나오는걸 제외하면 실제 결제결과와 같다고 볼 수 있고, 이걸 활용해서 가짜 카카오페이 결제 결과를 얻는걸 만들어 보면 재밌을 것 같다고 생각했다. 이런식으로 말이다. 이렇게 가짜 카카오페..