[VUE] json-server 설치 및 사용하기

안녕하세요!

프뚜(프로그래머 뚜)입니다!

 

[개발 환경]

 - OS: windows 10 64bit

 - git: 2.37.1.windows.1

 - nodejs: v16.16.0

 - npm: 8.15.0

 - yarn: 1.22.19

 - @vue/cli(vue3): 5.0.8

 

yarn이 설치 되어있지 않으신 분은 링크를 통해 설치 진행해주시면 됩니다.

npm이 설치 되어있지 않으신 분은 링크를 통해 설치 진행해주시면 됩니다.

 

 

front 개발을 하다보면 데이터를 저장해야하는 상황이 생깁니다.

Database에 저장하기 위해선 Backend 서버가 필요합니다.

개발 단계에서는 backend 서버가 없거나 미구현인 상황이 많이 생깁니다.

이때 대신해서 활용할 수 있는 json-server가 있습니다.

 

 

1. npm 홈페이지에 접속하기(클릭)

 

 

2. npm을 통해 json-server를 설치하기

npm i json-server --save

 

 

3. json-server를 실행하기 위해 db.json 세팅하기

db.json을 프로젝트 ./에 생성합니다.

vue-tistory에 db.json을 생성하겠습니다.

 

 

4. json-server 서버 실행하기

json-server --watch db.json

기본 port는 3000으로 서버가 실행되었음을 확인할 수 있습니다.

 

 

5. 데이터 추가하기 (db.json)

# ./db.json 파일
{
  "users": [
    {
      "id": "프뚜1",
      "job": "프로그래머1"
    },
    {
      "id": "프뚜2",
      "job": "프로그래머2"
    }
  ]
}

 

 

6. 추가한 데이터 확인하기

db.json에 있는 데이터가 정상적으로 출력되었음을 확인할 수 있습니다.

 

 

해당 프로젝트는 gitlab에 제공되고 있습니다.

https://github.com/JeongSeongSoo/vue-tistory

GitHub - JeongSeongSoo/vue-tistory

 

궁금하신 부분 또는 문제가 생긴 부분에 대해서 댓글 남겨주시면 빠르고 정확한 답변드리겠습니다.

 

휴먼모션 브랜드 론칭 기념 1+1 시크릿 기획 판매