4. 쇼핑몰 웹사이트 만들기 (8)

Routes

 

어떻게 하면 내가 데이터를 이 json-server 로부터 요청을 하고 가져올 수 있을까?

(자막- 어떻게 하면 이 서버에서 데이터를 받을 수 있을까?)

 

(저번에 배운 restful route 규칙(restful api의 규칙)과 동일함 - 자막)

 

<restful api의 규칙들>

GET    /posts              #전체의 데이터를 가지고 오겠다.#
GET    /posts/:id(ex.1)    #id값(ex.1)을 가지고있는 데이터 하나만 보내준다.#
POST   /posts
PUT    /posts/:id
PATCH  /posts/:id
DELETE /posts/:id

 

 

이런게 어떻게 가능해요?

그게 json-server가 설계된(만들어진) 방식이다!

json-server는 restful api의 규칙을 따른다.

이미 그게 만들어져 있기 때문에 restful api의 규칙에 따라서 api 호출을 해주면 json-server가 알아서 데이터를 (뽑아) 보내줄 것이다. 

 

설치가 되었으면....

다음으로 이제  db.json을 만들어주고 그 안에 우리가 보여주고 싶은 데이터를 넣어주자.

 

<db.json 만들기 >

root에 만들어준다.

 

 

https://gist.github.com/legobitna/24cf11ae95d53c9cdcdc7b0040f059e9#file-db-json-L137

H&m shopping mall json file

<코알누가 실제 H&M 데이터를 참고해서 만드심>

 

[ ] array는 products라는 키값 안에 들어가 잇따

우리가 이따가 url을 호출해줄 때에는 /products라는 것을 끝에 end point로 넣어주면 된다.

[ ] array안에 데이터들이 넣어져있다.

 

 

이제 서버를 시작해보자!

json-server --watch db.json --port 5000

"json-server라는 것을 실행을 시킬때 아까 하나 만든 db.json을 (watch)지켜봐주세요"

우리가 json-server라는 것을 실행시키기 위해서는 어디서 동작하고 있는지를 포트 번호로 알려주어야 한다! 그래서 뒤에 포트 번호까지 지정해준다. 

지정을 해주지 않으면 무조건 3000번에서 시작을 하는데 (대부분) react 앱이랑 포트번호가 겹쳐지게 된다. 그래서 따로 지정해주어야 함.

 

리액트 앱이 돌아가고 있는 터미널...

이 터미널을 종룧면 리액트 앱이 죽는다.ㅜㅜ

이 터미널(npm start를 한 터미널)은 계속 살려놔야한다.!

 

터미널을 하나 새로 만들기!!

 

 

오른쪽 하단에 있는 바 화면

 

 

오류가 났다 ㅜㅜ (CommandNotFound(Exception))

 

<해결>

npx json-server --watch db.json --port 5000

 

<실행&결과>

http://localhost:5000/products

 

 

 

아까 넣어둔 데이터들이 array안에 다 들어가 있다!

이제 여기서 실험을 하나 해보자. json-server는 restful api 규칙을 따르는데 딱히 말하지 않아도...

GET /posts/1/comments
POST /posts/1/comments

처럼 id값을 보내주면 그 id값인 데이터만 보여줄것이다. 즉 Routes는  restful api를 사용한다.

 

GET    /posts
GET    /posts/1
POST   /posts
PUT    /posts/1
PATCH  /posts/1
DELETE /posts/1

이게 잘 작동하는지 한번 해보자!

 

 

해당 id를 가진 아이템만 반환된다!!!

json-server가 알아서 잘 찾아준다~

이것이 바로 (큰) 장점!

 

[결론(?)]

우리가 restful router를 열심히 디자인하는 등...하지 않아도 json-server가 알아서 해준다.