MoonCommit DevLog

프로젝트 소개과제를 통해 맛집을 기록하고 관리할 수 있는 웹앱을 만들었다.mockapi.io를 활용해 가상 서버를 구축하고, CRUD 기능을 구현했다.1. 사용기술기술용도HTML페이지 구조CSS크림, 무신사 스타일 디자인JavaScriptAPI호출, DOM조작mockapi.io가상 REST API 서버 DOM이라는 단어를 이해하고 넘어가면 좋을 것 같다.DOM이란 (Document Object Model)웹 페이지를 javascrip가 이해할 수 있는 객체 트리 구조로 바꾼 것이다.예시 내일배움캠프 맛집 실습html이 이렇게 되어있으면 document └─ ul#place-list ├─ li → "내일배움캠프" └─ li → "맛집 실습"javascript는 이렇게 이해한다.이 트..

https://mockapi.io/projects mockAPI mockapi.iomockAPI를 이용하면 별도의 서버 없이도 REST API를 쉽게 만들 수 있다."오늘 뭐 먹지?" 프로젝트를 위한 맛집 리스트 API를 mockAPI로 구현해 보았다.Create 버튼 눌러주면이제 여기 들어가면 화면이 밑에 처럼 나온다.여기서 New resource 클릭!다음 화면이 나오는데 처음에는 복잡해 보여서 당황했지만 알고보면 정말 간단했다.여기까지만 내 프로젝트에 맞게 수정하고 create버튼을 클릭했다. 이러면 완성 ὃὃmockapi.io를 사용하니 정말 간단하고 손쉽게 API를 만들 수 있어서 좋았다.이제 이 서버를 JavaScript와 연결해서 실제로 데이터를 가져와 보는 것도 해볼 예정이다!

CRUD 개념 정리CRUD란?C → Create : 데이터 생성R → Read : 데이터 조회U → Update : 데이터 수정D → Delete : 데이터 삭제웹/REST API 기준동작HTTP 메서드설명예시 (맛집 웹)CreatePOST새로운 데이터 추가새 맛집 등록 (POST /restaurants)ReadGET데이터 조회맛집 목록 불러오기 (GET /restaurants)UpdatePUT / PATCH기존 데이터 수정맛집 정보 수정 (PUT /restaurants/1)DeleteDELETE데이터 삭제특정 맛집 삭제 (DELETE /restaurants/1)자 여기까지 CRUD 개념에 대해서 알아보았고이제 어제 만든 "오늘 뭐 먹지?" 실습 과제에 적용할 수 있도록 구성해 보았다.postman으로 ..