맛집 리스트
" 오늘 뭐 먹지? "
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>오늘 뭐 먹지?</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>오늘 뭐 먹지?</h1>
<p>나의 소중한 맛집 기록장</p>
</header>
<main>
<section id="add-place">
<h2>맛집 추가하기</h2>
<form id="place-form">
<input type="text" placeholder="가게 이름" required>
<input type="text" placeholder="가게 종류" required>
<input type="file" accept="image/*">
<button type="submit">추가</button>
</form>
</section>
<section id="place-list">
<h2>맛집 리스트</h2>
<ul>
</ul>
</section>
</main>
<footer>
<p>© 2026 오늘 뭐 먹지?</p>
</footer>
<script src="app.js"></script>
</body>
</html>
HTML 구조와 역할
더보기
- header : 페이지 제목과 설명
- main : [맛집 추가 폼 add-place] - 사용자가 가게 이름, 종류, 이미지를 입력
- [맛집 리스트 place-list] - javascript가 API 데이터를 받아 카드 형태로 화면에 표시
- footer : 나만의 저작권 정보 표시
- 스크립트 연결 app.js : 페이지가 열리면 js가 실행되어 동적으로 데이터 추가/렌더링
css는 AI를 적극 활용하여 생성(생략)
app.js
document.addEventListener("DOMContentLoaded", () => {
console.log("JS 실행됨");
const placeList = document.querySelector("#place-list ul");
const MOCK_URL = "https://3061e7c9-c10b-4860-a129-cbdb7bd34eab.mock.pstmn.io/places";
fetch(MOCK_URL)
.then(response => response.json())
.then(data => {
data.forEach(place => {
const card = document.createElement("li");
card.innerHTML = `
<div>
<h3>${place.name}</h3>
<p>📍 ${place.address}</p>
<p>📞 ${place.call}</p>
<p>🍴 ${place.category}</p>
<p>⭐ ${place.rating}</p>
</div>
`;
placeList.appendChild(card);
});
});
});더보기
- fetch(MOCK_URL)
.then(response => response.json()) - 서버에서 JSON 형식의 맛집 정보를 받아온다.
- 받은 데이터 하나씩 카드로 만들기
- 이름, 주소, 전화번호, 종류, 평점을 <li> 카드로 만들어서 ul에 추가
느낀점
오늘 처음으로 Postman을 이용해 맛집 정보를 조회하도록 JavaScript를 활용해 코딩해보았다.
초반에는 이해가 잘 되지 않아 2시간 정도 막혔지만, 튜터님께 질문하고 강의를 차근차근 따라가면서 흐름을 어느 정도 이해할 수 있었다.
내일은 JavaScript를 코드에 더 정확하게 활용하는 방법을 학습할 계획이다!