웹에서 결제하기
PG사
Payment Gateway로 결제를 안전하게 처리해주는 회사들을 말한다
- NHN
- 나이스페이
- KG 이니시스
사용하기 위해선 가입과 계약이 필요하다.
결제 솔루션 회사
PG사와 개발자 사이를 연결해준다. PG사의 방법에 따라 미리 결제와 관련된 api를 만들어두기 때문에 기존보다 시간과 비용을 절약할 수 있다.
- Iamport
- Bootpay
결제 시스템을 사용하기 위해선 결제 심사를 받아야한다. 결제하는 방법을 ppt 로 만들어 pg사에 넘기면 pg사가 각각 카드사에 전달하고, 카드사가 브라우저에 들어와 테스트한다.
거절 당하는 경우
- 도박성
- 경매
- 결제 금액 직접입력
결제 아이디
Iamport를 사용한다고 했을 때 결제한 내용은 금액과 imp_uid 가 함께 백엔드로 넘어간다. 백엔드에서는 imp_uid를 보고 어떤 사용자가 얼마를 충전했는지 DB에 저장한다.
Iamport
https://www.iamport.kr/
https://docs.iamport.kr/implementation/payment
DOCS 를 따라서 아임포트를 적용해준다.
next.js에서 html head 태그 사용하기
아임포트 라이브러리를 html의 head에 추가하기 위한 방법
import Head from 'next/head' 한 뒤
<Head></Head> 태그로 감싸준다.
모바일에서 결제하기
- 모바일웹 : 모바일 브라우저에서 접속
- 모바일앱 : 다운로드 받은 어플리케이션에서 접속(구글, 애플 결제)
모바일웹에서의 문제점
모바일 화면에서 실행시 문제점이 발생한다.
- 결제하고 어디로 돌아갈 것인가
- mutation을 어떻게 날릴 것인가(페이지 변경으로 결제 성공 로직 실행 불가능)
m_redirect_url
IMP.request_pay 안에 m_redirect_url 작성해서 모바일 결제가 끝난 후 이동할 페이지를 지정해준다.
web hook notification
무통장입금 또는 모바일 결제의 경우 현재 페이지에서 벗어나게 되므로 imp_uid를 받을 수 없다. 따라서 Backend-API를 rest방식으로 만들고 API 주소를 입력해 놓으면 아임포트에서 결제가 완료/취소되었을 때 아임포트가 직접 Backend-API로 결제내역(mutation)을 보내준다.
시간
컴퓨터마다 시간이 다를 수 있기 때문에 프론트엔드에서는 new Date() 와 같은 함수를 사용하여 시간을 만들어 서버에 보내지 않는다.
NTP 서버
백엔드 컴퓨터들의 시간 동기화를 위한 시간 컴퓨터
UTC 시간
시차는 어떻게 맞춰줄까?
백엔드에서 DB에서 저장되는 시간은 UTC 시간(세계표준시간) 에 맞춰서 저장된다.
브라우저에는 UTC 시간에 각 나라별 시차를 더하거나 빼서 위치에 맞는 시간으로 환산해서 보여준다.
시간 관련 라이브러리
하나의 언어라고 할 정도로 docs를 보고 공부할 가치가 충분하다.
- moment.js
이벤트 발생
- 사용자가 직접 발생 시키는 이벤트(ex. 버튼 클릭, 마우스 클릭)
- 특정 시간에 자동으로 이벤트 발생
크론탭
이벤트를 실행시키고자 하는 특정 시간을 입력해 이벤트를 동작시키는 라이브러리.
statck - queue
export default function EventLoopPage() {
const onClickTimer = () => {
console.log("=========== 시작 !!! ==========");
setTimeout(() => {
console.log("0초 뒤에 실행됨~");
}, 0);
console.log("=========== 끝 !!! ==========");
};
return <button onClick={onClickTimer}>setTimeout 실행시키기!!!</button>;
}
왜 이런 결과가 나올까?
setTimetout, setInterval, axios, mutation, query 과 같이 실행이 오래 걸리는 것들은 CallStack 안에 저장되지 않고 background(web API) 로 빼서 저장되고 그 결과들이 TaskQueue 안에 쌓이기 때문이다. 그리고 CallStack 이 비워지면 TaskQueue 에 있던 것들을 가지고 와 실행한다.
그렇다면 이런 상황에서는 어떨까?
const onClickTimer = () => {
// CallStack
console.log("=========== 시작 !!! ==========");
// TaskQueue
setTimeout(() => {
console.log("1초 뒤 실행");
}, 1000);
// CallStack
let sum = 0;
for (let i = 0; i <= 9000000000; i += 1) {
sum = sum + 1;
}
// CallStack
console.log("=========== 끝 !!! ==========");
};
setTimeout 에 시간을 1초로 지정하더라도 아래 for문이 끝날 때까지 setTimeout 은 계속해서 TaskQueue 안에서 대기하고 있게 된다.
thread
콜스택이 비었을 때 태스크큐에 쌓인 것들을 콜스택으로 넣어주는 역할을 한다. 이벤트 루프를 만들어주기 때문에 event loop thread 혹은 single event loop thread 라고 부른다.
sing thread
자바스크립트는 싱글 스레드. 스레드가 하나만 존재하면 한 가지 이벤트를 실행하는 동안 다른 이벤트들을 실행시킬 수 없다. 하지만 자바스크립트는 이벤트 루프 방식을 활용해 싱글 쓰레드임에도 멈추지 않고 일을 할 수 있게 한다.
multi thread
일반적인 다른 언어들은 코드를 사용해 스레드를 여러개 만들어 낸다. 각각의 스레드들이 일을 맡아서 처리하는데, 엄밀히 얘기해서 동시에 일을 처리하는 것은 아니다. 일을 처리하는 건 결국 CPU이기 때문에 동시에 처리하는 것처럼 보일 뿐 동시에 처리하는 것은 아니다. (만약 CPU가 여러 개면 동시에 처리가 가능하다.)
CPU는 각각 동작을 수행하는 쓰레드의 진행률이 일정 상태에 도달하면 멈춘 뒤 저장하고 다른 쓰레드를 실행시킨다. 이런 방식을 문맥교환(context-switching) 이라고 부른다. 싱글보다 빠르지는 않지만 블락 당하지 않기 때문에 멀티를 사용한다.
