GET method 호출하기
mock 서버에서 GET, POST, DELETE, PUT, PATCH, OPTIONS
와 같은 것들을 호출을 해보도록 하겠다.
아래와 같이 GET 메소드
를 호출을 해보려고 한다.
폴더 구조를 하나 만든다.
mocks/ 내부에 폴더를 나눈다.
우선 테스트로 api/menus
폴더를 만든다.
아래에 이미지를 참고한다.
이제 mocks/api/menus/GET.mock
파일을 만들고, 메뉴를 반환하는 데이터를 작성을 한다.
폴더 구조가 호출 url이 되며 mocks를 제외하고 호출을 하면 된다.
//mocks/api/menus/GET.mock
HTTP/1.1 200 OK
Content-Type: application/json; charset=utf-8
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, DELETE, PUT, PATCH, OPTIONS, HEAD
Access-Control-Max-Age: 3600
Access-Control-Allow-Credentials: true
[
{
"id": 0,
"title": "home",
"link": "/home",
},
{
"id": 1,
"title": "about",
"link": "/about",
},
{
"id": 2,
"title": "notion",
"link": "/notion",
},
{
"id": 3,
"title": "tag",
"link": "/tag",
},
{
"id": 4,
"title": "guest book",
"link": "/guestbook",
},
]
이렇게 작성을 하고 들어가면 크롬 브라우저로 url
을 호출 해보면된다.
http://localhost:10001/apis/menus
하지만 Not Mocked
이런식으로든 혹은 아래와 같이 에러가 난다.
문제점 해결 방법.
첫번째로는 옵션값과 데이터는 한칸의 공백이 있어야한다.
혹은 HTTP/1.1 200 OK
를 공식페이지를 보고서 설정 값을 고쳐본다.
url를 호출시 서버가 그냥 꺼진다면 HTTP/1.1 200 OK
부분을 확인하는게 좋다.
//mocks/api/menus/GET.mock
HTTP/1.1 200 OK
Content-Type: application/json; charset=utf-8
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, DELETE, PUT, PATCH, OPTIONS, HEAD
Access-Control-Max-Age: 3600
Access-Control-Allow-Credentials: true
//[빈라인 주석을 지우시오]
[
{
"id": 0,
"title": "home",
"link": "/home",
},
{
"id": 1,
"title": "about",
"link": "/about",
},
{
"id": 2,
"title": "notion",
"link": "/notion",
},
{
"id": 3,
"title": "tag",
"link": "/tag",
},
{
"id": 4,
"title": "guest book",
"link": "/guestbook",
},
]
그럼 정상적으로 아래에 GET 결과가 나오는 것을 확인 할 수 있다.
다음으로 post를 만들어보도록 하겠다.
GITHUB주소 : github.com/xersuy/mockserver_api
xersuy/mockserver_api
mockserver_api. Contribute to xersuy/mockserver_api development by creating an account on GitHub.
github.com
mockserver 를 이용해 mock서버 만들기[4]
POST method 호출하기 GITHUB주소 : github.com/xersuy/custom_react 앞 내 문서를 읽어보면 알겠지만 url 은 폴더 구조이며, 파일명이 호출을 값이라고 생각을 하면된다. post 로 데이터를 보내서 맞는지 혹은 서
xxxxersuy.com
'notion > npm package' 카테고리의 다른 글
react styled-components 와 react-nomalize 적용하는 법 (0) | 2021.02.22 |
---|---|
mockserver 를 이용해 mock서버 만들기[4] (0) | 2021.02.06 |
mockserver 를 이용해 mock서버 만들기[3] (0) | 2021.02.04 |
mockserver 를 이용해 mock서버 만들기[2] (0) | 2021.02.04 |
mockserver 를 이용해 mock서버 만들기[1] (1) | 2021.02.02 |
CRA[typescript react] 에 post-css 적용[2] (0) | 2021.01.21 |
댓글0