Codestates immersive course
μ΄λ¨ΈμλΈ λ€μ― λ²μ§Έ μ€νλ¦°νΈ Asynchronous & Promise
μ€λμ Asynchronous & Promise μ€νλ¦°νΈ λ§μ§λ§ λ μ΄λ€.
μ΄μ 곡λΆν λ΄μ©μΌλ‘ κ³Όμ λ₯Ό μ§ννλλ° μμ΄μ μ΄λ €μμ μμλ€.
μ΄λ»κ² 보면 κ°μ₯ μ»μ΄κ°λκ² λ§μ μ€νλ¦°νΈμλ€.
callback -> promise -> async await μΌλ‘ λ³κ²½μ΄ μμ λ‘κ² κ°λ₯ν΄μ‘λ€.
νΈμνλ¬μμ λ€λ€λ λ΄μ©κ³Ό async awaitμ ν©μ³μ μ μ μ μμ΄λλ₯Ό μ λ ₯νλ©΄ μ μ μ μ λ³΄κ° λμ€λ
μμ£Ό κ°λ¨ν μμ λ₯Ό λ§λ€μ΄λ΄€λ€.
μ€λμ ν μ΄λ λ¬Έμ λ₯Ό μ΅λν μ΄ν΄νκ³ μ½λλ₯Ό μμ±νλ©΄μ λ¬Έμ λ₯Ό νμ§μκ³ ν΄κ²°λ°©μμ μ°Ύμ ν
μ½λλ‘ λ³ννμ¬ λ¬Έμ λ₯Ό ν΄κ²°νλ λ°©λ²μΌλ‘ μ§νμ νλ€.
ν¨μ¬ μ½λλ₯Ό μμ±νκΈ° μ¬μ μΌλ©° μμΌλ‘λ 무쑰건 μ΄ λ°©μμ μ΄μ©ν΄μΌκ² λ€.
index.html
<body>
<ul class="user-list"></ul>
<template class="user-list-item-template">
<li class="user-list-item"></li>
</template>
<script src="./index.js"></script>
</body>index.js
(() => {
const URL = 'https://jsonplaceholder.typicode.com/users';
const listTemplate = document.querySelector('.user-list-item-template');
const userList = document.querySelector('ul.user-list');
const printUserData = (userElem) => {
userList.appendChild(userElem);
};
const makeElement = (userData) => {
console.log(userData);
const { id, username, name, email } = userData[0];
const clone = document.importNode(listTemplate.content, true);
const listItem = clone.querySelector('li');
listItem.textContent = `id: ${id}, name: ${name}, username: ${username}, email: ${email}, `;
printUserData(clone);
};
const fetchData = async (id) => {
const res = await fetch(URL);
const usersData = await res.json();
const matchedIdUser = usersData.filter((data) => data.id === id);
makeElement(matchedIdUser);
};
const getUserId = () => {
let id = prompt('μμ΄λλ₯Ό μ
λ ₯νμΈμ');
fetchData(Number(id));
};
getUserId();
})();
