JSON은 오브젝트 데이터의 직렬화 데이터 기법으로 프로그램에서는 공통 언어로 많이 사용된다. 이는 프로그램 언어가 서로 달라도 하나로 통일하여 소통이 가능하도록 연결해주는 역활을 한다. 

 

PHP에서는 배열을 이용하여 json_encode() 함수를 이용한 변환 방식을 주로 사용하는데 이와 함께 많이 쓰이는 serialize() 함수도 있다.  serialize() 함수역시 직렬화 데이터 기법이나 이번편은 JSON 에대한 내용이니 넘어가도록 하자 

 

JSON 데이터는 아래와 같은 형태로 구성이 되어있다. 

[{"name":"홍길동","age":14,"gender":"남성"},{"name":"홍길순","age":14,"gender":"여성"}]

 

위의 JSON 텍스트를 JAVASCRIPT 변수로 이용한다면 아래와 같이 할 수 있다. 

<script type="text/javascript">
  var json = [{"name":"홍길동","age":14,"gender":"남성"},{"name":"홍길순","age":14,"gender":"여성"}];
</script>

 

PHP를 이용하여 위의 데이터를 활용한다면 아래와 같이 할 수 있다. 

<?php
  $arr = array(array('name'=>'홍길동','age'=>14,'gender'=>'남성'),array('name'=>'홍길순','age'=>14,'gender'=>'여성'));
  $json = json_encode($arr,JSON_UNESCAPED_UNICODE);
?>
<script type="text/javascript">
  var json = <?php echo $json; ?>;
  console.log(json);
</script>

 

위의 PHP 소스코드를 먼저 살펴보면 $arr 변수를 선언하고 json_encode() 함수를 통해 JSON 텍스트로 변환해 주었다. 참고로 json_encode() 함수 처리시 두번째 옵션으로 사용된 JSON_UNESCAPED_UNICODE  의 경우 데이터 출력시 한글이 유니코드화 되는것을 방지하기 위해 넣어주었다. 만약 저 옵션을 넣지 않을 경우 아래와 같이 한글이 유니코드화 된 JSON 텍스트가 출력된다.

[{"name":"\ud64d\uae38\ub3d9","age":14,"gender":"\ub0a8\uc131"},{"name":"\ud64d\uae38\uc21c","age":14,"gender":"\uc5ec\uc131"}]

 

출력으로 디버깅이 필요한 구간에서는 보기가 영 안좋기 때문에 옵션을 넣어주었으며, 해당 옵션이 없어도 한글 데이터 처리하는데는 문제가 없으니 참고 바란다. 

 

그럼 좀더 나아가 실제 네이버페이 간편결제 API 연동 예제를 통해 알아보도록 하자. 아래 예제는 실제 네이버페이 간편결제 API 연동 소스코드 일부이며 원본 소스와 JAVASCRIPT 처리되는 부분을 미리 PHP 변수에서 처리하는 방법에 대한 예제이다. 

 

네이버페이 결제연동 원본 소스 
<!DOCTYPE html>
<html>
<head></head>
<body>
<input type="button" id="naverPayBtn" value="네이버페이 결제 버튼">
<script src="https://nsp.pay.naver.com/sdk/js/naverpay.min.js"></script>
<script>
    var oPay = Naver.Pay.create({
          "mode" : "production", // development or production
          "clientId": "u86j4ripEt8LRfPGzQ8", // clientId
          "chainId": "TDZSUHBoVGRFS2l" // chainId
    });

    //직접 만드신 네이버페이 결제버튼에 click Event를 할당하세요
    var elNaverPayBtn = document.getElementById("naverPayBtn");
    elNaverPayBtn.addEventListener("click", function() {
        oPay.open({
          "merchantUserKey": "가맹점 사용자 식별키",
          "merchantPayKey": "가맹점 주문 번호",
          "productName": "상품명을 입력하세요",
          "totalPayAmount": "1000",
          "taxScopeAmount": "1000",
          "taxExScopeAmount": "0",
          "returnUrl": "사용자 결제 완료 후 결제 결과를 받을 URL"
        });
    });

</script>

</body>
</html>

 

네이버페이 결제연동 수정 소스 
<!DOCTYPE html>
<html>
<head></head>
<body>
<?php
    $create = [
      "mode" => "production", // development or production
      "clientId"=> "u86j4ripEt8LRfPGzQ8", // clientId
      "chainId"=> "TDZSUHBoVGRFS2l" // chainId      
    ];

    $open = [
      "merchantUserKey"=> "가맹점 사용자 식별키",
      "merchantPayKey"=> "가맹점 주문 번호",
      "productName"=> "상품명을 입력하세요",
      "totalPayAmount"=> "1000",
      "taxScopeAmount"=> "1000",
      "taxExScopeAmount"=> "0",
      "returnUrl"=> "사용자 결제 완료 후 결제 결과를 받을 URL"      
    ];
?>
<input type="button" id="naverPayBtn" value="네이버페이 결제 버튼">
<script src="https://nsp.pay.naver.com/sdk/js/naverpay.min.js"></script>
<script>
    var oPay = Naver.Pay.create(<?php echo json_encode($create); ?>);

    //직접 만드신 네이버페이 결제버튼에 click Event를 할당하세요
    var elNaverPayBtn = document.getElementById("naverPayBtn");
    elNaverPayBtn.addEventListener("click", function() {
        oPay.open(<?php echo json_encode($open); ?>);
    });
</script>

</body>
</html>

 

PHP에서 JAVASCRIPT 객체에 설정 시 복잡하게 JAVASCRIPT 소스코드 부분에 적용할 필요없이 위와 같이 최대한 PHP와 분리하여 처리하는게 가독성면에서도 좋고 유지보수도 상당히 편리하다.