개발자의 개발 블로그

PG(Payment Gateway)란 온라인에서 고객이 카드로 결제하면 카드사와 가맹점 간 통신을 연결해주는 서비스이다.

일단, 너무나 많은 PG사가 존재한다. 하지만, 몇 개가 독점적으로 사용되고 있다. 그럼 PG사에 대한 현황을 알아보자.

1.

http://it.chosun.com/site/data/html_dir/2020/10/06/2020100600378.html

업계는 O2O 서비스 특성상 개발 및 테스트로 오랜 기간이 소요되는 만큼 기존 빅 플레이어들의 경쟁 구도는 쉽게 바뀌기 어렵다고 입을 모은다. 국내 대표적인 PG업체로는 KG이니시스와 NHN한국사이버결제, 간편송금서비스 업체인 토스가 인수한 LG유플러스 등이 있다.

이 3개사가 65~70% 시장 점유율을 차지하고 있다. PG업계엔 이미 100여개가 넘는 플레이어가 진입해있지만 점유율이 쉽게 바뀌지 않는 배경이다.

한 관계자는 "전자결제부문 시스템 개발은 긴 시간 동안 이뤄진다"며 "한 PG사가 해외가맹점을 확대하거나 O2O서비스를 제공하려면 약 3~5년이라는 긴 준비 기간이 필요하다. 사실상 상위 몇 개의 회사가 독과점하는 구조다" 라고 말했다.\

이렇게 개발 기간이 오래 걸리기 때문에, 초기에 장악한 몇몇 회사들이 독과점하게 되며, 사용자가 많으니 더 쓰게 된다.

그 중에서도 토스는 많은 투자를 하여 급속도로 발전해오고 있다는 사실을 알게 되었다. 역시 토스... 

https://news.joins.com/article/23839933

카카오페이는 아직 빅3에 들지 못한다. 카카오페이 연동하기 위해서 알아본 자료인데... 다른 것을 써야하나 생각중이다.

전부 테스트 해본 뒤, 편한것을 골라 사용해야겠다.

기존 오래된 맥에서는 F5를 눌러 맥에 기본적으로 설치된 스크린샷을 사용해왔다.

하지만, 새로운 맥을 접하게 되었는데... F1 ~ F12까지 기능들이 단축키로 이미 설정되 있었다.

그리고, 설정이 변경되지 않은 상태에서 스크린샷을 캡쳐 할 수 있는 기본적인 방법은 다음과 같았다.

1. 전체 화면 캡쳐 ===> shift + command(⌘) + 3  -- 말 그대로 화면 전체 캡쳐
 
2. 원하는 부분 지정 캡쳐 ===> shift + command(⌘) + 4 -- 사각형 형태로 원하는 부분 지정 후 캡쳐

너무 어렵다. 손도 큰데 3키를 누르기엔 손이 닭발처럼 꼬였다.

단축키 변경을 해보고 싶었다.

검색결과, 다음과 같이 변경하면 된다.

시스템 환경 설정 --> (검색) 키보드 단축키 --> 스크린샷

전체 화면 캡쳐 = 화면 그림을 파일로 저장

원하는 부분 지정 캡쳐 = 선택한 영역의 그림을 파일로 저장

오른쪽 단축키에 마우스를 갖다댄 뒤, 원하는 단축키를 입력하면 변경 완료!!!

맥북을 구매했다. 

vs code를 설치한 뒤, 터미널에서 작업 중에 바로 VS Code창을 띄우려고 했다. 

원래는 다음과 같이 작성하면 자동으로 열렸다.

code .

이렇게 하게 되면, 터미널에 있는 경로에서 VS Code 프로그램이 실행된다.

그런데,이런 메시지를 돌려주면서 명령어를 인식하지 못 했다.

command not found: code

이런 상황이라면 다음과 같이 하면 된다.

1. vs code 를 실행한다.

2. 명령팔레트를 실행한다. 단축키는 ⇧⌘P 를 동시에 누른다. 그러면, 상단에 입력창이 나온다.   > 

3. Shell Command 입력 후 실행한다.

이렇게 install을 해주면 터미널에서 code .을 사용할 수 있게 된다.

