[내일배움캠프 Spring_3기] 2일차 TIL

jiiim_ni·2025년 12월 30일

오늘은 스파르타 내일배움캠프 백엔드 과정에서
어제 들었던 강의 내용을 바탕으로
API 설계부터 Mock 서버, 프론트엔드 연동까지의 흐름을 직접 실습해본 날이었다.

어제는 개념을 훑는 느낌이었다면,
오늘은 그 개념들을 하나씩 연결해보는 날 이었다.


오늘 한 것 요약

오늘은 하나의 웹 프로젝트 흐름을 기준으로 다음 과정을 진행했다.

  • 실제 서비스(API) 분석 (카카오맵)

  • API 요청/응답 구조 분석

  • 맛집 관리 API 명세서 직접 작성

    • 등록
    • 전체 조회
    • 삭제
  • Postman으로 Mock 서버 구축

  • Mock 서버에 baseURL 설정

  • API 요청 테스트 (POST / GET / DELETE)

  • v0를 이용한 프론트엔드 생성 준비

어제 배운 프론트엔드 / 백엔드 / 데이터베이스 맛보기, 넓게 보는 웹 프로젝트 흐름(챕터 3) 강의 내용을 다시 복습하면서
오늘 실습을 진행했다.


실제 API 요청 확인하기

카카오맵에서 명동교자 본점 상세 페이지를 열고
브라우저 개발자 도구(Network 탭)를 통해
해당 화면을 구성하는 API 요청을 직접 확인했다.

  • URL: https://place-api.map.kakao.com/places/panel3/10332413
  • Method: GET
  • Status Code: 200 OK
  • Content-Type: application/json

이 API는
Request Body 없이 URL Path에 포함된 장소 ID를 기준으로 요청을 받고,
장소의 이름, 주소, 전화번호, 카테고리, 평점 등의 정보를
JSON 형태로 응답해주고 있었다.

브라우저는 이 응답 데이터를 이용해
카카오맵 장소 상세 화면을 구성한다는 걸 확인했다.


API 명세서 작성

맛집 관리 기능을 기준으로 다음 API를 설계했다.

  • POST /places → 맛집 등록
  • GET /places → 맛집 전체 조회
  • DELETE /places/{id} → 맛집 삭제

각 API에 대해

  • Method
  • URL
  • Request Body
  • Response Body
  • Status Code

를 명세서 형태로 직접 작성했다.

명세서를 쓰면서 느낀 점은
API는 코드보다 먼저 정리되어야 하는 약속이라는 점이었다.


Postman Mock 서버 실습

오늘 실습의 핵심은 Mock 서버였다.

  • Postman Collection 생성
  • 각 API 요청에 Example 응답 추가
  • Mock 서버 생성
  • baseURL 설정
  • 실제 요청 테스트

Mock 서버를 통해
백엔드 서버 없이도 API 흐름을 검증할 수 있다는 점이 인상 깊었다.

특히,

  • POST 요청 시 201 Created + id 포함 응답
  • GET 요청 시 배열 형태 응답
  • DELETE 요청 시 204 No Content 응답

이 각각의 상태 코드가
의미를 가진 약속이라는 게 실습을 통해 체감됐다.


프론트엔드까지 이어지는 흐름

오늘은 프론트엔드를 직접 구현하지는 않았지만,
v0를 이용해 Mock 서버와 통신하는 프론트엔드를 만들 준비까지 진행했다.

여기서 중요한 포인트는 이거였다.

  • 프론트엔드는 API 명세서만 믿고 개발한다
  • 실제 서버가 없어도 Mock 서버로 충분히 테스트 가능하다
  • API가 잘 설계되어 있으면, 프론트/백엔드는 독립적으로 움직일 수 있다

오늘 헷갈렸던 점

솔직히 쉽지는 않았다.

  • 왜 404가 나는지
  • Example을 추가하지 않으면 왜 응답이 안 오는지
  • Mock 서버가 “상태를 기억하지 않는다”는 점

이런 부분에서 계속 멈칫했다.

하지만 그 덕분에
Mock 서버는 진짜 서버가 아니다라는 차이를
몸으로 이해하게 됐다.


✍️ 오늘의 깨달음

  • API는 코드 이전에 약속이다
  • Mock 서버는 협업을 위한 도구다
  • 웹 프로젝트는 기능보다 흐름이 먼저다
  • 프론트엔드, 백엔드, DB는
    각자 역할이 다르고 책임도 다르다

📌 내일 할 것

  • v0로 생성한 프론트엔드 실행
  • Mock 서버와 실제 연동 확인
  • 요청 -> 응답 흐름을 한 번 더 정리
  • 오늘 헷갈렸던 부분 다시 복습

오늘은 부트캠프에 들어와서
처음으로 과제를 해본 날이었다.

전공자이고,
웹 페이지도 만들어본 경험이 있어서
처음엔 그래도 수월하지 않을까?라는 생각을 했다.

하지만 막상 해보니
여러 부분에서 생각보다 자주 멈칫했다.

개념은 알고 있었지만,
직접 처음부터 끝까지 연결해보는 경험은 부족했구나라는 생각이 들었다.

저녁쯤 튜터님이 직접 와서
진행 상황을 물어보고 같이 얘기해준 것도 좋았다.

단순히 과제를 던져주는 게 아니라
과정 전체를 관리해준다는 느낌이 들어서
조금은 마음이 놓였다.

아직 2일차인데도
9시부터 9시까지 12시간 가까이 집중하다 보니
체력적으로 확실히 쉽지 않았다.
솔직히 말하면 계속 앉아있으니까 허리가 너무 아프다.

그래도 첫 과제를 해봤다는 것만으로도
오늘은 충분히 의미 있는 하루였다고 생각한다.

내일은 오늘 만든 흐름을 다시 한 번 정리하면서
과제 보완하고, 강의 복습해볼 계획이다.

0개의 댓글