Json Server ApI 만들어보기

Steve·2022년 2월 9일
0

다운로드 : npm install -g json-server
경로 : json-server --watch ./src/db/data.json --port 3001(포트번호는 때에 따라 알맞게작성. 3001번이 이미 있으면 다른 번호로 해야겠지)

REST API
c : post
r : get
u : put
d : delete

// http://localhost:3001/words?day=1
// http://localhost:3001/words/2
조작해보자

URI와 method만 보고도 어떤 명령인지 알아볼 수 있다.
Restful API : 클라이언트와 서버간의 통신 약속

URL이 URI의 Subset(부분집합)이다.

https://www.charles.com/index.html -> uri이면서 url
uri: 웹서버의 실제 파일 위치를 나타내는 주소

https://www.charles.com/index -> uri맞고 url아님
url: index라는 파일이 웬서버에 존재하지 않으므로 url은 아님.
허나 서버 내부에서 이를 처리해서 index.html을 가리키므로 uri

useEffect사용목적에 api호출도 있다.
렌더링 되고 최초 한번만 API호출-> 의존성배열 []넣어줌

What is JSON?

Javascript Object Notation

client와 server가 어떻게 통신해?
HTTP통신을 이용해서
(Hypertext Transfer Protocal)

AJAX(Asynchronous Javascript AND XML)
XHR(XMLHttpRequest)
XML왜이렇게 자꾸 등장하지 이게 뭔데?
HTML과 같은 Markup 언어중에 하나.
태그들을 이용해서 데이터를 나타냄

서버와 통신할때 아래것들로 할 수 있다.
1. fetch() API
2. XMLHttpRequest
하지만 XML로 통신하면 불필요한 태그가 너무 들어가서 file사이즈가 커지고 가독성도 떨어진다. 그 대신 JSON을 쓰고 있음
Javascript Object Notation
형식 : Object { key : value }

  • simplest data interchange format
  • lightweight text-based structrue
  • easy to read
  • key-value pairs
  • used for serialization and transmission of data between the network the network connection
  • independent programming language and platform

문자타입으로 만들어야 데이터를 주고 받을 수 있기 때문.
String형식으로 클라 서버간의 통신해줘야한다.
JSON.stringify, JSON.parse에 대해 알아보자

profile
Front-Dev

0개의 댓글