JSON / JSON-Server

출처 : https://www.aluracursos.com/blog/simulando-una-api-rest-con-json-server

MDN JSON 공식문서 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/JSON

JSON - JavaScript | MDN

 

JSON이란?

JSON(JavaScript Object Notation)은 JSON은 객체, 배열, 숫자, 문자열, 불리언과 null을 직렬화하기 위한 구문이며, Javascript의 객체 문법을 따르는 문자 기반의 데이터 포맷을 따른다.

JSON 객체는 JSON 데이터를 분석하거나, 값으로 변환하여 실제 사용이 가능하도록 객체 형식으로 표현한 형식을 말한다.

객체의 각 (키 : 값) 쌍은 JS와 같이 속성으로 부른다.

 

JSON 형식의 규칙은 다음과 같다.

객체와 배열 : 속성의 키 : 값은 ""(큰따옴표)로 표시된 문자열이어야 하며, 후행쉼표는 허용하지 않는다.
숫자 : 선행 0은 허용하지 않는다. (ex. 09는 안됨, 9로 작성해야 한다.)

 

메서드 JSON.parse() , JSON.stringify()

// MDN 예시.
const json = '{"result":true, "count":42}';
const obj = JSON.parse(json);

console.log(obj.count);
// Expected output: 42

console.log(obj.result);
// Expected output: true

JSON.parse() 메서드는 문자열의 구문을 분석해서, JS값이나 객체를 생성해서 반환한다.

즉, JSON.parse()는 JSON 형식으로 이뤄진 데이터를 "JS에서 사용가능한 객체나 값으로 변환해주는 메서드이다."

 

// MDN 예시.

console.log(JSON.stringify({ x: 5, y: 6 }));
// Expected output: "{"x":5,"y":6}"

console.log(JSON.stringify([new Number(3), new String('false'), new Boolean(false)]));
// Expected output: "[3,"false",false]"

console.log(JSON.stringify({ x: [10, undefined, function(){}, Symbol('')] }));
// Expected output: "{"x":[10,null,null,null]}"

console.log(JSON.stringify(new Date(2006, 0, 2, 15, 4, 5)));
// Expected output: ""2006-01-02T15:04:05.000Z""

JSON.stringify() 메서드는 JS의 값이나 객체를 JSON 형식으로 변환하는 메서드이다.

JSON은 서버와의 통신, 데이터베이스에 저장 등, 나의 자바스크립트 프로젝트 외부로 해당 데이터를 전송하거나 받을 때 자주 활용된다.

 

JSON-Server

NPM Getting Start 문서 : https://www.npmjs.com/package/json-server#getting-started

json-server

JSON-Server는 json 파일을 활용하여 가상의 서버를 만들고, 간단한 시뮬레이션(ex. 게시글의 CRUD)을 할 수 있는 라이브러리이다.

사용 방법은 3단계로 나뉜다.

// 사실 위의 공식문서에 있는 순서 그대로 하면 된다.!
1. JSON-server 설치
2. db.json (json 데이터 파일 명은 원하는대로!) 생성
3. json-server의 시작

 

1. JSON-server 설치

# 전역 설치
npm install -g json-server

# 특정 파일에만 설치하고 싶을 때,
cd project-server-test
npm install json-server

2. db.json 생성

// 공식문서 예시
{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

3. 서버 실행

# 프로젝트의 기본 설정 서버 port로 실행된다.
json-server --watch db.json

# 원하는 포트를 지정해서 서버를 실행시킬 수 있다.
json-server --watch db.json port 3001

# 터미널의 예시

# POSTMAN TEST