점심메뉴 추천기 API

2025. 9. 3. 20:59·HTML&CSS/HTML&CSS 실습

📚 필수 과제

1. 점심 메뉴 등록 API 설계

더보기

1️⃣ 목적

  • POST 요청 구조와 요청 본문 설계 방법을 익힌다.
  • 필요한 필수값과 선택값을 구분해 API를 설계한다.

2️⃣ 구현 내용

    • 메뉴 이름, 맵기 정도, 가격, 음식 종류, 생성일를 포함한 새로운 점심 메뉴를 등록하는 API를 설계해보세요.

 

각 항목을 등록(POST) 하도록 설계를 진행

 

mock server의 주소는 https://94acadfa-93cc-43a2-9a5d-f724416c69d4.mock.pstmn.io 로 구성

 

각 필요 요소에 따른 값과 예시 상황을 설정하여 기입하였음

 

Postman에서의 Request 개념은 API 요청 하나를 정의하는 단위

Example은 Request에 매달려 있는 샘플 개념의 정의라고 이해하도록 하자 

2. 전체 점심 메뉴 목록 조회 API

더보기

1️⃣ 목적

  • GET 메서드로 전체 리스트를 반환하는 REST API 구조를 설계해본다.

2️⃣ 구현 내용

  • 모든 점심 메뉴를 조회하는 API를 만들어보세요.

 

items의 배열값을 통해 전반적인 입력된 리스트 형태 응답 값을 설정하였음

 

GET 형태를 통해서 가상의 Mock server의 값을 받아올 수 있도록 진행하였고 예시답안으로 입력해놓았던 2개의 배열 값이 정상적으로 조회되는 과정을 확인함

3. 특정 메뉴 상세 조회 API

더보기

1️⃣ 목적

  • URL 경로 변수(Path Variable)의 개념을 익힌다.

2️⃣ 구현 내용

  • 특정 메뉴 id를 기반으로 상세 정보를 반환하는 API를 설계해보세요.

 

 

id 값에 따라 특정 배열값을 조회할 수 있는 GET 형태의 API를 설계하였음

 

받아들이는 값에 있어서는 특정 id값이 Mock servers에서 매칭되었을 때 그 배열값을 불러올 수 있도록 지정하였음

 

여기서는 id: m_01 일 경우의 배열값을 받아와야 하므로 BaseUrl 마지막의 특정값을 기입하여 값을 받아와야 함

 

4. 예외 상황에 따른 응답 코드 설계 

더보기

1️⃣ 목적

  • HTTP 응답 코드의 의미와 상황에 맞는 응답 처리를 학습한다.

2️⃣ 구현 내용

  • 올바르게 요청이 처리된 경우 응답코드에 대해 설계해보세요.
  • 존재하지 않는 메뉴를 요청한 경우 응답코드에 대해 설계해보세요.
  • 서버에서 처리 중 오류가 발생한 경우 응답코드에 대해 설계해보세요.

 

응답 코드에 있어서는 다양한 상태값들을 확인할 수 있었는데 우선적으로는 아래와 같이 정리할 수 있었음 

 

✅ 2xx (성공)

  • 200 OK
    요청이 성공적으로 처리됨
  • 201 Created
    요청이 성공했고 새로운 리소스가 생성됨
  • 204 No Content
    요청은 성공했지만 응답 바디가 없음

 

⚠️ 4xx (클라이언트 오류)

  • 400 Bad Request
    요청이 잘못됨(파라미터, 바디 형식 오류 등)
  • 401 Unathorized
    인증이 안됨
  • 403 Forbidden
    권한 없음, 부족
  • 404 Not Found
    요청한 리소스를 찾을 수 없음
  • 409 Conflict
    리소스 충돌(중복)

위의 내용을 기반으로 POST 진행 과정 간 3개의 특정 상황에 대한 예시를 구성함

 

  • 201 Created 인 경우 
{
"id": "m_03",
"name": "불고기덮밥",
"spicy": 1,
"price": 8500,
"category": "한식",
"createdAt": "2025-09-03T11:00:00Z"
}
 
  • 400 Bad Request 인 경우
{
"error": {
"code": "VALIDATION_ERROR",
"message": "name is required",
"details": [{ "path": "name", "reason": "required" }]
}
}
 
  • 409 Duplicate 인 경우
{
"error": {
"code": "DUPLICATE_MENU",
"message": "Menu name already exists"
}
}
 
