본문 바로가기

프로젝트/공부기록

JSON 서버 만들기!

JSON 서버를 왜 만드나 

이번에 프로젝트를 하면서 느낀 점이 있다. 바로 내가 원하는 시점에 api가 완성되지 않는다는 점이다. 완성되기까지 마냥 기다릴 수 없기 때문에 나는 api가 없어도 내가 가짜 서버를 만들어서 테스트를 해야겠다고 강하게 느꼈다.  그래서 시작하는 JOSN 서버 만들기! 

 

JSON 서버 란?

JSON 서버는 진짜 서버는 아니지만 JSON 데이터를 주고받을 수 있게 필요한 것을 제공해준다! 

 

JSON 서버 만들기

npm install -g json-server

먼저 https://www.npmjs.com/package/json-server 이 사이트에 들어가서 터미널에 위에 사진 처럼 json-server를 설치해 준다! 

그리곤 프로젝트 최상위에 폴더와 파일을 만들어주고 DB.json 파일에 사이트 안에 있는 예시 데이터를 복사 붙여 넣기 해본다! 

 

이렇게 하면 DB.json 파일이 마치 데이터베이스 역활을 해준다고 한다. 그리고 위 사진에 있는 "posts", "comments", "profile"이

데이터베이스 테이블이라고 가정이 된다고 한다. 마치 서버에 있는 것처럼 수정 삭제 추가가 다 된다고 한다! (싱기)

JSON 서버 실행하기!

json-server 실행하기

cd json-server //json-server 로 이동하고 
npx json-server --watch db.json // 이렇게 입력하면 실행됨!

위 사진처럼 하면 http://localhost:3000/posts 이렇게 접근했을 때 위에 만든 데이터에 접근이 가능하게 된다! 짱신기! 

 

json-server에 추가하기

만약 유저들의 정보를 json-server에 추가하고 싶다면 id를 꼭 추가하고 (각각의 레코드에 고유한 pk값) 원하는 데이터를 만들면 된다. 

이런 식으로 추가하고 저장하면 

이렇게 users가 추가된 것을 볼 수 있다.

데이터가 추가된 걸 확인해 보자!

간단하게 http://localhost:3000/users에 get 요청을 보내 0번째 데이터만 콘솔에 찍어보게 했다.

axios를 사용해서 get 해오기
버튼에 axios 요청 보내는 함수 추가

결과는 아래와 같이 잘 받아와 진다!

다른 메서드들도 실험해 본 결과 모두 잘 받아와 졌다! 

 

'프로젝트 > 공부기록' 카테고리의 다른 글

DI!  (0) 2023.07.16