환전(환율) 계산기 만들기 ① BE

FE : React , yarn

BE: Express, npm

---

③ Third commit - FE

1.  install axios, instance 생성

2. select 선택을 국가 기준으로 변경

3. 변수명 변경 (1 => from , 2=> to 등으로)

 

---

① First Commit - BE

라이브러리 설치

1. xhr2 : XMLHttpRequest 사용 위함.

2. cors: cors 충돌 해결 위함.

 

클라이언트-서버 데이터

get : date, currencylist, nationlist 보내기

post: 두 국가의 통화코드값 받으면, rate 값 보내기

const express = require("express");
const app = express();
const port = 8080;
const XMLHttpRequest = require("xhr2");

//cors 추가하면 ajax 잘됨 npm install cors
app.use(express.json());
const cors = require("cors");
app.use(cors());
app.use(express.static("public"));
app.get("/", (req, res) => {
  res.send("HOME");
});

//국가 통화코드 currency1, currency2 받으면, exchangeRate값 보내기
app.post("/api/:currency1/:currency2", (req, res) => {
  const { currency1, currency2 } = req.params;
  const requestURL = `https://api.exchangerate.host/convert?from=${currency1}&to=${currency2}`;
  const request = new XMLHttpRequest();
  request.open("GET", requestURL);
  request.responseType = "json";
  request.send();
  request.onload = function () {
    const response = request.response;
    const exchangeRate = response.info.rate;
    res.send(`${exchangeRate}`);
  };
});

//date, currencylist 보내기
app.get("/currencylist", (req, res) => {
  const currency = "USD";
  const requestURL = `https://api.exchangerate.host/latest?base=${currency}`;
  const request = new XMLHttpRequest();
  request.open("GET", requestURL);
  request.responseType = "json";
  request.send();
  request.onload = function () {
    const response = request.response;
    const date = response.date;
    const currencyList = Object.keys(response.rates);
    res.send({ date, currencyList });
  };
});

//국가, 통화단위(symbols) 보내기
app.get("/nationlist", (req, res) => {
  const requestURL = "https://api.exchangerate.host/symbols";
  const request = new XMLHttpRequest();
  request.open("GET", requestURL);
  request.responseType = "json";
  request.send();
  request.onload = function () {
    const response = request.response;
    const data = Object.values(response.symbols);
    res.send(data);
  };
});
//서버 실행
app.listen(port, () => {
  console.log("서버 실행!!!");
});

issue

1. 환율 rate 받아오는 게 느림. 

2. app.post("/api/:currency1/:currency2", (req, res) => { 이 부분이 이상함. 주고 받는 데이터는 문제 없으나, 의미적으로 안 맞는 느낌. params가 아닌 query로 받아오면 좋을듯.

 

우선 여기까지- 내가 만든 FE와 BE가 작동하는 기쁨은 있었으나.... 수정하고 싶은 게 많아서 계속 작업해보기로-

 

https://youtu.be/kM5MXVheri8