개인과제 : [Postman] CH 1 맛집 관리 API 설계하기 PART.1

과제를 소개하기 앞서 전부 한 게시글에 포스팅 하기엔 내용이 많아 PART 를 나누었습니다.
각 과제 목차에 알맞는 링크를 삽입해놓았으니, 궁금하신 부분은 각 목차에 있는 링크를 확인해주세요~ :)

 

과제 소개

 

본 과제는 프론트엔드와 백엔드를 연결하는 API의 구조를 복습하고,

맛집 관리 API 명세서를 직접 설계하며, Postman으로 Mock 서버를 구축합니다.

 

과제 목차

• API 식별하기 Part1.
• API 명세서만들기 Part2. ☞ https://jungei0709.tistory.com/13
• API 검증하기 Part3. ☞ https://jungei0709.tistory.com/14

과제 목표

• 개발자 도구를 활용해 요청-응답 구조를 식별할 수 있다.
• 맛집 API 명세서를 설계하고 작성할 수 있다.
• Postman을 이용해 request와 Mock 서버를 구축할 수 있다.

---

1. API 식별하기

 

1️⃣ 목적

• HTTP/API 개념을 복습합니다.
• 브라우저 개발자 도구(F12)를 사용하여 실제 현업 API의 요청/응답 구조를 이해하고 식별할 수 있습니다.

2️⃣ 내용

1. kakao Map에서 명동교자 본점 상세(링크) 이동합니다.
2. 개발자 도구로 URL이 ‘https://place-api.map.kakao.com/places/panel3/1479300828’인 API를 찾습니다.
3. Header 탭에서 url, method, status code, content-type 등 요청-응답이 어떤 정보로 이루어지는지 확인합니다.
4. Preview 탭에서 어떤 데이터를 응답해주었는지 확인합니다.
5. API 정보(URL, Method, Status, Content-Type)와 Request Body, Response Body의 구조
   (어떤 데이터가 오는지)를 바탕으로, "이 API가 어떤 요청을 받아 어떤 응답을 주는지 분석합니다.
6. 분석한 결과를 설명하는 글을 Notion에 작성하여 제출합니다.

---

라는  과제를 받아 진행하는 과정을 기록해보겠습니다.

 

과제 내용 1,2,3

링크이동, 개발자도구 열기, 헤더탭에서 정보확인하기

 

🏃1단계 : 크롬 브라우저에서 주어진 맛집인 '명동교자 본점' 상세페이지 접속

1. 카카오맵(map.kakao.com)에 접속해서 '명동교자 본점'을 검색합니다.
2. 검색 결과에서 명동 교자 본점의 이름을 클릭해 상세페이지로 이동합니다.

🔨2단계 : 개발자도구 (F12) 키고 API  찾기

과제의 핵심인 "정보" 들을 찾을 차례입니다.

1. 명동교자 상세페이지 화면에서 개발자도구(F12)를 엽니다.
2. 개발자도구 상단 메뉴에서 네트워크 탭을 클립합니다.

3. 네트워크 탭이 켜진 상태에서, 페이지를 새로고침(F5)를 하면 아래에 로그들이 수없이 생깁니다.

4. 과제 내용인
개발자 도구로 URL이 ‘https://place-api.map.kakao.com/places/panel3/1479300828’인 API를 찾아야 하므로

로그를 위로 스크롤 하다 보면 1479300828 이라는 고유의 코드가 보이는데 이를 눌러주면

헤더라는 항목이 보입니다.

🔎3단계 : 개발자도구 (F12) 키고 API  찾기

1. Header 탭에서 url, method, status code, content-type 등
   어떤 요청이 이루어졌는지 찾아 노션에 기록합니다.

 

노션에 기록한 정보

 

Request 

• Method: GET
• URL:https://place.map.kakao.com/1479300828
• Path Parameters: 1479300828
• Content-Type: text/html;charset=UTF-8
• Body: 없음
•   

  키	값
  id	1479300828

Response

• Status Coad : 200 Ok
• Body: 헤더 부분에선 보이지않았으나, 미리보기 탭과 응답 확인 결과 명동교자 본점 상세 페이지의 화면을 그리기 위한 HTML 소스 코드가 들어있었습니다. 그러므로Response Body는 존재합니다.

