20260102 [TIL] 4 - 웹개발 기초 과제(맛집 관리 API 설계하기)

🚩 API 식별하기

https://place.map.kakao.com/10332413 이 사이트에 들어가서 확인을 해야 됐다

개발자 도구를 열고 network 탬에 들어가서 새로고침을 하고 Fetch/XHR 필터를 들어간다

panel3을 찾아서 header 탭 확인

• 이 api는 데이터를 조회하는 GET 방식의 요청이고, 요청이 성공하면 Status Code 200을 반환한다. 응답 데이터의 타입은 json 형식의 데이터를 응답한다
• response 데이터는 preview를 확인해서 어떤 데이터를 응답해 주는지 본다

 

---

🚩 API 명세서 만들기

복습용

1) 데이터 구조(json)

id: 맛집을 구분하는 번호
name: 가게 이름
address: 주소
call: 연락처
category: 필터, 검색
rating: 평점

2) 등록 API 

- POST는 새 데이터를 생성할 때 씀. 새 맛집을 추가하는 행위가 생성이기 때문에 POST를 쓴다.
- 200도 성공이지만 새로 생성했을 때는 201이 의미가 정확하다

3) 전체 조회 API 

- GET은 데이터를 가져오기 조회라서 GET
- GET은 body를 쓰지 않는 경우가 많다. 가져오는 게 목적이니까 추가 데이터가 필요 없고, 필요하면 보통 query parameter로 붙인다
- items로 감싸면 다른 걸 추가하기가 쉽다 확장에 강해진다

4) 삭제 API

- DELETE가 삭제
- 여기서는 path parameter가 필요하다 전체 삭제가 아니라 특정 하나를 삭제하기 때문에 그래서 {id}가 들어간 url이 된다
- 삭제 성공 후에 굳이 돌려줄 데이터가 없으면 204를 많이 쓴다 메시지를 주고 싶으면 200 + body를 써도 된다

---

🚩Mock 서버 구축하기

collection 생성

mock server 생성

url 붙이고

---

🚩완성된 프론트엔드와 mock 서버 연동하기

npm install과 npm run dev까지 되는 건 확인했는데 한 번 실행을 시키니 종료를 해도 이전 dev 서버가 완전히 안 죽고 백그라운드에 남아서 새로 켜면 lock 에러가 났다...... 
Next.js dev 서버가 종료되지 않아서 재실행이 막히는 건데 windows 환경에서 서버가 좀비 프로세스로 남는 이슈......
포트 3000이 사용 중이라는 에러가 뜨고 3001로 실행해도 똑같은 오류
서버가 정상 종료되지 않으니 AI한테 물어서 해결했다 
실행 중인 거 확인하고 캐시 디렉터리 삭제......

netstat -ano | findstr :3000
taskkill /PID <PID> /F
rmdir /s /q .next
npm run dev

에러가 항상 코드 문제가 아니라는 걸 깨달았다 서버도 중요하구나
솔직히 AI의 도움을 받아서 이런 오류가 생겼고 정확하게 서버 때문에 오류난 것도 깨닫긴 했는데 정확하게 어떤 메커니즘으로 뭐 때문에 이렇게 된 건지는 너무 모호하게 알고 있다 

연동을 해서 실행하는 것까지 하고 삭제와 조회 등록되는 걸 확인했다