[javascript] JSON Server 이용한 API 다루기 연습(1) - 시작은 JSON Server 설치

HTTP 요청(request)  이후에 응답(reponse)을 받기 위해서는 서버가 필요한데, 프론트엔드가 서버 구축과 관련한 지식이 전무한 상태에서 실제 서버를 개설하고, 데이터베이스를 구축하는 것은 까다롭다(물론 어디 까지나 초보자의 시각에서나 말이다.).

 

여기서 JSON Server 는 가짜 즉, 가상 서버를 구축할 수 있는 툴로서 사용법이 매우 간단해서 이번 기회에 다시 활용해보기로 했다(요즘에 3D 웹 사이트 구현에 관심이 생겨서 이런 기초적이고 기본적인 부분에 관심을 너무 안 준 것 같다.. 나태해 지지 말자). 

 

언제나 시작은 npm 으로

아직도 npm  이라는 단어는 어색하다(그 만큼 실력 부족이라는 말이겠지) 따라서 이 용어에 대해서 잠깐 정리하고 넘어가려 한다. npm 은 node package manager 의 약자로서 자바스크립트(혹은 노드) 패키지 매니저다.  이는 자바스크립트 런타임 환경인 node.js 실행환경에서 사용할 수 있도록 여러 능력 있는 개발자 선생님들이 만들어서 공유한 다양한 모듈들을 패키지화해서 모아둔 대형 저장소이며(집단지성의 결실), 이러한 패키지를 설치하고 관리할 수 있는 CLI 즉, Command Line Interface 를 제공하는 역할을 하는 만화 캐릭터로 따지면 도라에몽 같은 존재이다. 즉, 없는게 없다.  또한 개발자가 직접 npm 에 패키지를 만들어서 올릴 수 있다고 하니. 기회가 된다면 획기적인 아이디어를 코드로 만들어서 배포해 보고 싶다는 생각이 든다. 

 

암튼 서론은 끝났고, 이제 진짜 JSON Server 를 설치해보자.

 

참고로 자세한 가상서버 관련 내용은 npm json-server 를 찾으면 된다. ( 갠적으로 요즘엔 번역이 생각보다 잘 되기 때문에, 적극 활용하면 좋겠다는 생각이 든다.)

json-server

 

1) 서버를 구축하고자 하는 폴더 내(ex. cd json-server)의  터미널에 다음과 같은 명령어를 입력하기

json-server> npm install json-server --save-dev //json 서버를 개발환경 용도로 설치

 

2) 서버를 구축한 폴더에 데이터베이스를 대신할 파일을 db.json 생성 후  JSON 형태로 작성하기

* 참고로 아래 데이터는 가짜 데이터를 만들어주는 사이트에서 만든 예시 자료 이다.  또한 이번 공부에 쓰일 자료이다.