<title>명동교자 명동역점 신관 본점 | 카카오맵</title> 
//브라우저탭에 표시될 이름

<meta property="og:title" content="명동교자 명동역점 신관 본점">
<meta property="og:description" content="서울 중구 퇴계로 129 1층">
//카카오톡에 이 주소를 공유 했을때 뜨는 제목과 주소정보

<meta property="og:image" content="//img1.kakaocdn.net/cthumb/local/C800x400.q50/?fname=http%3A%2F%2Ft1.daumcdn.net%2Flocal%2FkakaomapPhoto%2Freview%2F21ce5fc46579ef5f2c91c12d0a2a5c62141cdf57%3Foriginal">
// 공유시 미리보기로 보여줄 명동교자 식당의 이미지 URL

<div id="app" class="container-doc"></div>,<script type="module">
//빈화면을 먼저 내려받은후, 
//카카오의 웹 프론트엔진을 실행시켜 상세 데이터를 채워넣기 위한 핵심 실행코드들

 

💡여기서 잠깐!

 

위에 과제에서 요청한 답을 작성하는데,
저는 개인적으로 여기서 Response Body(응답)는 있는데,

Request Body(요청) 는 왜 존재하지 않을까 하는 의문점이 생기더라구요.

 

결론부터 말하자면 지금 제가 찾은 카카오맵 API 주소는 "Request Body(요청 본문)가 없는 API"입니다.

 

혹시나 저 처럼 궁금해하시거나 막히신분들을 위해 분석한 결과를 정리 해볼게요~!

궁금하신 분들은 아래 글을 펼쳐서 보시면 됩니당~!

일단! 제가 찾은 API의 요청 메서드(Method)는 GET입니다.

 

1. GET 메서드는 서버에 데이터를 저장하거나 수정하는 게 아니라,

단순히 정보를 "가져와서 보여달라(Get)"고 요청하는 명령어입니다.

 

2. 정보를 가져올 때는 주소(URL) 뒤에 숫자(Path Parameter)만 툭 던지면 끝이기 때문에,
   편지에 비유하자면 편지 봉투 겉면에 주소만 적고 정작 편지 봉투 안(Body)은 비워둔 상태로
   보내는 것이라 생각하면 편하겠더라구요.

 

3. 그래서 개발자 도구의 헤더부분을 아무리 내려보아도 Request Body 나 Payload 같은 칸이 아예 존재하지 않는것입니다~!

 

그렇다면 응답(Response) Body는 어디에 있을까?

 

요청할 때 보낸 Body(Request Body)는 없지만,

카카오 서버가 우리에게 명동교자 정보를 담아 보내준 응답 Body(Response Body)는 존재합니다.

 

• 아까 헤더(Headers) 글씨를 찾았던 그 나란히 있던 메뉴들을 다시 봅니다.
• 헤더 바로 오른쪽에 있는 미리보기(Preview) 또는 응답(Response) 탭을 클릭합니다.

• 클릭하면 아래쪽에 영어와 한글 문장들이 있는 화면이 나오는데, 그 화면 전체가 바로 서버가 보내준 'Response Body'입니다!

‼️ 혹시나 Request Body가 없으니 Response Body도 없지 않을까라는 생각을 저는 했었는데요

