사용한 언어: HTML, CSS, JavaScript(순수 JS)
프레임워크: 부트스트랩
- Numbers API
Numbers라는 재밌는 API를 이용해서 숫자에 맞는 재밌는 사실을 알려주는 웹앱을 만들어 봤다. 입력란에 아무 숫자나 넣으면 그 숫자에 맞는 사실(Fact) 한 가지를 보여주는 기능이다. 만약 숫자가 너무 크거나, 숫자에 맞는 리턴 값이 없다면 'boring number'라는 기본값을 보여준다.
Numbers API
NumbersAPI An API for interesting facts about numbers Bring meaning to your metrics and stories to your dates An API for interesting facts about numbers Bring your metrics and dates to life Let your metrics tell tales with our API of number facts What tale
numbersapi.com
- 결과
이 웹앱을 통해서 http통신을 요청하고 데이터를 받아오는 공부를 할 수 있었다. AJAX 와 Fetch api를 사용해 서버에 요청하고 데이터를 받아오는 방법을 사용했다. 디자인적인 요소는 부트스트랩을 이용해 빠르게 만들었다.
우선, HTML 코드는 다음과 같다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Number Facts app</title>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous"
/>
<style>
#fact {
display: none;
}
</style>
</head>
<body class="bg-secondary">
<div class="container">
<div class="row">
<div class="col-md-6 mx-auto">
<div class="card bg-primary text-white p-4 mt-5">
<h1>Number Facts</h1>
<p>숫자를 입력하고 랜덤 Fact를 확인하세요.</p>
<input
type="number"
id="numberInput"
class="form-control form-control-lg"
placeholder="숫자를 입력하세요.."
/>
<div id="fact" class="card-body">
<h4 class="card-title">
Number Fact
</h4>
<p id="factText" class="card-text"></p>
</div>
</div>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
하나씩 설명하자면,
<input
type="number"
id="numberInput"
class="form-control form-control-lg"
placeholder="숫자를 입력하세요.."
/><input> 태그는 숫자만 입력되도록 타입을 number로 설정했다. class는 부트스트랩 스타일링을 위해 다음과 같이 정했고, 자바스크립트에서 사용하기 위해 id값을 설정했다.
<div id="fact" class="card-body">
<h4 class="card-title">
Number Fact
</h4>
<p id="factText" class="card-text"></p>
</div>#fact {
display: none;
}
id가 fact인 숫자를 입력했을 때 값을 표현하는 영역이다. 우선 처음에는 이 영역을 display: none으로 설정해 보이지 않도록 했다. 그리고 나중에 값을 입력받았을 때, 자바스크립트를 이용해 영역이 다시 보이도록 만들었다.
다음으로 JavaScript 코드다. 여기서 두 가지 방식 즉, AJAX 와 Fetch를 이용했다. 기능적인 부분은 동일하지만 Fetch를 이용한 방법이 훨씬 간단하게 코드를 짤 수 있다. 둘 다 같은 기능을 구현한 거니 선택해서 사용하면 된다.
1) AJAX - XHR 방식
let fact = document.querySelector('#fact');
let factText = document.querySelector('#factText');
let numberInput = document.querySelector('#numberInput')
numberInput.addEventListener('input', getFactAjax);
function getFactAjax() {
let number = numberInput.value; // input 입력 값
let xhr = new XMLHttpRequest(); // XHR 생성자 생성
xhr.open("GET", "http://numbersapi.com/" + number); // GET방식, API 요청
xhr.onload = function () {// 요청이 성공적으로 완료되면
if (this.status == 200 && number != "") { // 요청상태 확인 및 입력한 값이 있다면
fact.style.display = 'block';
factText.innerText = xhr.responseText;
}
};
xhr.send();
}number라는 변수는 input태그에서 입력한 값을 담고 있다. 이제 URL에 number를 붙여 GET방식으로 API 서버에 요청한다. 만약 성공적으로 응답을 받으면 div#fact 영역을 block으로 바꿔 보이도록 한다. 그리고 텍스트란에 받아온 응답 값을 표현해주면 성공적으로 앱이 완성된다.
2) Fetch 방식
let fact = document.querySelector('#fact');
let factText = document.querySelector('#factText');
let numberInput = document.querySelector('#numberInput')
numberInput.addEventListener('input', getFactAjax);
function getFactFetch() {
let number = numberInput.value;
fetch("http://numbersapi.com/" + number)
.then((response) => response.text())
.then((data) => {
console.log(data);
if (number != "") {
fact.style.display = "block";
factText.innerText = data;
}
})
.catch((err) => console.log(err));
}fetch 함수에 요청할 URL을 넣어준다. 성공적으로 응답을 받으면 response.text()를 이용해 promise 값을 리턴하도록 한다. 그 값이 data 인자로 들어가고, 입력값(number)이 있는지 확인 후, 응답 값을 보여주도록 한다. catch를 사용해 에러 처리를 했다.
여기서 사용한 Numbers API는 서버 요청, 응답을 공부하기에 가장 간단한 예제라고 생각한다. 2가지 방식으로 모두 공부해보면서 조금이나마 서버 요청과 응답을 이해할 수 있었다. 다음에 다른 자바스크립트 예제를 포스팅할 예정이다.
'JavaScript' 카테고리의 다른 글
| [JavaScript] 객체, 배열 자료 다루기 - JSON 데이터 (0) | 2020.09.24 |
|---|---|
| [JavaScript] Advice Slip API 이용한 간단한 웹앱 - Fetch (0) | 2020.08.19 |
| [JavaScript] AJAX 란 무엇인가? (0) | 2020.07.17 |
| [JavaScript] Event - addEventListener, 이벤트 객체 (0) | 2020.05.14 |
| [JavaScript] JSON - JSON.parse(), JSON.stringify() (0) | 2020.05.13 |