프로젝트 소개
과제를 통해 맛집을 기록하고 관리할 수 있는 웹앱을 만들었다.
mockapi.io를 활용해 가상 서버를 구축하고, CRUD 기능을 구현했다.
1. 사용기술
| 기술 | 용도 |
| HTML | 페이지 구조 |
| CSS | 크림, 무신사 스타일 디자인 |
| JavaScript | API호출, DOM조작 |
| mockapi.io | 가상 REST API 서버 |
DOM이라는 단어를 이해하고 넘어가면 좋을 것 같다.
DOM이란 (Document Object Model)
- 웹 페이지를 javascrip가 이해할 수 있는 객체 트리 구조로 바꾼 것이다.
- 예시
<ul id="place-list">
<li>내일배움캠프</li>
<li>맛집 실습</li>
</ul>html이 이렇게 되어있으면
document
└─ ul#place-list
├─ li → "내일배움캠프"
└─ li → "맛집 실습"javascript는 이렇게 이해한다.
이 트리 구조가 바로 DOM𖠌
2. 주요 기능
| 기능 | 설명 |
| 조회 | 저장된 맛집 불어오기 |
| 등록 | 새로운 맛집 등록 |
| 수정 | 맛집 수정 |
| 삭제 | 맛집 삭제 |
3. 시스템 구조
배운점
fetch란?
서버에 요청을 보내고 응답을 받아오는 함수
CRUD별 코드 예시
const API_URL = "https://69b14647adac80b427c49299.mockapi.io/restaurants";
// 조회(GET)
const response = await fetch(API_URL);
const data = await response.json();
// 등록(POST)
await fetch(API_URL, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(newData)
});
// 수정(PUT)
await fetch(`${API_URL}/${id}`, {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(updateData)
});
// 삭제(DELETE)
await fetch(`${API_URL}/${id}`, {
method: "DELETE"
});
핵심 키워드 정리
| 키워드 | 설명 |
| fetch(URL) | 서버에 요청 보내기 |
| await | 응답 올 때까지 기다리기 |
| response.json() | 응답을 JSON으로 변환 |
| method | GET, POST, PUT, DELETE 지정 |
| JSON.stringify(() | JS 객체를 JSON 문자열로 반환 |
느낀점
처음에는 어디서부터 시작할지 막막하고 모르는 것도 너무 많고, 하면서도 "이렇게 하면 실력이 늘까?, 아는 게 생길까?"라는 걱정도 있었지만 정말 신기하게 부딪혀보면서 하니 차근차근 이해되기 시작했다. 가장 설레고 좋았던 점은 처음 이 과제를 접했을 때보다 지금 현재 나의 지식과 이해가 늘었다는 점이다.
◡̈ 다음으로 할 것
VO를 활용해 "오늘 뭐 먹지?" 웹앱을 조금 더 완성도 있게 다듬어 보고, 그 과정에서 VO의 활용 방법도 함께 익혀볼 예정이다.