목차
- Json 서버란 무엇일까?
- 왜 Json 서버를 사용할까?
- 어떻게 사용하는 걸까?
1. Json 서버란 무엇일까?
우선 npm 사이트에서 json server란 무엇인지 찾아보았다.
Get a full fake REST API with zero coding in less than 30 seconds (seriously)
번역 : 30초 이내에 제로 코딩으로 완전한 가짜 REST API를 얻습니다 (진지하게)
RESTful API라... 아직 토끼굴에 들어가기엔 우리는 이르다.
조금은 얕은 수준에서 이해가 필요하다.
RESTful API라는 개념을 거둬내고 더 쉽게 이야기하자면 json-server란 이른바 '가짜 서버'이다.
실제 서버 환경이 구축되지 않은 상황에서도 서버가 구현된 것 마냥 코드를 실행해보고 테스트 해볼 수 있는 환경을 지원한다.
2. 왜 JSON 서버를 사용할까?
그렇다면 왜 이 가짜 서버인 'json server'를 사용하고, 언제 사용하는 것일까?
프론트엔드 개발자가 json-server를 사용하는 이유는 크게 2가지이다.
- 코드 연습이나 서버없이 데모를 만들어 테스트하고자 할 때.
- 백엔드 쪽 api 개발을 마냥 기다리지 않고 미리 앞단을 개발할 때.
Json 서버는 간단하면서도 커스터마이징이 쉽고, Javascript, Python 등 다양한 언어 및 프레임워크와 호환되기 때문에 널리 사용되고 있다.
3. 어떻게 사용하는 걸까? (feat. json-server API document)
자, 그럼 이제 json server 사용을 시작해보자.
먼저 설치 및 사용을 희망하는 디렉토리로 이동한 후, 아래 명령어를 입력한다.
$ npm install -g json-server
CLI 환경에서 해당 메시지를 입력하면 json server의 설치가 완료된다.
다음은 서버에서 불러들이고자 아래와 같은 json 파일을 준비했다.
{
"user" : [
{"id": 1, "name":"Aaron", "position" : "GK"},
{"id": 2, "name":"Ben", "position" : "Defender"}
],
"products" : [
{"id" : 1, "code" : 10001, "register": true}
]
}위 json 파일의 이름을 'data.json'이라 저장했다. 이 파일을 json server를 통해 열람해보자.
$ json-server --watch data.json
CLI에 위 명령어를 입력 후, 아래와 같이 Resource별 주소와 Home 주소가 뜬다면 서버 오픈에 성공한 것이다. (만일, 갖고 있는 데이터 파일이 'data.json'이 아니라면 해당 파일 이름을 대신 넣어야 한다.)
실제로 데이터가 잘 보여지는지 확인해보기 위해 user resource의 주소를 복사하여 Chrome 브라우저로 열어보자.
user에 해당하는 데이터들이 잘 보이는 것을 확인할 수 있다. 'user/1'과 같이 슬래시 + id 넘버를 적어주면 해당 데이터만 열람이 가능하다.
json server는 CLI에서 ctrl + c 를 통해 종료할 수 있다. json 데이터는 json server가 열려있는 동안만 해당 url에서 열람 가능한 점도 알아두자.
번외. fetch 함수로 Json data 실습하기
아래는 우리가 만든 '가짜 서버'의 url을 이 fetch 함수의 첫번째 인자로 넣어 json data를 활용한 실습코드다.
fetch 함수는 첫번째 인자로 url, 두 번째 옵션 객체를 받고 promise 객체를 반환한다. 프로젝트를 위해 fetch함수와 json server를 활용하는 사례를 찾고 있다면 아래 예시를 참고해주시기 바란다.
fetch('http://localhost:3000/user', {
method:'GET', // GET은 사실 default 메소드라 옵션을 안적어도 되는 경우가 많습니다.
headers: {
"Content-Type" : "application/json",
}
})
.then((res) => res.json)
.then((data) => console.log(data));참고링크
조금이라도 도움되셨다면 좋아요 혹은 댓글 부탁드립니다 :)
