소주제 : 결제 기능 구현 & 이벤트 루프

1. 결제 연동하기(아임포트)

1. /pages/28/payment/login/index.tsx 페이지를 만들고, 로그인 화면을 구현해 주세요.
2. 로그인에 성공하면 /pages/28/payment/loading/index.tsx 페이지로 이동해 주세요.
3. 이동된 페이지에서 가격을 선택할 수 있는 선택상자와 [ 충전하기 ] 버튼을 만들어 주세요. ⇒ 가격은 500원, 1000원, 2000원, 5000원을 선택 가능합니다.
4. 가격을 선택하고 [ 충전하기 ] 버튼을 누르면, 해당 금액으로 아임포트 결제화면을 띄워주세요.
5. 실제 결제가 완료되면, /pages/28/payment/complete/index.tsx 페이지로 이동해 주세요.

소주제 : callback, promise, async/await

        ( 자바스크립트의 비동기 처리)

1. Callback 친구들

1. /pages/29/callback/index.tsx 페이지를 만들고, 아래 그림과 같이 화면을 완성해 주세요.

• 각각의 버튼을 눌렀을 때, 버튼에 해당하는 방법으로 데이터를 불러와서 화면에 보여주세요.
  1. callback - XMLHttpRequest 사용
  2. promise - axios.then() 사용
  3. async/await - await axios 사용

1. 3개 버튼 각각 모두에 대해서, 다음 주소(http://numbersapi.com/random?min=1&max=200)를 사용하여 임의의 숫자를 하나 불러와 주세요.
2. 불러온 숫자를 가지고 다음 주소(https://koreanjson.com/posts/숫자)에 해당하는 게시물을 불러와 주세요.
3. 불러온 게시물을 작성한 작성자(UserId)가 쓴 다른 게시물 목록을 다음 주소(https://koreanjson.com/posts?userId=작성자ID)를 활용하여 불러와 주세요.
4. 위 4번의 게시글 목록을 위 버튼 을 클릭했을 때, 결과로 나타내 보세요. (state에 저장하고 map으로 출력해 보세요.)