17 웹 API, 개발을 위한 도구들
# 17 웹 API, 개발을 위한 도구들
## 미션
웹 API의 개념과 사용법, 이를 학습 및 훈련하시오.
## 개념
### 웹 API란
웹 API란, 개발을 위해 제공되는 도구이다. 다시 말해, 잘 만들어진 클래스와 함수등의 코드이다. 앞서 사용해왔던 `console.log()`, `document.querySelector()`, `addEventListener()`등이 그 예다. 웹개발 프로그램을 하나의 성이라 한다면, 웹 API는 그 성을 구성하는 블럭이라 할 수 있다.
<img src="http://drive.google.com/uc?export=view&id=1kvuLmkM6x6PrykbBFG88Qu9UfmRZ96v8" alt="홍팍-자바스크립트-웹-API란">
### 웹 API 사용법
웹 API는 사용 설명서가 있다. 이를 웹 API 문서(Docs)라 한다. 자바스크립트의 API 문서는 MDN 사이트가 유명하다. API 문서는 조금 딱딱할 수 있는데, 이를 위해 먼저 구글링을 하면 좋다.
<img src="http://drive.google.com/uc?export=view&id=1kvi66qt7SB8cM_n17MrfIwXJmrk3Qhqd" alt="홍팍-자바스크립트-웹-API-문서">
## 실습
### 02:08 기본파일 생성
html
```
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>자바스크립트 웹 API</title>
<!-- custom -->
<link rel="stylesheet" href="api.css">
<!-- bootstrap 5.2 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<Script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></Script>
</head>
<body class="container">
<h1 id="heading">웹 API, 웹문서를 다루기 위한 개발 도구들</h1>
<article id="practice-1">
<h2>알게 된지, 벌써 ???일</h2>
<p>2022년 11월 4일, 컴순이와 사귄 지 100일째 되는 날이다. 동시에, 처음 알게 된 날부터는 <code>???</code>일째 날이다. 어떻게 아냐구? 나는 기록충. 다이어리에 다 적어놓았다. 헤헿..</p>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<span class="date text-primary">2022-02-12</span>
<span class="description">OT에서 같은조원 컴순이를 만났다</span>
</li>
<li class="list-group-item">
<span class="date text-primary">2022-06-24</span>
<span class="description">사귀기 시작</span>
</li>
<li class="list-group-item">
<span class="date text-primary">2022-11-04</span>
<span class="description">사귄지 100일(처음 알게된지는 ???일)</span>
</li>
<li class="list-group-item">
<span class="date text-primary">????-??-??</span>
<span class="description">앞으로 다가올 200일(언제일까? 자율과제)</span>
</li>
</ul>
</article>
<article id="practice-2">
<h2>기념 선물 고르기</h2>
<p>어느덧 보름이 채 안 남았다. 사귄지 100일되는 기념일 말이다. 그래서 요즘 무엇을 선물할까 고민이 많다. 썸바디 헬미..!</p>
<div class="card">
<div class="card-header">
상품 목록: [지갑, 향수, 아이패드, 에어팟, 애플워치]
</div>
<div class="card-body">
<h5 class="card-title">상품명</h5>
<h6 class="card-subtitle mb-2 text-muted">₩ 99,999</h6>
<p class="card-text text-muted">상품 설명</p>
<a href="#" class="btn btn-outline-primary">Random Pick!</a>
</div>
</div>
</article>
</body>
</html>
```
css
```
/*
* CSS 관련 구글링
* 👉 site:developer.mozilla.org {연관_키워드}
*/
body {
padding-top: 1rem;
}
article {
padding-top: 1rem;
padding-bottom: 1rem;
}
```
js
```
// JavaScript 관련 구글링
// 👉 site:developer.mozilla.org {연관_키워드}
'use strict';
```
### 02:59 웹 API란(설명서 보는 법)
```
// Web API란
// - 웹 개발을 돕는, 잘 만들어진 도구들(제공되는 객체와 함수등의 코드)
// - 예: console.log(), document.querySelector(), Array.push(), ..
// - 구글링: 자바스크립트 Web API란
// - 참조: https://developer.mozilla.org/ko/
```
### 05:11 Date와 String 클래스(시간 간격 구하기)
```
// 1. Date & String 클래스
// - Date: 특정 시간을 객체로 다루기 위한 틀
// - String: 문자열을 객체로 다루기 위한 틀
// - 구글링: 자바스크립트 Date 클래스, 자바스크립트 문자열 split
// - 참조: https://developer.mozilla.org/ko/ 에서 검색
// [연습1] 알게된지, 벌써 ???일(시간 간격 구하기)
// 1) 시간 객체를 생성
const firstMetDate = new Date("2022-02-12");
const the100thDate = new Date("2022-11-04"); // 100일
console.log(firstMetDate.toISOString().split("T")[0]);
console.log(the100thDate.toISOString().split("T")[0]);
// 2) 시간 간격을 계산
const ms = the100thDate.getTime() - firstMetDate.getTime();
console.log(ms);
// 3) 단위 변환(밀리초: 1/1000 => 초 => 분 => 시간 => 일)
const sec = ms / 1000; // 초
const min = sec / 60; // 분
const hour = min / 60; // 시간
const day = hour / 24; // 일
console.log(sec);
console.log(min);
console.log(hour);
console.log(day);
console.log(`${sec}초 => ${hour} 시간 => ${day} 일`);
// 4) 검증
const clone = new Date(the100thDate); // 2022-11-04
clone.setDate(clone.getDate() - 265); // 2022년 11월 04일 - 265일
console.log(clone.toISOString().split("T")[0]);
```
## 구글링 훈련하기 🔥
- 자바스크립트 웹 API란
- 자바스크립트 웹 API 문서
- 자바스크립트 웹 API MDN
- 자바스크립트 Date 클래스
- 자바스크립트 Date getTime
- 자바스크립트 String 클래스
- 자바스크립트 String split