맥에서 다운로드를 해서, 실행하려고 할 때 다음과 같이 뜨면서 안열리는 경우가 많다.

이럴경우, 강제로 권한을  낮춰서 열어야한다.

방법은 다음과 같다.

1. 시스템 설정에 들어간다.

2. 보안 및 개인 정보 보호를 찾아 클릭해서 들어간다.

3. 일반 탭 > 하단에 보면 내가 열려고 시도했지만, 실패했던 파일이 떠있게 된다. 여기서 확인 없이 열기 클릭!!

4. 다시 열리는데, 이때는 열기 버튼이 활성화된다. 이 때 열기를 하면, 정상적으로 실행할 수 있는 것을 볼 수 있다.

단건 결제는 한 번의 결제로 지불이 완료되는... 쉽게 말해서 우리가 어떤 상품 판매나 비용 지불 시 흔히 사용하는 게 단건 결제입니다.

반대로, 정기 결제는 주기적으로 여러 차례에 걸쳐서 결제가 발생하는 것입니다. 

단건 결제 시 가맹점 코드(CID)가 필요합니다. 테스트 결제는 가맹점 코드로 'TC0ONETIME'를 사용합니다. 

실제로 결제하려면 카카오페이와 제휴를 맺어 가맹점 코드를 발급 받아야 합니다.

이제 단편 결제를 알아봅시다.

https://developers.kakao.com/docs/latest/ko/kakaopay/single-payment#approve

카카오페이를 연동해보고 싶습니까?. 그럼 하면 되죠. 그럼 시작합니다.

https://developers.kakao.com/docs/latest/ko/kakaopay/common

제공해주는 서비스

도메인 등록

카카오페이 API를 사용하려면 [내 애플리케이션] > [플랫폼] > [Web]에 서비스 웹 사이트 도메인을 등록해야 합니다.

도메인은 최대 10개까지 등록할 수 있습니다.

아래 경로로 들어갑니다.

요약 정보에는 앱 키가 보이는데, 카카오페이에서는 네 번째 항목인 Admin Key를 사용해야합니다.

또한, 카카오페이를 이용하기 위해서는 위 메뉴 -> 플랫폼 -> 하단에 사이트 도메인 추가 --> 자신의 도메인을 추가해줍니다.

로컬에서 작업중이라면 , localhost를 써줘도 됩니다.    http://localhost:3000 이런식으로 포트까지 붙여주세요

제휴 안내

카카오페이 API를 실제 서비스에서 이용하려면 제휴를 맺어야 합니다. 카카오페이 제휴 신청 페이지에서 제휴 제안할 수 있습니다.

물론, 제휴하지 않고 카카오페이 API 테스트는 가능하므로 걱정은 하지 마세요. 단, 실제 서비스를 사용하기 위해서는 제휴해야한다는 사실!!

결제 프로세스

카카오페이를 통한 결제는 크게 네 단계로 나뉩니다.

1. 결제 준비:

- 가맹점 코드, 가맹점이 부여한 주문번호, 상품 총액 등 상세 정보를 카카오페이 서버에 전달하고 결제 과정을 시작하는 단계.

2. 정보 확인 및 사용자인증

- 사용자 정보 입력 및 카카오페이 결제 수단 선택과 인증이 이뤄지는 단계.

3. 인증 완료

- 사용자의 인증이 완료되고, 승인에 필요한 인증 값을 응답주는 단계.

4. 결제 승인

- 결제 필수 값으로 카카오페이 서버에 승인요청하여 최종적인 결제완료 처리를 하는 단계.

1. 이것도 마찮가지로 개발자 홈페이지에 들어가 앱을 등록해줘야 한다.

https://developers.naver.com/main/

애플리케이션 등록 >> 입력 후 등록하기

2. npm을 이용하여 passport-naver 설치

무슨 문제가 있어서 이렇게 나온 것일까?

노드 개발을 하다보면, 참 많이 나는 에러다.