{
"user":[
  {
    "id": 1,
    "first_name": "Judah",
    "last_name": "Crigin",
    "gender": "Male",
    "ip_address": "218.94.237.191"
  },
  {
    "id": 2,
    "first_name": "Ashlee",
    "last_name": "Davidwitz",
    "gender": "Non-binary",
    "ip_address": "8.51.134.45"
  },
  {
    "id": 3,
    "first_name": "Kalle",
    "last_name": "Robyns",
    "gender": "Male",
    "ip_address": "120.121.81.215"
  },
  {
    "id": 4,
    "first_name": "Dionysus",
    "last_name": "Friatt",
    "gender": "Male",
    "ip_address": "150.211.191.233"
  },
  {
    "id": 5,
    "first_name": "Brandais",
    "last_name": "Gaudon",
    "gender": "Female",
    "ip_address": "207.140.178.183"
  },
  {
    "id": 6,
    "first_name": "Olvan",
    "last_name": "Macklin",
    "gender": "Male",
    "ip_address": "216.129.124.150"
  },
  {
    "id": 7,
    "first_name": "Milicent",
    "last_name": "Havis",
    "gender": "Genderfluid",
    "ip_address": "50.87.33.145"
  },
  {
    "id": 8,
    "first_name": "Hyacinth",
    "last_name": "Dabling",
    "gender": "Polygender",
    "ip_address": "181.214.131.194"
  },
  {
    "id": 9,
    "first_name": "Allie",
    "last_name": "Allam",
    "gender": "Male",
    "ip_address": "79.207.4.146"
  },
  {
    "id": 10,
    "first_name": "Skye",
    "last_name": "O'Gorman",
    "gender": "Male",
    "ip_address": "236.222.54.53"
  },
  {
    "id": 11,
    "first_name": "Oliviero",
    "last_name": "Berriman",
    "gender": "Male",
    "ip_address": "59.130.169.135"
  },
  {
    "id": 12,
    "first_name": "Adela",
    "last_name": "Landal",
    "gender": "Genderqueer",
    "ip_address": "169.135.252.122"
  },
  {
    "id": 13,
    "first_name": "Reed",
    "last_name": "Moult",
    "gender": "Male",
    "ip_address": "123.222.185.19"
  },
  {
    "id": 14,
    "first_name": "Franni",
    "last_name": "Bartaletti",
    "gender": "Female",
    "ip_address": "199.30.172.216"
  },
  {
    "id": 15,
    "first_name": "Hillard",
    "last_name": "Melia",
    "gender": "Male",
    "ip_address": "127.133.220.85"
  },
  {
    "id": 16,
    "first_name": "Beilul",
    "last_name": "Heyfield",
    "gender": "Female",
    "ip_address": "183.179.151.31"
  },
  {
    "id": 17,
    "first_name": "Gusti",
    "last_name": "Cardenosa",
    "gender": "Female",
    "ip_address": "196.131.66.219"
  },
  {
    "id": 18,
    "first_name": "Tamma",
    "last_name": "Hills",
    "gender": "Non-binary",
    "ip_address": "250.175.216.197"
  },
  {
    "id": 19,
    "first_name": "Laurianne",
    "last_name": "Delicate",
    "gender": "Female",
    "ip_address": "101.200.135.151"
  },
  {
    "id": 20,
    "first_name": "Humbert",
    "last_name": "Washtell",
    "gender": "Male",
    "ip_address": "212.208.122.106"
  },
  {
    "id": 21,
    "first_name": "Gerik",
    "last_name": "Dumblton",
    "gender": "Male",
    "ip_address": "24.58.242.122"
  },
  {
    "id": 22,
    "first_name": "Rois",
    "last_name": "Blazeby",
    "gender": "Female",
    "ip_address": "166.123.207.133"
  },
  {
    "id": 23,
    "first_name": "Christyna",
    "last_name": "Grisenthwaite",
    "gender": "Female",
    "ip_address": "34.130.21.195"
  },
  {
    "id": 24,
    "first_name": "Julie",
    "last_name": "Jarman",
    "gender": "Male",
    "ip_address": "43.172.25.75"
  },
  {
    "id": 25,
    "first_name": "Bord",
    "last_name": "O'Flannery",
    "gender": "Male",
    "ip_address": "242.234.249.56"
  },
  {
    "id": 26,
    "first_name": "Jasmine",
    "last_name": "Munehay",
    "gender": "Female",
    "ip_address": "189.43.136.139"
  },
  {
    "id": 27,
    "first_name": "Son",
    "last_name": "Hasely",
    "gender": "Male",
    "ip_address": "114.181.221.234"
  },
  {
    "id": 28,
    "first_name": "Bald",
    "last_name": "Castellino",
    "gender": "Male",
    "ip_address": "163.202.107.199"
  },
  {
    "id": 29,
    "first_name": "Kaleb",
    "last_name": "Bloxham",
    "gender": "Male",
    "ip_address": "54.12.37.233"
  },
  {
    "id": 30,
    "first_name": "Cece",
    "last_name": "Yeudall",
    "gender": "Male",
    "ip_address": "172.232.81.160"
  }
]
}

 

3) JSON 서버 실행

서버를 오픈 하는 명령어는 두 가지이다. 한 가지는 기본값으로 설정한 포트 번호로 서버를 여는 것이고, 다른 하나는 사용자가 직접 포트 번호를 지정하는 방식이다. 이를 나눠서 표시하면 다음과 같고, 입력 후 실행하면 된다.

$ json-server --watch db.json  //기본 포트는 3000번으로 설정되어 서버가 열린다.

$ json-server --watch db.json --port 3004 //사용자가 정의한 3004 포트로 서버가 열린다.

* 참고로 --watch 는 db.json 이 변동 되는 경우 즉시 변동 사항을 탐지하는 추적 역할을 하는 명령어 이다. 

 

만약에 서버가 열리지 않는다면 다음 명령어로 재설치 해보자.

npm install -g json-server

// 그 후 위의 서버 실행 명령어를 입력하면 될 듯

 

---

서버 실행이 성공되면 보이는 이모티콘   \{^_^}/

 

---

 

<다음으로 이어지는 부분(미완성)>

[javascript] JSON Server 이용한 API 다루기 연습(2) - fetch로 데이터를 가져오자(GET)