[KISA Fintech Academy] 핀테크 아카데미 마지막 날

안녕하세요! 

 

이번엔 조금 늦었습니다 ㅠㅠ...

이해가 되지 않아서 엄청 끙끙 싸매고 어떻게든 이해하려고 해보았는데 실패했습니다...

 

아직도 되지 않은 부분이 있어서 이 일지 작성 후에도 천천히 되짚어보면서 다시 이해해보려고 해봐야겠어요...

 

그래도 이해한만큼은 한 번 작성을! 해보겠습니다!

 

---

 

잔액조회 &  QR 생성

먼저 오전에는 잔액을 조회하고, QR코드를 생성해보는 작업까지 진행했습니다.

 

우선 웹 상에서 컴포넌트의 스테이트나 값들을 확인할 수 있게  React Developer Tools를 설치해주었습니다

 

chrome 웹 스토어 -> React Developer Tools 검색 후 확장 프로그램을 추가해줍니다.

물론 추가하고 난 직후에는 한 번 껐다가 켜야 합니다!

그렇게 하게 되면 요렇게 확인이 가능해져요 

 

일단 이 확장 프로그램을 설치해둔 후 저희가 이전까지 입력해놨던 금액들을 조회하는 창을 띄워보겠습니다.

 

지난 포스팅들과 마찬가지로 혹시 모를 경우를 대비해 자세한 코드는 작성하지 못하는 점 이해해주세요 ㅠㅠ!

{transactionList.map((transaction) => {
        return (
          <p>
            {transaction.print_content} / {transaction.tran_amt}
          </p>
        );

 

해당 코드를 통해 잔액 조회 화면을 들어가보면?

 

짠!

제 계좌의 잔액 조회가 이제 가능하게 되었습니다

 

다음은 QR코드를 생성하는 창입니다 

이전에 발급 받았던 fintech번호를 이용하여 QR을 만들어 볼 거예요!

 

<QRBlock>
      <QRCode size={200} value={fintechUseNo} />
</QRBlock>

 

이렇게 QR 블록 안에 QRcode의 사이즈와 값을 지정을 해 주고 화면에 나타내주면

 

 

이렇게 QR 코드가 나타나게 됩니다!

 

오전에 분명히 되게 빨라서 따라가는 게 좀 버거웠었는데 포스팅으로 적고 보니까 그렇게 양이 많지 않은 것 같아요 ㅠㅠ 

오후에는 QR 코드를 이용하여 계좌 주인한테 송금을 할 수 있게 해보려고 합니다!

 

---

QR 코드를 이용한 계좌 송금

 

드디어 핀테크 아카데미 마지막 시간입니다! 아쉬움은 뒤로 하고 일단 오후에 나간 진도를 먼저 포스팅해볼게요

 

먼저, 간단한 이론을 먼저 설명하고 들어갔습니다. 

 

이체 서비스

- 출력 송금한 내용을 화면에 출력하게 해 준다

- 입금 내 계좌에서 타 계좌로 입금을 시켜준다

 

여기서 입금을 하게 될 때 은행 등 우리가 이체를 위해 이용하는 기관들은 중간자 역할을 한다고 생각하시면 됩니다.

고객간 송금을 예로 들어보겠습니다.

저희가 통상적으로 이용하는 이체 거래는 이용기관에 입금을 하고 이용기관에서 다른 고객에게 입금을 해주는 형식입니다.

송금자 입장 - 출금 거래

수신자 입장 - 입금 거래

 

은행을 거치지 않고 다이렉트로 다른 사람들에게 갈 수 있게 하는 은행은 없다고 보면 된다.

 

해당 부분을 잘 기억하며 앞으로 코드를 짤 예정입니다.

자 그럼 이제 오전에 만들었던 QR 코드를 읽을 수 있게 하기 위해 카메라 권한을 허용을 해 줄 겁니다

      <QrReader
        delay={delay}
        style={previewStyle}
        onError={handleError}
        onScan={handleScan}
      />

 

QR 을 읽을 수 있게 코드를 위와 같이 먼저 작성해준 후 QR 코드를 읽을 수 있게 하기 위해 라이브러리를 설치를 해 줄 겁니다.

npm i react-web-qr-reader

 

이렇게 코드를 작성을 하고 페이지에 접속을 하게 되어도 바로 QR을 스캔할 수 없게 되는데요, 그 이유는 저희가 아직 카메라 권한을 허용해놓지 않았기 때문입니다. 

 

이렇게 권한 설정을 하고 나니 카메라로 QR을 읽을 수 있게 되었습니다!

 

이제 QR로 이체를 할 수 있게 하기 위해 API 문서를 읽어서 작성을 해 볼 겁니다.

postman을 사용하여 일단 API가 잘 돌아가는지 확인해보았습니다!

다른 문서와 다르게 Context-Type 에 application/json이라고 되어있는 부분이 지금까지와는 다른 부분이었습니다

 

이 부분은 Body에서 전달할 정보를 입력하기 전에, 아래와 같이 변경을 해 준 후 작성해야 합니다.

JSON으로 값을 전달해 줄 예정이기 때문에 JSON으로 설정을 해주었습니다.

작성 방법은 아래 참고해주세용

{
전달하려고 하는 내용 : "value",
...
}

 

이렇게 API에 해당되는 부분을 작성하여 값을 전달해주었는데, 제 토큰 오류가 있었습니다

 

다른건 지금까지 설정했던 토큰으로 설정이 가능했었는데, 갑자기 조회가 되지 않아 혼자서 진도 못 나가고 엄청 헤맸었습니다 ㅠㅠ...

 

쉬는 시간에 강사님께 도움을 받아 결국 새로 토큰을 발급받은 후 지금까지의 과정을 다시 시도해본 후에 해결할 수 있었습니다!

 

자 그럼 그 다음으로 넘어가겠습니다

저희는 송금 내역을 모달 창으로 띄울 예정인데, 모달 창을 띄우기 위해 또 하나의 라이브러리를 설치해주었습니다.

//모달창을 띄우기 위한 라이브러리
npm insall react-modal

//옆으로 넘기는 슬라이드를 구현하기 위한 라이브러리
npm install react-slick
//slick을 구현하기 위해 같이 추가해줘야 하는 라이브러리
npm install slick-carousel

API를 설정했던 곳에서 출금 계좌에 대한 설정을 해 주고, 출금 이체 데이터를 입력을 해주었습니다

그리고 이제 코드 작성해서 띄우면 되는데... 

제 모달 창이 진짜 이상하게 떴어요 완전 알 수 없는... 이상한 숫자가 난무하는 그런... ㅠㅠ 알 수가 없는 ㅠㅠ... 그래서 마지막에 구현을 완전 실패해버렸습니다 

 

앞으로 더 공부를 해서 다시... 뭐가 틀렸는지 확인해보고 다시 구현을 해 볼 생각이에요 

물론종강하면할수있겠지만요

 

 

---

마지막이 좀 많이 아쉽지만, 이렇게 5일간의 핀테크 아카데미 교육이 막을 내렸습니다!

 

연락 받기로는 저는 수료 다 해서 수료증도 나올 거라고 하셨어요 히히!!

 

수료증 나오고 나면 후기와 함께 마지막 포스팅으로 찾아뵙겠습니다 :)

 

꼭 다시 공부해서 구현 성공했다는 포스팅을 올릴 수 있기를 바라며 ㅠㅠ!!!