구름사이

import React, {useEffect} from 'react';
import Navbar from '../components/Navbar'
import Footer from '../components/Footer'


const Payment = (effect, deps) => {
  
  useEffect( () => {
    const jquery = document.createElement("script");
    jquery.src = "https://code.jquery.com/jquery-1.12.4.min.js";
    const iamport = document.createElement("script");
    iamport.src = "https://cdn.iamport.kr/js/iamport.payment-1.1.7.js";
    document.head.appendChild(jquery);
    document.head.appendChild(iamport);

    return () =>{
      document.head.removeChild(jquery); 
      document.head.removeChild(iamport);  
    }
  }, [] );


  const onClickPayment = () =>{
    const {IMP} = window;
    IMP.init("imp000000000");
    const data = {
      pg: 'html5_inicis',  // PG사(필수항목)
      pay_method: 'card',   //결제수단(필수항목)
      merchant_uid: 'mid_$(new Date().getTime())',  //주문번호(필수항목)
      name: '결제 테스트', //주문명(필수항목)
      amount: '10000', //금액(필수항목)
      custom_data: { name: '부가정보',  desc: '세부 부가정보'},
      buyer_name: 'klaud',
      buyer_tel: '101000',
      buyer_email: 'aaa@speech.pe.kr',
      buyer_addr: "Seoul",
      buyer_postalcode: "76543"      
    };

    IMP.request_pay(data, callback);  //결제창
    console.log("Here");  

  };

  const callback = (response) => {
    const {success, error_msg, imp_uid, merchant_uid, pay_method, paid_amount, status } = response;
    if(success){
      alert("Sucess!!!");      
    } else {
      alert( error_msg );
      console.log(error_msg);
    }
  }

  return (
    <div align="center" mt="100px" >
      <Navbar/>
      <button  onClick ={onClickPayment} > Basic Plan(1,000원)  결제하기 </button>
      <Footer/>
    </div>     
  )

}



export default Payment;

상기와 같이 React 기반으로 아임포트를 통해, 결제를 구현시 테스트 해 보았습니다.

WoW

매일 결제만 해보다가, 직접 구현해 보니 느낌이 조금 이상하네요.. 먼 훗날, 내 상품 또는 나의 서비스를 통해  결제되어 내 통장에 입금되는 날을 기대해 봅니다.

상기와 같이 구현해 보면, 실제 결제가 됩니다. 다만, 결제된 금액은 자정 부근에 '승인 취소'됩니다.

인터넷 강의를 들으면서 H2 database를 설치했는데,  이 데이터베이스를 사용하는 응용 프로그램이 제대로 구동되지 않습니다. 아마도 데이터베이스 프로그램이 안 떠 있어서 그런가 싶습니다.

근데, H2 의 설치 위치 및 구동 명령어가 생각이 나지 않아서 문제입니다.

여차저차 구글링해서 설치하는 방법에 대한 포스팅된 데이터를 찾고, 

windows 의 파일 탐색기에서 설치 프로그램에서 setup 프로그램을 찾아, 설치를 수행해보니

기본 경로가 windows OS에서는  

      C:\Program Files (x86)\H2\

이네요.

한참을 돌아왔습니다.

추가로 H2 데이터베이스 구동 명령어는 

    C:\Program Files (x86)\H2\bin\h2.bat 

입니다.

구동이 되면 자동으로 웹브라우저에  'H2 콘솔'이 뜹니다.

하단의 '비밀번호'란에는 아무 것이 입력하지 않고,

'연결'버튼을 누릅니다.

그러면, 

의 화면이 나타납니다.

HeideSQL하고 조금 헷갈립니다.^^

구성요소는  Controller, Service, DAO, Database 입니다.

Layered 구조 체계에 맞게 개발한 interface 설계 및 class 구현체의 결과물은 아래 그림과 같습니다.

상기의 Product 도메인에 대한 것을 User-SignUp/SignIn 도메인에 대한 경우의 수로 확장해 보았습니다.

보통의 구글링의 해결책은

src/main/resources/application.properties 에

spring.mvc.pathmatch.matching-strategy=ant_path_matcher

를 추가하는 것입니다.

그럼에도 해결이 되지 않을 경우에는

1. pom.xml 파일 내용을

<dependency>
	<groupId>io.springfox</groupId>
	<artifactId>springfox-swagger2</artifactId>
	<version>3.0.0</version>
</dependency>
<dependency>
	<groupId>io.springfox</groupId>
	<artifactId>springfox-swagger-ui</artifactId>
	<version>3.0.0</version>
</dependency>
<dependency>
	<groupId>io.springfox</groupId>
	<artifactId>springfox-boot-starter</artifactId>
	<version>3.0.0</version>
</dependency>

와 같이 변경합니다. 기존에는 2.9.2로 앞쪽 2개의 모듈을 사용하는 경우가 많았었죠.

2. SwaggerConfiguration.java 파일에서

//@EnableSwagger2

로 @EnalbeSwagger2 를 주석처리합니다.

3. 웹브라우저에서 새로운 URL인

http://localhost:{port}/swagger-ui/index.html

로 접근합니다. 기존에는  http://localhost:{port}/swagger-ui.html이었습니다.