안녕하세요!
네 번째 날... 탈탈 털리고 돌아왔습니다 😢
어제까진 그래도 조금 어렵지만 더 열심히 하면 할 수 있을 거야! 이거였는데
오늘은 정말 정말 정말 정말 어려웠어요...
하지만 어려운 만큼 또 너무 재미있어서 오늘도 너무 보람찬 수업이었습니다.
친절하게 하나하나 알려주신 강사님 덕이기도 하고요 ㅎㅎ
그럼 바로 본론으로 들어가 보겠습니다
사용자 인증 & 토큰 확인 화면 작성
오늘 오전 시간에는 어제 배웠던 API와 route 기능을 사용하여 본인 인증 화면, 토큰 확인 화면을 각각 만들었습니다.
오늘은 결과물을 먼저 보고 가야겠어요 ㅎㅎ
다시 말하지만 오늘 건 진짜 진짜 어려웠어요...
그래서 천천히 작성을 해보려고 합니다.
사용자 인증 화면 작성
이걸 웹 화면으로 옮겨보았습니다.
페이지 하나를 만들어서 어제 POST MAN으로 API가 잘 되는지 확인 마쳤던 그 주소를 가지고 와 줍니다.
검은색으로 가린 부분은 제 id에 해당하는 부분이에요.
저 id를 따로 선언한 후에 href로 해당 주소에 연결해주었습니다.
const handleAuthBtnClick = () => { //버튼 클릭 이벤트를 실행하면
let tmpwindow = window.open("about:blank"); // 아무것도 없는 공백 페이지
const clientId = "개인 id";
tmpwindow.location.href =
`https://url?response_type=type&client_id=${clientId}&redirect_uri=url;
//``안에 ${변수명}을 이용하여 아이디랑 연결
};url 중에서 원래는 "url" + 변수명 + "url"로 사용하던 걸 `` 안에 ${변수명}으로 처리하여 `url${변수명} url`로 입력을 할 수 있다는 것도 이번 교육을 통해 알게 된 사실 중 하나입니다.
이렇게 코드 작성 후 해당 페이지로 접속하여 버튼을 눌러보니
짠! 본인인증 창이 뜨는 것을 확인할 수 있었습니다!
여기까지는 조금 할만했어요 ㅎㅎ 그럼 빠르게 넘어가 보겠습니다.
토큰 확인 화면 작성
오늘은 그 받아온 토큰을 웹 페이지에 나타나게 해 보았습니다!
이렇게 받아온 값을 웹 페이지에 적어내기 위해서는 또 하나의 라이브러리를 설치해주어야 하는데요.
바로 쿼리스트링(Query-String)라이브러리 입니다.
//반드시 실행 파일 디렉토리 내에 입력할 것
npm install query-string;
성공적으로 설치를 마쳤습니다. 그럼 이제 화면에 받아온 query를 띄워보겠습니다.
우선, 토큰을 받아오기 위해 필요했던 값들을 배열에 담아 sendData라는 함수로 보내줄 수 있게 코드를 작성했습니다.
axios(option).then(({ data }) => {
console.log(data); //data를 잘 받아왔는지 console에 찍어보기
if (data.rsp_code === "O0001") { //오류 코드가 나오면 에러 메세지 출력
alert(data.rsp_message);
} else {
const accessToken = data.access_token;
const userSeqNo = data.user_seq_no;
setaccessToken(accessToken); //토큰
setuserSeqNo(userSeqNo); //사용자의 고유 넘버
}
코드 중 토큰을 나타내게 하는 일부분만 가지고 온 것입니다. 저장을 한 결과를 보니!
오류가떴습니다
하하 이 부분을 수업 쉬는 시간 틈틈이 구글링도 해보고 제가 이것저것 고쳐보고 강사님이 올려주신 코드랑 비교해서 틀린 부분을 찾아보려고 해도 도저히 왜 저런 오류가 뜨는지 찾지를 못했습니다 ㅠㅠ
근데? 또 화면은 정상적으로 나왔어요
그래서 수업 끝난 후에 구글링을 해보고 있는데 아직도 해당 오류는 그대로 남아있는 상태입니다...ㅠㅠ 이 부분 왜 이러는지 정말 알고 싶어요 ㅠㅠ!
완벽하게 다 해결되지는 않았지만 여기까지 해서 오전 시간이 지나갔습니다.
계좌 잔액 조회하기
오후에는 본격적으로 서비스에 등록되어있는 사용자의 계좌 잔액을 조회하는 화면을 작업해보았는데요.
작업하기 이전에 완전 불편한 단점 하나가 있었습니다.
바로 token이 유효 시간이 있어 일정 시간이 지나면 다시 발급받아야 한다는 것!
하지만 저희가 작업을 하기 위해서 계속 이렇게 인증을 받기란 번거로운 부분이 있었습니다 ㅠㅠ
서버를 사용하고 있다면 서버에 저장해서 값을 불러오면 된다고 하셨지만 저희는.. 아니니까...
실제로 뭔가 활용을 하여 개발을 할 예정이라면 절대 하면 안 되지만 저희는 테스트 목적이었기 때문에 그냥 브라우저에 토큰의 정보를 저장하기로 했습니다.
F12로 확인할 수 있는 편집기에서 Applicaion -> LocalStorage 바로 여기에 저장을 해 줄 거예요. 전 아까 저장했기 때문에 이미 저장이 되어 있습니다.
localstorage.SetItem(); //LocalStorage에 저장
localStorage.getItem(); //저장된 값 가져오기
이제 저장하는 방법도 알았으니 위에 코드에서 추가를 해 줄 부분이 생기겠네요!
axios(option).then(({ data }) => {
console.log(data); //data를 잘 받아왔는지 console에 찍어보기
if (data.rsp_code === "O0001") { //오류 코드가 나오면 에러 메세지 출력
alert(data.rsp_message);
} else {
const accessToken = data.access_token;
const userSeqNo = data.user_seq_no;
setaccessToken(accessToken); //토큰
setuserSeqNo(userSeqNo); //사용자의 고유 넘버
//localStorage에 저장
localStorage.setItem("accessToken", data.access_token);
localStorage.setItem("userSeqNo", data.user_seq_no);
}
토큰을 고정하였으니 이제 계좌 정보를 불러올 시간입니다.
먼저, 불러올 계좌의 정보를 입력을 해주었습니다.
사진에 보이는 표 상 두 번째에 해당되는 금액의 잔액을 표시해볼 거예요!
저희가 보통 은행 어플을 사용하실 때, 잔액 조회를 눌러야 해당 계좌에 잔액이 뜨잖아요?
그래서 잔액 조회 틀을 만들어준 후에 버튼을 누르면 잔액 조회가 가능하게 만들어보았습니다.
여기서 잔액 조회를 누르면
짠! 하고 잔액 조회가 나옵니다.
저기에 찍힌 잔액이 제 통장 잔액이었으면 얼마나 좋았을까요 ㅠ
값을 받아와서 화면에 출력하는 것 자체는 오전에 실습했던 토큰 나타내는 부분이랑 크게 다르지 않아서 강사님께서 거의 저희 실습 용으로 과제로 내주셨었습니다.
물론 시간 내에 완성하지 못해 강사님의 도움을 받아서 마무리를 하기는 했지만 그래도 2일, 3일 차와는 다르게 제가 이해를 해서 그것을 바탕으로 코드를 건드려보고 코딩을 해보고 확인을 하는 과정을 거치며 뭔가 굉장히 뿌듯하고 두근두근거렸어요 ㅠㅠ!!!
혼자서 다시 한번 해보면서 더 확실히 이해를 해서 다음에 API 적용하기라는 카테고리를 들고 글을 한 번 더 쓸 수 있는 날이 왔으면 좋겠습니다.
오늘의 강의는 여기까지였어요! 벌써 내일이 마지막 강의라는 게 믿기지가 않습니다 ㅠㅠ
남은 강의도 파이팅 해서 잘 들어야겠어요 :)
그럼 마지막 강의와 강의 후기로 만나요 안뇽!
'공부 > 2022 fintech academy' 카테고리의 다른 글
| [KISA Fintech Academy] 핀테크 아카데미 후기 (0) | 2022.03.17 |
|---|---|
| [KISA Fintech Academy] 핀테크 아카데미 마지막 날 (0) | 2022.03.15 |
| [KISA Fintech Academy] 핀테크 아카데미 세 번째날 - 2(Post-man설치, 금융 API) (0) | 2022.02.24 |
| [KISA Fintech Academy] 핀테크 아카데미 세 번째날 - 1(React Router, React Axios) (2) | 2022.02.24 |
| [KISA Fintech Academy] 두 번째 날 (js 기본 문법 | React 환경 설정) (2) | 2022.02.23 |
