-
초보자를 위한 가짜 목서버 or 임시api 사용법(포스트맨 최신 버젼)_1Study/JavaScript 2024. 4. 25. 16:11반응형
프론트쪽 개발 의뢰가 들어와 작업을 하는중 아직 백단은 개발이 안되있고
프론트단부터 개발을 먼저 개발해 달라는 요청을 받은 초보자라면 난감해 할텐데
이때 유용하게 사용하는 편리한 도구가 Postman !!!!
Postman 의 사용방법을 소개해보고자 함.
최근에 postman UI가 바꼈는지 내가 찾아본글에서는 최신 UI로 설명한 글이 없어 글을 적어봄.
목표:가짜 서버 또는 임시 api를 만들어 json형태로 데이터를 받아서 화면에 출력
1.아래 링크에 접속한다.
https://www.postman.com/2.아이디가 없다면 회원가입을 하고 있다면 로그인 하면 아래와 같은 화면이 나옴.
좌측상단에 Workspaces > Create Workspace 순서대로 Workspaces 만드는 화면이 나옴.
프로젝트별로 Workspaces를 만들면 될거 같음.3. Create Workspace 버튼을 누르면 아래와 같은 화면이 뜨고 Blank Workspace > 좌측 하단의 next 버튼을 클릭
4. Name 적는 칸에는 작업하는 프로젝트의 이름 또는 적고싶은 이름 적으면 됨.
그밑은 workspace에 누구까지 접근 범위를 허용할지에 대해서 설정 하는 부분인데,
기본은 'Only me' 로 나만 접근할수 있으며, 팀원이 공유 하고 싶으면 'Everyone from your team'을 누르면
팀과 공유가 가능하다고 하다고함.
마지막으로 'Create' 버튼 누르면 됨.
5. 아래 화면은 내가 생성한 workspace 화면.
근데 가짜서버를 만들어야 하는데 무얼 눌러야 할지 모르겠다!!!
6.가짜서버를 만드는 버튼이 숨겨져 있음. 그래서 끄집어 내야함.
아래 화면의 빨간색펜으로 표시한 부분을 먼저 누르면 setting 창이 나오는데
파란색펜으로 표시한 'Mock servers' 버튼을 눌러 활성화 시키면
왼쪽 사이드바에 가짜서버 만드는 버튼이 등장함! 등장한 'Mock servers' 버튼 클릭!
7. 'Mock servers' > 파란펜으로 표시한 '+' 버튼을 누르면 아래와 같은 화면이 나오고
순서대로 Request Method, Request URL 를 순서대로 선택 및 적어서 넣으면 됨.
Request URL은 말그대로 내가 요청하는 URL이름을 적으면 됨. 나는 임의로 이름을 지어서 넣음.
우측 하단에 'Next' 버튼 누름
8. 'Mock Server Name' 에 말그대로 목서버 이름 적음됨. 본인이 적고싶은 이름 적음됨.
그담에 우측 하단의 'Create Mock Server' 버튼을 클릭하면 목서버 완성!
9.위에서 만든 목서버에 구체적으로 URL을 설정하고 api를 통해 보낼 데이터를 채워 넣어야되는 과정이 필요함.
그래서 9번 부터는 본격적인 api를 만드는 방법임.
왼쪽사이드바 'Collections' 버튼을 누르고 파란펜으로 표시한 아래화살표 버튼을 누르면
아까 목서버만들때 7번에서 'Request URL'에 적은 URL이름이 나오고 ' ... ' 버튼을 누르면 토글창이 나오면서
파란펜으로 표시한 'Add example' 버튼을 누르면 data를 채울수 있는 화면이 나옴.
10. 'Add example' 버튼을 누르면 아래와 같이 Default 와 testJson 이 보이면 파란펜으로 표기한 testJson을
누르고 하단에 Body 부분에 json 형식으로 내용을 채우고 파란펜으로 표시한부분의 형식을 'JSON' 으로 바꿈.
그러면 일단 api를 통해 보낼 데이터내용은 채움.
( 11번으로 넘어가기전에 체크해야 될 부분이 Default 와 testJson 의 URL이 같은지 확인해 주고
동일하다면 Default를 삭제 하던지 아니면 URL을 testJson과 다르게 변경해야함)
11. 데이터를 보내기 위해서는 목서버를 run을 시켜야 되는데
testMockserver 의 ' ... ' 버튼을 누르면 토글창이 펼쳐지면서 ' Run collection ' 누름
12.우측 하단의 주황색 버튼인 'Run testMockserver ' 누름
13. testMockserver를 run이 활성화 되고 파란펜으로 줄친 url이 목서버로 데이터를 받아올때 적어놓을 url 주소이므로
적어두기!
14. 마지막으로 내가 만든 목서버에서 데이터를 잘받아 오는지 테스트 하기 위해서는
testMockserver > testJson 눌러서 아래페이지가 보이면 우측 상단에 파란색 'Send' 버튼을 누르면
파란색펜으로 동그라미친 하단 부분에 아까 적었던 데이터가 출력 되면 가짜목서버와 가짜api는 완성됨!
응용편으로 가짜 api로부터 데이터를 받아 웹페이지에서 출력하는 방법은
아래 링크 클릭 ㄱㄱ
https://cbn1218.tistory.com/59
반응형'Study > JavaScript' 카테고리의 다른 글
초보자도 만들 수 있는 파일첨부 및 이미지 미리보기 기능 (0) 2025.01.09 초보자를 위한 가짜 목서버 or 임시api 사용법(포스트맨 최신 버젼)_2 (0) 2024.04.29 초보자도 만들 수 있는 자바스크립트로 그림판 만들기(텍스트 추가하기 기능) (0) 2024.03.14 초보자를 위한 자바스크립트를 이용하여 간단하게 얼굴 인식하기( openCV.js 활용)_2 (0) 2024.03.08 초보자를 위한 자바스크립트를 이용하여 간단하게 얼굴 인식하기( openCV.js 활용)_1 (0) 2024.03.08