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

과제 소개

 

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

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

 

과제 목차

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

과제 목표

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

---

3. API 검증하기

 

1️⃣ 목적

• 설계한 API 명세서가 실제로 동작하도록, Postman의 Mock 서버 기능을 이용해 가짜 백엔드를 구축하고 검증합니다.

2️⃣ 내용

1. Postman에 새 Collections을 생성합니다.
2. [과제PART.2]에서 설계한 API 명세서를 바탕으로, 맛집 API의 Request와 Example를 설정합니다.
3. Postman에서 새 Mock 서버를 생성합니다.
4. 발급된 Mock URL을 사용하여 Postman으로 Request을 직접 호출하고, Example대로 응답하는 검증합니다.
5. 작성한 Collections를 Export하여 첨부합니다.

---

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

 

과제 내용 1

Postman 에 새 Collection을 생성합니다.

 

1. 포스트맨에 들어가서 COLLECTIONS 옆에 있는 + 버튼을 클릭하시면 
새로운 Collection을 생성하실수 있습니다.

2. 새로운 콜렉션이 생성이 되면 New Collection 부분에 새로운 제목을 입력해 주시면 됩니다.

(저는 이미 과제를 완료를 하고 TIL을 작성하는거라 위에 명동교자 과제가 생성이 되있는점 양해부탁드립니다.)

 

과제 내용 2

[과제 챕터2]에서 설계한 API 명세서를 바탕으로,
맛집 API의 Request와 Example를 설정합니다.

 

1. 좌측에 Add request 를 눌러서 새로운 request를 생성해 줍니다.

 

2. PART.2 에 작성했던 내용을 바탕으로 등록(POST),조회(GET),삭제(DELETE) 를 올바르게 생성해 줍니다.

(part.2 에 대한 내용은 게시글 상단의 링크를 통하여 확인 가능합니다~!)

 

과제 내용 3

Postman 에서 새 Mock 서버를 생성합니다.

 

1.처음에 collection 을 생성했을때와 마찬가지로 + 버튼을 누른후 Mock Server 을 클릭해주시면 됩니다.

2. Mock 서버 생성 창이 나타나는데, 여기서 좀전에 새로 만든 "명동교자맛집과제" 를 선택해줍니다.

(저는 이미 과제를 완료를 하고 TIL을 작성하는거라 위에 명동교자 과제가 생성이 되있는점 양해부탁드립니다.)

3.Mock 서버의 이름을 정하고, (저는 헷갈리지않게 기존에 생성한 collection과 동일한 이름으로 생성을 합니다.)

 하단의 Save the mock server URL as an new environment variable 을 체크해주는데

이유가 궁금하신 분들은 하단의 더보기를 눌러주세요~

목 서버(Mock Server)를 만들 때 그 옵션을 체크하는 이유는, 쉽게 말해

"포스트맨아, 가짜 서버 주소 복잡하니까 네가 알아서 환경 변수에 자동으로 등록해 줘!"

라고 부탁하는 편리한 기능이기 때문입니다.

체크를 했을 때와 안 했을 때 어떤 차이가 있는지 직관적으로 비교해 드릴게요.

❌ 체크를 안 하면 (노가다 모드)

1. 목 서버 생성이 완료된 후 화면에 뜨는 복잡한 가짜 주소(https://3a1b...mock.pstmn.io)를 직접 마우스로 드래그해서 복사해야 합니다.
2. 우측 상단 Environments 메뉴로 넘어가서 내가 직접 환경 설정을 만듭니다.
3. 변수 이름에 baseURL이라고 적고, 복사한 주소를 직접 붙여넣기 한 뒤 저장해야 합니다.

⭕ 체크를 하면 (자동화 모드)

• 포스트맨이 목 서버를 개설하자마자 자동으로 새로운 환경 변수 세트(Environment)를 만들어 줍니다..
• 그리고 그 안에 url 이라는 이름의 변수로 가짜 서버 주소를 이미 쏙 넣어둔 상태로 세팅을 끝내버립니다. 
  우리는 그 변수를 입력만 하면 되는 굉장히 간단한 작업을 진행해볼수 있습니다.

4. Mock 서버가 생성이 되면, 우측상단의 복사 버튼을 클릭하여 Mock 서버 URl을 복사해줍니다.

과제 내용 4

발급된 Mock URL을 사용하여 Postman으로 Request을 
직접 호출하고, Example대로 응답하는 검증합니다.

 

1. 다시 콜렉션으로 돌아와, 생성한 "명동교자 맛집 과제" variables 를 클릭해 URL 이라는 이름의 변수를 넣어줍니다.

2. Variable 에는 사용할 변수 이름을, Value 에는 방금 복사해둔 Mock 서버의 주소를 붙혀넣어줍니다.

3. New Request 에 들어가 Method 를 각 항목에 맞게 변경해줍니다. 
등록(POST),전체조회(GET),삭제(DELETE) 라는 매서드를 사용합니다.

4.각 생성된 Request 우측에 점3 개를 클릭하신후 add example 을 눌러 생성을 해줍니다.

5. 저는 헷갈리지 않게  각 Request 와 동일하게 이름을 작성해주었으며,
뒤에 ex를 붙혀 혹시 모를 충돌을 방지하였습니다.

6. 각 ex에 part.2 에 적어둔 API 를 입력해주면 되는데,

여기서 주의할점은
raw 가 잘 설정 되어있는지, 언어는 JSON으로 잡혀있는지 또 하단은 BODY칸에 {}JSON 언어로
잘 입력이 될수있게 설정이 되어있는지 체크를 하셔야 합니다. 

입력된 JSON 코드는 Part.2 API 과제내용 3을 참고하세요~▶https://jungei0709.tistory.com/13

7. example 이 아닌 각 Request 로 돌아와 Send 버튼을 눌러주시면
작성한 API대로 정상 출력이 되는것을 확인 하실 수 있습니다.

 

 

과제 내용 5

작성한 Collections를 Export하여 첨부합니다.

명동교자 과제.postman_collection.json

0.01MB

 

 

로 과제를 마무리 하겠습니다 😊

---

💡비고: 저는 처음 Postmen 을 다루면서 정상적으로 코드도 입력하고,
경로도 제대로 설정을 했는데 하단의 이미지처럼 오류가 뜨는 경우가 있더라구요.
처음에 뭐가 문제일까 싶어서 계속해서 분석을 해봣으나,
전혀 문제가 없기에 버그인가 싶었습니다...
그러나 예상 밖에 정말 어이없는 이유가 있었는데요.
바로 Postmen은 인텔리제이처럼 자동 저장 기능이 없기에
Request 나 example 에서
좌측 상단에 보이는 Save 버튼을 눌러줘야 비로소 데이터가 입력이 되더라구요..ㅋㅋ....

생각보다 너무 쉬운 이유죠..?
여러분도 혹시나 저 처럼 별거아닌 이유로 소중한 시간을 할애하시지않게
포스트맨을 사용하실땐 입력이 다 된다면 Save 버튼을 꼭 자주 눌러주시는 습관을 들이시는게 좋을것 같았습니다.