이번 포스팅에서는 Express를 통해 외부 API를 호출하고, 응답을 전달 받아 표시하는 방법에 대해 알아보도록 하겠습니다. Express에서 API를 사용하는 여러 방법이 있지만 node에서 기본적으로 제공하는 https를 사용할 수 있습니다.
API 호출하기 (비트코인 가격 조회)
이번 예시에서는 바이낸스 거래소 API를 사용하여 비트코인(BTC) 가격을 가져와보도록 하겠습니다. 아래처럼 코드를 작성하고 하고 로그를 찍어보면 요청한 API에 대한 모든 응답을 확인할 수 있습니다.
const express = require("express");
const https = require("https");
const app = express();
app.get("/", function(req, res){
btcPriceURL = "https://api1.binance.com/api/v3/ticker/price?symbol=BTCBUSD";
https.get(btcPriceURL, function(btcRes){
console.log(btcRes);
})
})
app.listen(3000, function() {
console.log("Server is running at 3000...")
})우리에게 필요한 정보인 비트코인 가격 응답은 data 안에 있는데요. 로그를 찍어보면 16진수 형식의 응답이라 사람이 바로 이해할 수는 없습니다.
16진수 응답을 일반 텍스트 형식으로 전환하려면 JSON.parse()를 사용할 수 있습니다. 이제 응답 데이터를 JSON 형식 전환하여 웹에 전달해보겠습니다.
const express = require("express");
const https = require("https");
const app = express();
app.get("/", function(req, res){
btcPriceURL = "https://api1.binance.com/api/v3/ticker/price?symbol=BTCBUSD";
https.get(btcPriceURL, function(btcRes){
btcRes.on("data", function(data){
const btcPrice = JSON.parse(data)
res.send(btcPrice)
})
})
})
app.listen(3000, function() {
console.log("Server is running at 3000...")
})이렇게 하면 비트코인 가격이 정상적으로 표시되는 것을 확인할 수 있습니다.
API를 사용하여 동적 웹페이지 만들기 (다른 코인 페어 조회)
동일한 API 호출 구조를 사용하여 이더리움(ETHBUSD)과 같은 다른 코인 페어의 가격을 조회하는 방법은 무엇일까요?
이전 글 동적 웹사이트 만들기에서 살펴봤듯이 html 파일에서 form 태그를 통해 post 요청을 전송하고 이를 Express에서 처리해주면 사용자의 요청에 응답하는 동적 웹페이지를 구성할 수 있습니다.
먼저 index.html 파일을 아래와 같이 작성합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Coin Price Tracker</title>
</head>
<body>
<h1>Coin Price Tracker</h1>
<form action="/" method="post">
<label for="coinPair">CoinPair</label>
<input id="coinPair" type="text" name="coinPair" placeholder="BTCUSDT">
<button type="submit">Go</button>
</form>
</body>
</html>app.js를 다음과 같이 수정합니다. 참고로 send()는 기본적으로 하나의 응답만을 전달할 수 있습니다. html 문서 내에 여러 결과를 기록하고 싶은 경우에는 아래와 같이 res.write()를 사용하여 HTML 문서를 작성할 수 있습니다
const express = require("express");
const https = require("https");
const bodyParser = require("body-parser");
const app = express();
app.use(bodyParser.urlencoded({extended: true}));
app.get("/", function(req, res){
res.sendFile(__dirname + "/index.html")
})
app.post("/", function(req, res){
const coinPair = req.body.coinPair;
const url = "https://api1.binance.com/api/v3/ticker/price?symbol=" + coinPair;
https.get(url, function(resData){
resData.on("data", function(data){
const coinData = JSON.parse(data);
const symbol = coinData.symbol;
const price = coinData.price;
res.write("<h1>"+symbol+"</h1>");
res.write("<p>"+price+"</p>");
res.send();
})
})
})
app.listen(3000, function() {
console.log("Server is running at 3000...")
})이제 사용자는 바이낸스 거래소에 상장된 코인 페어(BTCUSDT, ETHBUSD 등)를 입력하여 가격을 조회할 수 있습니다.
이상으로 Express에서 외부 API를 호출하고 응답을 전달하여 웹페이지에 표시하는 방법에 대해 알아봤습니다.
'개발 > Express' 카테고리의 다른 글
| Express (2) 동적 웹사이트 만들기 (계산기 서비스) (0) | 2022.09.23 |
|---|---|
| Express (1) 기초 설치와 서버 실행 (0) | 2022.09.21 |