[KISA Fintech Academy] 핀테크 아카데미 세 번째날 - 1(React Router, React Axios)

안녕하세요! 세 번째 날 포스팅으로 돌아왔습니다!

어제 굉장히 설레어하며 오늘을 기다렸는데, 그 마음에 부응하듯 오늘은 조금 따라가기 어려웠어요 중간에 안 돼서 질문도 많이 드리고 ㅠㅠ,,, 

쉬는 시간까지 고생해준 강사님께 이 자리를 빌려 다시 한번 더 감사를 드립니다...😊

자 그럼 오늘 후기 바로 시작해보겠습니다!

 

---

React Router Install

React Router 각기 다른 페이지를 처리하는 방법 중 하나로,

이미 랜더링 되어있는 page를 바꾸는 기능이 추가되어있는 라이브러리입니다.

 

라우팅을 나누어 다양한 페이지를 처리할 수 있게 합니다. 

 

우선, 설치를 먼저 진행하였습니다.

//꼭 프로젝트 디렉토리 안에 다운받아야 합니다.
{project directory}>npm install react-router-dom

요 화면이 나오면 설치가 됐다는 말입니다.

설치가 잘 되었는지 한 번 보겠습니다. 

 라이브러리를 설치하고 나면 항상 package.json에 추가가 돼요

짜잔~ 설치 끝

 

위에 라우팅을 나누어 다양한 페이지를 처리할 수 있게 한다고 했는데 이게 어떤 뜻이냐면,

이 전날 수업까지는 localhost:portnum/로 접근하면 저희가 적어놓은 모든 코드를 다 볼 수 있었는데, 이거를 페이지로 나눠놓는다는 말입니다. 

쉽게 예를 들어, 원래는 제 티스토리의 모든 내용들이 페이지가 나뉘어있지 않고 제 메인 페이지에 모든 정보가 다 적혀있었다면, router을 사용하여 한 개 한 개 페이지로 분리하게 할 수 있다.라고 보시면 됩니다.

코드를 보면서 이해하면 좀 더 이해가 빠를 것 같아요! 강사님은 쉽게 설명 잘해주셨는데 역시 제가 설명하는 건 어렵네요 :(

router을 install 하고 난 후, 라이브러리를 import 하여 사용해야 합니다.

기본적으로 localhost:portnum으로 되어있는 Url을

localhost:portnum/test

수업 시간에 화면 공유당해 엄청... 부끄러웠던 기억이...

locahost:portnum/

으로 분리하여 작성한 코드입니다.

사진들 확인해보시면 portnumber 뒷부분의 주소가 다른 것을 확인할 수 있습니다.

---

React Axios Install

다음은 Axios입니다.

Axios는 HTTP를 통한 데이터의 송/수신을 편하게 만들어주는 라이브러리입니다.

HTTP로 서버와 통신하기 위해 사용하며, 내부 라이브러리에 비해 커스터마이즈가 좋다는 장점이 있습니다.

 

우선 설치를 진행해볼게요!

//굳이 파일 디렉토리가 아니더라도 설치가 가능합니다.
npm install axios

설치가 잘 되었습니다. 

그럼 잘 진행되는지 확인해보겠습니다!

저희가 이번 시간에 실습했던 내용은 검색 결과를 받아서 화면에 링크를 띄우고, 그 링크를 누르면 해당 기사로 넘어갈 수 있게 하는 뉴스 검색 API 만들기였는데요, 잘 됐는지 한 번 확인해볼까요!

아주 잘 됩니다!

사실, 해당 부분 화면에 뉴스 리스트가 뜨지 않아 어디가 문제였는지 찾느라 엄청 애먹었습니다 ㅠㅠ

강사님께 여쭤볼까 생각해봤지만, 여쭤보면 절대 늘지 않을 것 같아 제가 스스로 찾아보려고 하다 보니 수업 끝나고도 꽤 많은 시간을 투자한 끝에 해결할 수 있었습니다! 

 

그래도 혼자 해결하니까 완전 뿌듯하더라고요 ㅎㅎ

 

이제 본격적으로 API로 들어갑니다!

아무래도 내용이 길어지다 보니 글을 두 개로 나눠 써야 할 것 같아요 ㅎㅎ! 

그럼 다음 글에서 다시 뵙겠습니다!