<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>나만의 맛집 지도</title>
<link rel="stylesheet" href="style.css"> // 외부의 CSS 연결 부분
</head>
<body>
HTML에서 외부의 CSS 연결을 하여 사용하였습니다.
단계 1-3.API 호출해보기
이번 단계의 목적
내가 만든 화면에서 실제로 서버에 요청을 보내고 응답을 받아보는 경험 해보기
프론트를 구성하는 JS의 역할 이해하기
// JS의 역할이 무엇일까요?
-> 사용자의 상호작용을 감지하여 함수를 실행하고, 그 결과로 화면(DOM Control)을 바꾸거나 서버와
통신하게 해주는 역할
(HTML의 구조를 동적으로 변경하는 역할)
// API 란 무엇일까요?
-> 프로그램이 다른 프로그램의 기능/데이터를 이용하기 위해 제공되는 인터페이스이자
, 요청/응답 규약(규칙)이다.
<body>
<div class="container">
...
</div>
<script src="app.js"></script> // 외부의 JS 연결 부분
</body>
</html>
같은 폴더 내에 app.js 파일을 만들고 외부에서 연결하는 방식으로 하였습니다.
2. AI에게 아래 프롬프트로 요청해보세요.
아래 Mock 서버 URL로 GET 요청을 보내서
응답받은 맛집 목록을 HTML 카드로 화면에 렌더링하는 JS 코드를 짜줘.
Mock 서버 URL: [복사한 URL 붙여넣기]
// 1. 서버 URL (엔드포인트가 있다면 뒤에 추가하세요)
const API_URL = '목 서버 주소/places';
// 페이지가 로드되면 데이터를 가져옵니다.
document.addEventListener('DOMContentLoaded', () => {
fetchRestaurants();
});
// 2. 서버에서 데이터 가져오기
async function fetchRestaurants() {
try {
const response = await fetch(API_URL, {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
});
const data = await response.json();
// 만약 데이터가 객체 안에 감싸져 있다면 (예: data.stores) 구조에 맞춰 수정하세요.
// 여기서는 data 자체가 배열인 경우를 가정합니다.
data.forEach(item => {
renderCard(item.name, item.address, item.call, item.category, item.rating);
});
} catch (error) {
console.error('데이터 렌더링 중 오류 발생:', error);
}
}
// 3. 데이터를 받아 카드를 생성하고 화면에 붙이는 함수
function renderCard(name, address, call, category, rating) {
const list = document.getElementById('restaurantList');
// 새로운 카드 엘리먼트 생성
const card = document.createElement('div');
card.className = 'restaurant-card';
// HTML 구조 삽입 (index.html의 기존 양식 활용)
card.innerHTML = `
<span class="category">${category}</span>
<h3>${name}</h3>
<p> ${address || '주소가 없습니다.'}</p>
<p> ${call || '번호가 없습니다.'}</p>
<p> ${rating || '점수가 없습니다.'}</p>
`;
// 목록의 맨 뒤에 추가 (서버 데이터 순서대로)
list.appendChild(card);
}
// 4. (기존 유지) 직접 등록 기능
function addRestaurant() {
const name = document.getElementById('resName').value;
const category = document.getElementById('resCategory').value;
const address = document.getElementById('resAddress').value;
const call = document.getElementById('resCall').value;
const rating = document.getElementById('resRating').value;
if (!name || !category) {
alert("식당 이름과 카테고리를 입력해주세요!");
return;
}
// 직접 등록은 맨 위에 보이도록 prepend 사용
renderCard(name, address, call, category, rating);
// 입력창 초기화
document.getElementById('resName').value = '';
document.getElementById('resCategory').value = '';
document.getElementById('resAddress').value = '';
document.getElementById('resCall').value = '';
document.getElementById('resRating').value = '';
}
// *Gemini Pro를 이용해서 구현하였습니다.*
서버 URL 작성해줘야 하는데 이때 엔드포인트를 까먹지 않고 작성해야합니다. 저 같은 경우에는 places로 해주었기때문에 places를 붙여주었습니다.
서버에서 데이터를 조회하는 GET을 이용할 것입니다. 원래 코드에서 GET이 안보여서 AI에게 물어본 결과 밑의 두 코드는 같은것으로 fetch를 사용할때 아무 매개변수를 적지않으면 기본적으로 GET 메서드를 사용하도록 설계되어 있다고 합니다.
