Week #3 Json Server

JSON SERVER 사용하기

1. JSON SERVER를 사용하기 전에 우선 서버를 돌릴 디렉토리를 만들어준다.
2. npm init을 터미널에 입력하면 package.json 파일이 생성된다.
3. npm install -g json-server 명령어를 통해 json-server를 설치한다.
4. 디렉토리 내부에 db.json 파일을 생성한다. 이때 json 데이터에 id 값이 있어야한다고 한다. 그래서 임의로 설정해줬다.

//db.json
{
  "columns": [
    {
      "column": "해야할 일",
      "cards": [
        {
          "title": "Github 공부하기",
          "caption": ["add, commit, push"],
          "id": "1"
        },
        {
          "title": "블로그에 포스팅할 것",
          "caption": ["Github 공부내용", "모던자바스크립트 1장 공부내용"],
          "id": "2"
        }
      ]
    },
    {
      "column": "하고 있는 일",
      "cards": [
        {
          "title": "HTML/CSS 공부하기",
          "caption": ["input 태그 실습"],
          "id": "3"
        }
      ]
    },
    {
      "column": "완료한 일",
      "cards": []
    }
  ]
}

5. 디렉토리 내부에 server.js 파일을 생성한다.

//server.js

const jsonServer = require("json-server");
const server = jsonServer.create();
const path = require("path");
const router = jsonServer.router(path.join(__dirname, "db.json")); // ← 사용할 json 파일 지정
const middlewares = jsonServer.defaults();

// Set default middlewares (logger, static, cors and no-cache)
server.use(middlewares);

// To handle POST, PUT and PATCH you need to use a body-parser
// You can use the one used by JSON Server
server.use(jsonServer.bodyParser);

server.use(router);

let port = 8000; // ← port 설정 부분 (변경 가능)
server.listen(port, () => {
  console.log(`JSON Server is running, port(${port})`);
});

6. 터미널에 json-server --watch db.json --port 8000 를 입력한다. 이때 본인이 설정한 포트 번호를 8000 자리에 쓰면 된다.
   

7. 브라우저에 localhost:8000를 입력하면 아래와 같은 화면이 뜬다.
   

8. 6번 이미지의 터미널을 보면 Resources 부분에 url이 써져있는 것을 볼 수 있다. 브라우저에서 이 링크를 따라 가보면 아래와 같은 json 데이터를 볼 수 있다.
   

9. 이 때 각 칼럼에도 id를 부여해야한다. id를 부여한 후 url/id로 들어가면 아래와 같이 나온다.
   

POST, PUT 처리시 HTTP요청 헤더에 Content-Type: application/json 를 세팅해야 한다