과제 - Create 실습
다음 기본 코드를 활용하여 게시물을 생성하는 코드를 작성해보세요. 프론트엔드 개발자는 물론이고 백엔드 개발자도 이정도는 알아야 한다고 생각하여 낸 과제입니다. JavaScript가 친숙하지 않다면 생성형AI의 도움을 받아 꼭 과제를 수행해보세요. 이 과제의 정답은 강의에서만 제공됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>제코베 스토어 관리자 페이지</title>
</head>
<body>
<button id="btn-load">상품불러오기</button>
<br /><br />
<label for="inp-name">상품이름</label>
<input id="inp-name" type="text" />
<br /><br />
<label for="inp-price">제품가격</label>
<input id="inp-price" type="number" />
<br /><br />
<label for="inp-stock">재고</label>
<input id="inp-stock" type="number" />
<br /><br />
<label for="inp-date">출시날짜</label>
<input id="inp-date" type="date" />
<button type="button" id="btn-register">상품등록하기</button>
<script>
// Read
const btnLoad = document.querySelector("#btn-load");
btnLoad.addEventListener("click", (event) => {
// console.log("눌렀다.");
fetch("https://eduapi.weniv.co.kr/753/product", {
method: "GET",
})
.then((response) => response.json())
.then((data) => {
for (item of data) {
// console.log(i);
const $container =
document.createElement("section");
const $productName = document.createElement("h2");
const $price = document.createElement("p");
$productName.innerText = item.productName;
$price.innerText = item.price;
$container.appendChild($productName);
$container.appendChild($price);
document.body.appendChild($container);
}
});
});
// Create
// Update
</script>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>제코베 스토어 관리자 페이지</title>
</head>
<body>
<button id="btn-load">상품불러오기</button>
<br /><br />
<label for="inp-name">상품이름</label>
<input id="inp-name" type="text" />
<br /><br />
<label for="inp-price">제품가격</label>
<input id="inp-price" type="number" />
<br /><br />
<label for="inp-stock">재고</label>
<input id="inp-stock" type="number" />
<br /><br />
<label for="inp-date">출시날짜</label>
<input id="inp-date" type="date" />
<button type="button" id="btn-register">상품등록하기</button>
<script>
// Read
const btnLoad = document.querySelector("#btn-load");
btnLoad.addEventListener("click", (event) => {
// console.log("눌렀다.");
fetch("https://eduapi.weniv.co.kr/753/product", {
method: "GET",
})
.then((response) => response.json())
.then((data) => {
for (item of data) {
// console.log(i);
const $container =
document.createElement("section");
const $productName = document.createElement("h2");
const $price = document.createElement("p");
$productName.innerText = item.productName;
$price.innerText = item.price;
$container.appendChild($productName);
$container.appendChild($price);
document.body.appendChild($container);
}
});
});
// Create
// Update
</script>
</body>
</html>