🚀 오늘 배울것들

• html, css는 프론트엔드로부터 브라우저가 받아오는모습
• DB 엑셀로부터 정보를 백엔드가 받아오는 모습

🚀 결제시스템

• PG(Payment Gateway)사가 카드회사를 대신해서 결제업무를 대행한다
• ex)NHN에 맞게 시스템을 만들어놓았다면 다른 PG사로 바꾸는게 쉽지 않다!!!
• 그래서 결제솔루션 회사가 등장했음(NHN, Nicepay, KG이니시스 각 회사와 결제하는 방법, api 등을 모두 만들어놓고 제공한다)

💡 요약

1. PG사 한곳에 가입
2. 결제 솔루션회사 한곳에 가입
3. 수수료율때문에 PG사를 바꾸었다면, 결제솔루션에서 바뀐 PG사로 결제가 진행되게됨!!!
4. 결제솔루션 -> PG사 -> 카드사에서 최종결제
5. 심사 통과를 위해서는 PPT를 만들고 결제 과정과 테스트계정을 캡쳐해서 넣고, PG사에 보내면, PG사가 각 카드사에 뿌려줌. 그래서 각 카드사별로 통과 or 실패 결과가 나옴

   
   (이런것들은 실패 가능성이 높으므로, 우회해야함)

🚀 IMP_UID, 결제금액 저장

1️⃣ 아임포트에서 결제를 한다면 imp_uid가 제공된다. 2️⃣ 제공받은 imp_uid와 결제금액을 백엔드API를 통해 우리 DB에도 저장을 해줘야한다!!!.

• PG사 가입에 1주일, 카드사 심사통과 2주일 ....
• 카드결제, 무통장입금, 계좌이체, 결제취소기능, 결제내용을 확인하는 영수증화면(프론트엔드,백엔드api작업), 결제기능 테스트 등등등...
• 결제기능을 한달만에 만들지 못함!!!! 아무리 결제솔루션 회사를 이용한다고 해도 최소 3달이 걸린다!!!!

1.카드결제))결제를 하면 imp_uid를 받고, 백엔드에 전달 => DB에 저장!

2.무통장입금)) 결제요청, 아임포트에서 계좌번호 전달해줌, 철수가 컴퓨터를 끄고 atm가서 돈을 입금함. 컴퓨터를 껐는데 어떻게 백엔드의 DB에 정보를 날릴것인가? 입금을 하면아임포트에서 확인을 하고 우리 백엔드의 api에 정보를 쏴준다!!

(웹훅노티피케이션)

이곳에 우리 백엔드 api 주소를 넣으면 아임포트에서 우리 백엔드api로 알림을 준다!!!!

🚀 아임포트를 이용해서 실제로 결제를 해보자

회원가입해서 가맹점 식별코드 사용하기 (일단 멘토님 식별코드 이용)
1. 우리가 jQuery를 사용하지 않더라도 아임포트에서 jQuery를 이용하기 때문에 jQuery를 설치해야함

백엔드에 넘기는 부분을 결제 성공 시 로직에 써주면됨(mutation)

포인트 충전하기

충전금액으로 구매하기
백엔드api (로그인이 완료된 상태 전제!!!)

(참고, 반응형개발, 나중에배움)

문제는 모바일에서 결제를 누르면 다른 페이지로 이동해버림...
그래서 우리가 짠 로직이 실행이 안된다는것!
=> 그래서 웹훅노티피케이션을 백엔드 개발자가 설정해야함

🕰 UTC시간을 각국 시간에 맞게 바꿔주는 라이브러리...? Moment.js

전세계의 시간은 다 다름. 시간을 어떻게 보여줘야할까

백엔드에서 UTC 시간으로 DB에 저장함. 백엔드도 UTC시간을 받아와서 각국에 뿌려줌. 그 UTC시간을 각국에 맞춰서 바꾼다 (한국은 UTC시간 + 9시간)

정기결제...? 크론탭 (크론서버)

1️⃣ 사용자가 이벤트를 발생 (마우스 클릭 등 입력이 일어났을때)
2️⃣ 컴퓨터가 자동으로 특정 시간이 되면 이벤트를 발생

(특정 시간에 특정 기능을 실행시켜줘) or (특정 시간에 특정 API를 실행시켜줘)...

setTimeout이 이상해....

console.log("시작합니다");
    setTimeout(() => {
      console.log("0초 뒤에 실행되었어요");
    }, 0);
    console.log("종료합니다");

이렇게 코드를 작성했다. 기댓값은 0초 뒤에 실행되었어요가 가장먼저 실행되야 하는데 이렇게 실행이 되었음!!!!!

• 이러한 현상을 이해하기 위해서는 자바스크립트의 원리를 이해해야 한다!!
  
• 큐:먼저 들어온게 먼저 나간다
• 스택:먼저 들어온게 가장 나중에 나간다
• setTimeout과 같이 특정시간이 지나야 실행되는 애들은 스택에서 실행하지 않는다!!!! (다른것들을 처리해야 하기 때문에 5초를 기다릴 여유가 없음)
  
  그래서 스택에서 5초를 기다리는게 아니라 Background에서 5초를 기다리는 역할을 수행하게됨
  ()=>{}과 같은 콜백함수가 태스크큐에 들어간다.
  
• 태스크큐에서 나와서 콜스택에 들어가 다시 실행시키는 원리임
• 오래 걸리는 작업은 기다리지 않고 백그라운드로 넘겨서 백그라운드에서 기다리고, 콜백함수를 태스크큐에 넣고, 콜스택이 비어있을때 콜백함수가 들어가서 실행된다.
  
  setTimeout은 시간이 걸리는 애이기 때문에 백그라운드로 바로 빼버리고!!!!
  그래서 콜스택에 있던 시작합니다, 종료합니다를 출력하고!!!
  콜스택이 비어있으니까 콜백함수 ()=>{console.log("0초뒤에실행될거예요")} 가 콜스택에 들어가서 나중에 실행된다.
  
  
• 자바스크립트는 event-loop를 하게 해주는 일꾼이 존재함!!!! 콜스택에 있던거 실행시키고, 백그라운드로 뺄것 빼고, 콜스택에 비어있으면 큐에 있던걸 콜스택으로 옮기고!!!
  ➤ 이런걸 바로 event-loop-thread라고 한다.
• (thread : 일꾼, 1명) 1명이기 때문에 sing-thread라고도 함.
  ➤ 자바스크립트는 single-thread!!
  

🤔 그러면 다른 언어도 single-thread인가...?

아님! multi-thread임....일꾼을 여러명 만들고 일을 나눠줘야함
setTimeout은 이곳, if문/for문은 저곳, axios는 다른곳 등등등.... 일꾼마다 일을 지정해줘서 오래걸리는 애들이 병목현상을 띄지 않도록 해준다
그렇다고 multi-thread가 무작정 빠른건 아님. cpu가 적다면 아무리 thread(일꾼)이 많다 하더라도 1번일을 조금하고 2번일을 조금하고... 이렇게 조금조금씩 일처리를 하기 때문에 빠른 진행이 안된다!!! 동시에 처리되는 것처럼 보이는것일뿐.. 하지만 CPU가 많으면 동시처리 됨!! 차라리 context-switching (왔다갔다 일처리) 없이 하나에서 일처리를 하는 single-thread가 나을수도...

🤔 하지만 싱글 쓰레드에서 병목현상이 일어나면...?

💡그래서 오래 걸리는 애들은 차라리 백그라운드로 빼놓고 일처리를 하게 되는 방식이 되었음!!!