📌 JSON이란?
JSON(JavaScript Object Notation)이란? 자바스크립트 객체 문법을 토대로 둔 문자 기반의 데이터 교환 형식이다.
1) 구조
일반적인 JSON 구조는 자바스크립트 객체 리터럴 작성법을 따른다. 자바스크립트의 원시 자료형인 문자열, 숫자, 불리언을 가질 수 있고 중첩된 계층 구조 또한 가질 수 있다.
2) 메소드
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""
-parse() : 네트워크 통신의 결과를 통해 받아온 JSON 문자열을 프로그램 내부에서 사용하기 위해 자바스크립트 객체로 변환
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
3) JSON 기반 DB 통신 연습하기
import "./App.css";
import { useEffect, useState } from "react";
function App() {
const [data, setData] = useState([]);
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/posts")
.then((response) => {
console.log();
console.log("response.json()", response);
return response.json();
})
.then((json) => {
console.log("json", json);
setData([...json]);
});
}, []);
return (
<div>
{data.map((item) => {
return (
<div
style={{
border: "1px solid black",
margin: "3px",
}}
key={item.id}
>
<ul>
<li>userId : {item.userId}</li>
<li>id : {item.id}</li>
<li>title : {item.title}</li>
<li>body : {item.body}</li>
</ul>
</div>
);
})}
</div>
);
}
export default App;
📌 json-server란?
1) json-server란?
아주 간단한 DB와 API 서버를 생성해주는 패키지이다. 우리가 json-server를 사용하는 이유는 Backend에서 실제 DB와 API Server가 구축될 때까지 Frontend 개발에 임시적으로 사용할 mock data를 생성하기 위함이다.
2) json-server 설치하기
yarn add json-server
3) db.json 생성
{
"posts": [
{ "id": 1, "title": "json-server", "author": "typicode" }
],
"comments": [
{ "id": 1, "body": "some comment", "postId": 1 }
],
"profile": { "name": "typicode" }
}
4) json-server 시작하기
react 서버와 겹치지 않도록 포트를 4000으로 설정하여 시작한다.
json-server --watch db.json --port 4000
5) json-server 접근하기
http://localhost:3000/posts
http://localhost:3000/comments
http://localhost:3000/profile
📌 npm 공식문서