쉽게 말하면, 모듈화를 해놓고 해당 모듈을 불러오지 않아서(import // require) 발생하는 문제이다.

따라서,

const User = require('./User);

이런식으로 해당 모듈을 불러와야 에러가 발생하지 않는다.

ReferenceError 자체가 

참조에러? 이므로 

참조하지 않아 에러가 발생했음을 추측할 수 있다. 너무나 당연하고 쉽지만 빠트려서 빈번히 발생하는 에러이므로,

코드 작성 전 미리 선언해놓는것이 좋다.

1. passport-facebook를 설치한다.

$ npm i passport-facebook

2. 페이스북 개발자 페이지에 들어간다.

Facebook Developers

3. 로그인 한 뒤, 상단 메뉴   내 앱 >> 앱 만들기 버튼을 선택 >> 소비자 선택

그 다음 원하는 앱 이름을 작성하고 앱 연락처 이메일을 작성한다.

비즈니스 관리자 계정은 선택사항이므로 반드시 할 필요는 없다.  패스 후 , 앱 만들기 누르면 앱이 생성된다.

4. 앱이 생성되면 대시보드 창이 나오는데, 왼쪽 메뉴에서 설정 >> 기본설정을 보면 

앱 ID가 적혀있고,  앱 시크릿 코드가 *****로 적혀있는데. 

passport-facebook를 사용하기 위해서는 이 두 개가 필수!! 반드시 필요하므로 여기 이게 필요하다는 걸 기억하자!!

참고로, 앱 시크릿 코드가 더욱 중요하므로 ****를 보이게 하기 위해서는 현 Facebook 비밀번호를 한 번 더 요구한다.

또한, 웹페이지로 사용할 것이므로, 맨 밑으로 스크롤을 하게 되면 + 플랫폼 추가  가 존재한다. 이것을 클릭. 

아래와 같이 나온다. 신기하다.. 플스까지? 

하지만... 웹사이트를 선택한 뒤, 원하는 URL을 입력해주면 

이렇게  되면 이 URL에서 페이스북 로그인 요청 시에  NO하지 않고, OK를 하겠다고 설정을 한 것이다.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ페이스북 개발자 페이지 설정 완료 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

이제 원하는 에디터에서 passport-facebook를 구현하면된다. 

https://www.npmjs.com/package/passport-facebook

위 진행 방법을 번역한 것을 정리하면,

1.

passport-facebook을 사용하기 전에 facebook에 애플리케이션을 등록해야합니다. 아직 그렇게하지 않았다면 Facebook 개발자에서 새 애플리케이션을 만들 수 있습니다. 애플리케이션은 전략에 제공해야하는 앱 ID 및 앱 시크릿을 발급받습니다.

또한 애플리케이션의 경로와 일치하는 리디렉션 URI를 구성해야합니다.

이것이 위에서 진행한 것이다...

2. 

Facebook 인증 전략은 Facebook 계정과 OAuth 2.0 토큰을 사용하여 사용자를 인증합니다. 애플리케이션 생성시 획득 한 앱 ID 및 시크릿은 전략 생성시 옵션으로 제공됩니다. 이 전략에는 인증 된 사용자의 Facebook 프로필이 포함 된 프로필뿐만 아니라 액세스 토큰 및 선택적 새로 고침 토큰을 수신하는 확인 콜백도 필요합니다. 확인 콜백은 인증을 완료하기 위해 사용자를 제공하는 cb를 호출해야합니다.

시퀄라이즈를 사용하다보니 모델에서 수정을 해도 변경이 되지 않는 것을 확인할 수 있었다.

서버를 껐다가 켜봐도 ...

난 분명히 allowNull을 false에서 true로 변경했는데, 위와 같이 null이 불가능하다는 에러를 계속 내보내고 있었다.

당황스럽다. 아무리 고치고 껐다가 켜봐도 안되서...

SQL문을 사용해보기로 했다.

alter table users modify column confirm_password varchar(255);  // null 허용

alter table users modify column confirm_password varchar(255) not null;  // null 비허용

이렇게 하면, users 테이블에서 confirm_password 컬럼을 수정하겠다는 의미이다.

not null을 명시해서 쓰면 null을 허용하지 않겠다는 의미이며, 생략하게 되면 기본적으로 null을 허용한다는 의미가 된다.

이렇게 입력한 뒤, 다시해보니까 해결되었다. 이런 에러가 가장 싫다. 

에러가 아니라 버그?

버그 하나 발견한 하루였다.