카카오맵 API(https://place.map.kakao.com/1479300828)는 Response Body가 100% 존재하는 API입니다.

제 눈에만 안 보였을 가능성이 커요.

왜 그렇게 판단할 수 있고, 어디서 확인할 수 있는지 분석하면서 얻은 추측을 적어볼게요~!

 

1. "Status Code: 200 OK"가 주는 결정적 힌트!

200 OK는 서버가 내 요청을 받아서
"그래, 네가 요청한 명동교자 상세 페이지 데이터 여기 있어! 성공이야!" 하고 대답했다는 뜻입니다.

성공해서 화면을 띄워줘야 하므로, 카카오 서버는 무조건 무언가 내용물(가게 이름, 메뉴, 리뷰 등)을 채워서 보냈을 수밖에 없습니다. 그 내용물이 담기는 데이터박스가 바로 Response Body입니다.

2. 개발자 도구에서 확인하는 법 (진짜 없는지 검증하기)

위에 올린 개발자 도구 캡처 화면에서 헤더 탭 바로 오른쪽 미리보기 를 보면 

클릭했을 때 흰 창이 아니라  간소하지만 '본문바로가기' , '메뉴바로가기' 가 보이는데요~!

그 글자들 전체가 바로 Response Body가 있는 증거입니다!

만약 미리보기를 확인했는데도 진짜로 흰 화면만 나오고 아무 글자도 없다면

그때는 진짜 Body가 없는 게 맞는거랍니다!

 

이것을 확인하는 과정에서

과제 내용 4번도 해결했는데 아래서 마저 설명해볼게요~!

---

과제 내용 4.

(Preview 탭에서 어떤 데이터를 응답해주었는지 확인합니다.)

 

[Preview(미리보기) 탭 분석]

• 눈으로 확인된 데이터 형태: 웹페이지의 아주 기본적인 텍스트 링크
  (`본문 바로가기`, `메뉴 바로가기`)만 존재하는 텅 빈 하얀 화면이 나타납니다.
• 분석 :이 API 주소는 완성된 맛집 정보를 데이터(JSON)로 주는 곳이 아니라,
            상세 페이지의 "기본 구조(HTML 껍데기)"만 먼저 던져주는 역할을 하기 때문입니다.
  
  

과제 내용 5.

API정보와 와 Request Body, Response Body의 구조를 바탕으로,

"이 API가 어떤 요청을 받아 어떤 응답"을 주는지 분석합니다.

 

명동교자본점 카카오맵 상세 API 분석 보고서

1. API 기본 정보

• URL: https://place.map.kakao.com/1479300828
  • (뒤의 숫자는 카카오맵이 명동교자 본점에 부여한 고유 ID 데이터입니다.)
• Method (메서드): GET
  • (서버에 저장된 맛집 정보를 단순 조회하여 가져오는 요청이므로 GET을 사용합니다.)
• Status (상태 코드): 200 OK
  • (요청이 성공적으로 처리되어 데이터를 정상적으로 응답받았음을 의미합니다.)
• Content-Type (콘텐츠 타입): text/html; charset=UTF-8
  • (JSON 형식이 아니라, 웹페이지의 뼈대를 이루는 HTML 문서 형태로 응답 데이터가 내려옵니다.)

2. 데이터 구조 분석

• Request Body (요청 본문): * 없음 (Empty)
  • 조회(GET) 요청은 주소창(URL)에 필요한 정보(장소 ID)를 담아서 보내기 때문에,
    편지 봉투 안(Body)에 추가로 데이터를 채워 보낼 필요가 없습니다.
• Response Body (응답 본문):
  • HTML 소스 코드 (웹페이지 껍데기 구조)
  • 실제 화면에 보였던 명동교자의 메뉴판 가격이나 리뷰 텍스트 데이터는 응답 본문에 직접 들어있지 않았습니다.
  • 대신 <div id="app" class="container-doc"></div>와 같이 자바스크립트가 실행될 빈 상자(레이아웃 뼈대)만 담긴 HTML 소스 코드가 응답으로 내려옵니다.

3. 최종 요약 (이 API가 하는 일)

"이 API는 카카오맵에서 특정 장소를 눌렀을 때,
맛집 정보들이 채워질 '빈 화면의 틀(뼈대)'을 먼저 가져오는 요청입니다.

실제로 Preview(미리보기) 탭을 확인했을 때 [본문 바로가기] [메뉴 바로가기] 같은 아주 기본적인 링크만 보이고 화면이 텅 비어있었던 이유도 이 때문입니다. 이 주소는 알맹이 데이터를 직접 주는 곳이 아니라 화면의 껍데기만 먼저 띄워주는 역할을 하며, 실제 맛집의 메뉴나 리뷰 데이터는 이 화면이 켜진 직후 컴퓨터가 내부적으로 다른 주소에 다시 요청해서 채워 넣는 방식으로 작동하는 것 같습니다