각 응답코드에 따라 POST 처리과정의 변화를 Headers를 통해 확인할 수 있었음

❤️‍🔥 도전 과제

1. Postman으로 Mock Server 만들기

더보기

1️⃣ 목적

  • 실제 서버 없이 API 호출을 테스트하는 방법을 익힌다.

2️⃣ 구현 내용

  • Postman에서 본인이 만든 API를 기반으로 Mock Server를 만들어보세요.
응답과 실패, 그리고 값을 입력하는 과정들을 확인할 수 있었음

2. Postman으로 API 테스트

더보기

1️⃣ 목적

  • 클라이언트 입장에서 API 호출 흐름을 익힌다.

2️⃣ 구현 내용

  • 본인이 설계한 API들을 Postman에서 실제로 호출해보고 응답을 확인해보세요.

 

 

POST 와 GET 형태의 전송 및 응답 과정들을 거치며 필수기능 과제에서 작업했던 API의 흐름을 확인할 수 있었음 

3. 다양한 필드 설계 및 테스트

더보기

1️⃣ 목적

  • 실무에 가까운 데이터 설계 감각을 키운다.

2️⃣ 구현 내용

  • 메뉴에 포함되는 데이터 필드를 자유롭게 확장해보고 (예: 이미지 URL, 평점 등), mock 서버에 반영해보세요.

☠️ 트러블 슈팅

  • 발생한 Issue 
    • 상세 세부정보 추출에 있어서 원하는 값이 Mock server에서 불러와지지 못하는 상황이 있었음
  • 해결방법 / 찾아본 내용
    • 단순히 Baseurl을 조회하고 응답하게끔 설정하는 것이 아닌 특정 루트에 대한 요청과 응답을 받는 과정이 필요했음
      • 내가 작업할 때에는 id 값이 m_01인 특정 값을 그대로 불러오는 것을 원했기 때문에 
      • Baseurl : https://94acadfa-93cc-43a2-9a5d-f724416c69d4.mock.pstmn.io/ 가 아닌
      • m_01을 조회할 수 있는 루트 : https://94acadfa-93cc-43a2-9a5d-f724416c69d4.mock.pstmn.io/menus/m_01 로 조회하여야 정상적으로 server에서 값을 받아올 수 있음

'HTML&CSS > HTML&CSS 실습' 카테고리의 다른 글

점메추 API Ajax 호출  (0) 2025.09.04
점심메뉴 추천기  (0) 2025.09.03
할 일 목록 만들기  (0) 2025.09.02
프로필 페이지 제작  (0) 2025.09.02
'HTML&CSS/HTML&CSS 실습' 카테고리의 다른 글
  • 점메추 API Ajax 호출
  • 점심메뉴 추천기
  • 할 일 목록 만들기
  • 프로필 페이지 제작
stark77
stark77
하마의 IT 자기개발 이모저모, 백엔드 개발자로 거듭나기
  • stark77
    하마의 개발자 성장일기
    stark77
  • 전체
    오늘
    어제
    • 분류 전체보기
      • 컴퓨터구조와 운영체제
        • 컴퓨터구조
        • 운영체제
      • SQL 기초
      • Spring
        • 백엔드 기초
        • Spring 실습
      • JAVA
        • Java 실습
      • HTML&CSS
        • HTML&CSS 실습
      • Git&GitHub
        • Git&GitHub 실습
      • 내배캠 끄적끄적
        • Today I Learned
      • 유용한 툴 및 사이트 정리
      • 취미
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    Github
    git
    객체지향프로그래밍
    Spring
    WebSocket
    Java 문법기초
    Spriingboot
    JPA
    String.format
    MVC
    BEAN
    객체지향
    algorithm
    for문
    Til
    프로세스와 쓰레드
    백엔드 기초다지기
    jsp
    백엔드 기초
    경합조건과 교착상태
    네트워크 기초
    HTML&CSS
    thymleaf
    RestTemplate
    SpringSecurity
    실시간 데이터 처리
    웹소켓
    다형성
    java
    Stomp
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.4
stark77
점심메뉴 추천기 API
상단으로

티스토리툴바