18 웹 API 활용하기
# 18 웹 API 활용하기
## 미션
웹 API의 개념과 사용법, 이를 학습 및 훈련하시오.
## 실습
### 00:15 setTimeout() 개요
```
// 2. setTimeout() 메소드
// - 일정 시간이 지나고, 동작을 수행하는 메소드
// - 해당 메소드는 window 객체가 수행하지만, 보통 생략 됨
// - 실제 호출: window.setTimeout()
// - 구글링: 자바스크립트 setTimeout 사용법
// - 참조: https://developer.mozilla.org/ko/ 에서 검색
```
### 02:15 클릭 이벤트 받기
```
// [연습2] 기념 선물 고르기, 여러 선물들 중 택1(랜덤 박스)
// 1) 이벤트 감시 대상 가져오기
const pickBtn = document.querySelector("#practice-2 .card-body a.btn");
// 2) 이벤트 감지 시작 및 처리함수 연결
pickBtn.addEventListener("click", function(event) {
// 3) 클릭 이벤트 처리
console.log(3);
console.log(2);
console.log(1);
console.log("뿅");
});
```
### 05:14 함수 지연 호출하기
```
// [연습2] 기념 선물, 여러 선물들 중 택1(랜덤 박스)
// 1) 이벤트 감시 대상 가져오기
const pickBtn = document.querySelector("#practice-2 .card-body a.btn");
// 2) 이벤트 감지 시작 및 처리함수 연결
pickBtn.addEventListener("click", function(event) {
// 3) 클릭 이벤트 처리
setTimeout(function() { console.log(3); }, 0);
setTimeout(function() { console.log(2); }, 1000);
setTimeout(function() { console.log(1); }, 2000);
setTimeout(function() { console.log("뿅"); }, 3000);
});
```
### 06:45 화살표 함수
```
// [연습2] 기념 선물, 여러 선물들 중 택1(랜덤 박스)
// 1) 이벤트 감시 대상 가져오기
const pickBtn = document.querySelector("#practice-2 .card-body a.btn");
// 2) 이벤트 감지 시작 및 처리함수 연결
pickBtn.addEventListener("click", function(event) {
// 3) 클릭 이벤트 처리
// 3.1) 화살표 함수로 변경
setTimeout(() => { console.log(3); }, 0);
setTimeout(() => { console.log(2); }, 1000);
setTimeout(() => { console.log(1); }, 2000);
setTimeout(() => { console.log("뿅"); }, 3000);
});
```
### 07:39 DOM 객체 변경하기
```
// 2) 이벤트 감지 시작 및 처리함수 연결
pickBtn.addEventListener("click", function(event) {
// 3) 클릭 이벤트 처리
// 3.1) 화살표 함수로 변경
setTimeout(() => { console.log(3); }, 0);
setTimeout(() => { console.log(2); }, 1000);
setTimeout(() => { console.log(1); }, 2000);
setTimeout(() => {
// a) 선물 객체 배열 생성
const items = [
{name: "지갑", price: 168000, desc: "컴순이가 지갑을 안들고 다니던데, 이번 기회에 선물해주면 어떨까..?"},
{name: "향수", price: 82000, desc: "좋은향 싫어하는 여자는 없다! 근데 컴순이 향수 취향을 모르는데.."},
{name: "아이패드", price: 1200000, desc: "대학생에게 이만한 선물이 있을까? 문제는 가격이라능.."},
{name: "에어팟", price: 359000, desc: "한번 써보면, 줄이어폰으로 못돌아 간다는 그 아이템..!"},
{name: "애플워치", price: 359000, desc: "함께 커플로 애플워치를 하고 싶어..!"},
];
// b) 랜덤 선물 선정
const randFloat = Math.random() * items.length // 0.0 ~ 4.9
const randInt = Math.floor(randFloat); // 0 ~ 4
const pickedItem = items[randInt];
console.log(pickedItem);
// c) 브라우저에 반영(DOM객체에 반영)
const cardTitle = document.querySelector("#practice-2 .card-body h5.card-title");
const cardPrice = document.querySelector("#practice-2 .card-body h6.card-subtitle");
const cardText = document.querySelector("#practice-2 .card-body p.card-text");
cardTitle.innerText = pickedItem.name;
cardPrice.innerText = `₩ ${pickedItem.price.toLocaleString()}`;
cardText.innerText = pickedItem.desc;
}, 3000);
});
```
### 17:23 리팩터링(코드 개선하기)
```
// [연습2] 기념 선물 고르기, 여러 선물들 중 택1(랜덤 박스)
// 0) 처리함수
function openRandomBox() {
// a) 선물 객체 배열 생성
const items = [
{name: "지갑", price: 168000, desc: "컴순이가 지갑을 안들고 다니던데, 이번 기회에 선물해주면 어떨까..?"},
{name: "향수", price: 82000, desc: "좋은향 싫어하는 여자는 없다! 근데 컴순이 향수 취향을 모르는데.."},
{name: "아이패드", price: 1200000, desc: "대학생에게 이만한 선물이 있을까? 문제는 가격이라능.."},
{name: "에어팟", price: 359000, desc: "한번 써보면, 줄이어폰으로 못돌아 간다는 그 아이템..!"},
{name: "애플워치", price: 359000, desc: "함께 커플로 애플워치를 하고 싶어..!"},
];
// b) 랜덤 선물 선정
const randFloat = Math.random() * items.length // 0.0 ~ 4.9
const randInt = Math.floor(randFloat); // 0 ~ 4
const pickedItem = items[randInt];
console.log(pickedItem);
// c) 브라우저에 반영(DOM객체에 반영)
const cardTitle = document.querySelector("#practice-2 .card-body h5.card-title");
const cardPrice = document.querySelector("#practice-2 .card-body h6.card-subtitle");
const cardText = document.querySelector("#practice-2 .card-body p.card-text");
cardTitle.innerText = pickedItem.name;
cardPrice.innerText = `₩ ${pickedItem.price.toLocaleString()}`;
cardText.innerText = pickedItem.desc;
}
// 1) 이벤트 감시 대상 가져오기
const pickBtn = document.querySelector("#practice-2 .card-body a.btn");
// 2) 이벤트 감지 시작 및 처리함수 연결
pickBtn.addEventListener("click", function(event) {
// 3) 클릭 이벤트 처리
// 3.1) 화살표 함수로 변경
setTimeout(() => { console.log(3); }, 0);
setTimeout(() => { console.log(2); }, 1000);
setTimeout(() => { console.log(1); }, 2000);
setTimeout(() => { openRandomBox() }, 3000);
});
```
## 구글링 훈련하기 🔥
- 자바스크립트 setTimeout
- 자바스크립트 화살표 함수
- 자바스크립트 랜덤 정수
- 자바스크립트 toLocaleString