[KISA] 핀테크 아카데미 서비스 개발과정 (간편결제) #3회차 Router / Axios / API

이 글은 핀테크 아카데미에서 유관우 대표님의 "핀테크 서비스 개발 기초 과정 2회차 강의" 을 수강 후 개인적으로 공부한 내용을 정리한 게시글입니다. 잘못된 점이나 부족한 부분이 있다면 언제든 지적 부탁드립니다.

# React Router

: 길을 찾아가다

 

- 라우터 설치

{project_dir} > npm install react-router-dom

- 라우터 만들기

import { BrowserRouter, Routes, Route } from "react-router-dom";
import ListComponent from "./components/ListComponent";
import Welcome from "./components/Welcome";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/test" element={<ListComponent />}></Route>
      </Routes>
      <Routes>
        <Route path="/" element={<Welcome username="허지렁이" age="11" />}></Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

/test

root

# React Axios

: http를 통한 데이터의 송/수신을 편하게 만들어주는 비동기 통신 라이브러리

 

 

-설치

npm install axios

import axios from "axios";
import React from "react";
import HeaderWhite from "../components/HeaderWhite";

const AxiosTest = () => {
  const handleClick = () => {
    console.log("click");
    axios
    .get("https://naver.com")
    .then((response) => {
      console.log(response);
    })
    .catch((err) => {
      console.error(err);
    }) 
  }
  return (
    <div>
      <HeaderWhite title="Http 통신" />
      <button onClick={handleClick}>데이터 요청하기</button>
    </div>
  );
};

export default AxiosTest;

cors 에러

- cors 에러가 발생했다. 해결 방법은 두가지가 있는데 cors 확장 프로그램을 설치하거나 프록시를 이용하는 것이다.

+ 프록시 찾아보기

chorme 내 cors 확장 프로그램

cors 에러 사라짐 

Axios 를 통해 https://naver.com 에 GET 방식으로 데이터를 요청해보았다. 개발자 모드의 네트워크 창에서 데이터 요청이 제대로 된 것을 확인할 수 있다. 

 

Post 방식 : axios.post({url}, {option}).then({ 이후 수행할 내용 및 })

# API

API

: 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스이다 -- 한번에 이해가 안된다.

: 설명을 해보자면 프로그램과 또 다른 프로그램을 연결해주는 다리라고 할 수 있다.

예를 들어 일깅 예보를 알려주는 웹페이지를 만든다고 하면 날씨 정보를 어디선가 받아와야한다. 이때 만약 기상청의 날씨정보를 가져온다고 해보자 그러면  “운영체제나 프로그래밍 언어가 제공하는 기능”이 기상청의 날씨정보가 되는것이고, “응용 프로그램”이 그걸 이용해 만든 일기예보 웹사이트가 되는 것이다!

 

오늘 뉴스 검색 API 만들기 실습을 할건데, 그곳에 사용될 API 이다.

API를 잘 활용하기 위해 **매뉴얼 보는 법**을 숙지하셔야 한다고 했다

https://newsapi.org/docs/endpoints/everything

Everything - Documentation - News API

- 메뉴얼 보는 법 연습 해보자

위 링크로 접속하면 여러개의 Request parameters를 확인해 볼 수 있는데, 그 중 language 를 이용해 한국어 기사를 찾아보겠다!

ISO-639-1 코드를 참고하라고 한다! 위키백과에 쳐봤더니 한국어 코드는 **ko**가 나왔따.

 포스트맨을 이용해보자

- 포스트맨은 우편부이다. 데이터를 요청하고 받아보기 때문이다

- 포스트맨을 사용하여 데이터 주고 받는 것을 확인한 후 코드로 옮겨 작업할 수 있다!

두둥 한국어 기사가 제대로 나왔다!! 개인적으로 포스트맨으로 이것 저것 더 실험해봐야겠다.

 

# Destructuring Assignment

: 구조 분해 할당 : 배열이나 객체의 소성을 해체하여 그 값을 개별 변수에 담을 수 있게 해준다.

구조 분해 할당 전

미리 객체를 풀어줬다.