3. [vue3-project] json-server 연결하기(로컬 개발용 DB)

 

---

 

 

안녕하세용~~

오늘은 vue3 프로젝트를 위해 로컬 개발용 데이터베이스를

연결하는 방법을 정리하도록 하겠습니다 ㅎㅎㅎ

 

저는 인프런-'프로젝트로 배우는 Vue.js3' 코지코더님 강의를 보고

이런 게 있구나!!! 하고 정리하고 있습니다 ㅎㅎ

 

강의 내용은 대강 vue.js3를 활용하여 to-do List를 만드는 것인데요!!

이때 to-do List에 등록, 수정, 삭제될 데이터를 담아둘 곳이 필요했습니다 ㅎㅎ

 

그럼 로컬 개발용 데이터베이스를 연결하기 위해 알아보도록 하겠습니다!!

 

 

---

 

 

 

1. npm > json-server 

json-server

 

이곳에 들어가면 fake REST API를 구현해 준다고 적혀있습니다!!

즉, 개발할 때만 간단하게 사용할 수 있는 데이터베이스며,

실무에 사용하기엔 적합하지 않습니다 ㅎㅎ

 

 

저 문서에 설치 방법 및 설명이 잘 적혀 있으니 참고하시면 도움이 될 것입니다.

 

 

 

 

2.Teminal에서 설치하기

 

 

npm 설명 내용 >설치방법

 

 

터미널에 npm install -g json-server 을 입력하여 설치합니다.

 

설치가 모두 완료되면 파일을 하나 생성해 줍니다.

 

 

 

 

3. db.json 파일 생성하기

 

 

npm 설명내용

 

 

 

프로젝트를 잡고(제일 상단) 파일을 생성해 줍니다.

db.json

npm 설명과 같이 파일에 오브젝트를 만들어 그 안에 데이터를 넣어줍니다.

하나하나의 오브젝트(ex."posts")가 하나의 테이블이 되고,

안에  [](array)가 데이터가 됩니다.

예시로

 

{                             

"테이블명" : []

}                          

            

     "테이블명"에 원하는 이름 작성해 준 후

db.json을 실행시킵니다.

 

 

 

 

4. db.json 실행시키기

 

 

 

npm 설명내용

   

json-server --watch db.json 

을 터미널에 입력하여 실행시킵니다.

 

실행이 되면 아래와 같이 resources 가

설정한 테이블명으로 생긴 것을 확인할 수 있습니다.

 

localhost 3000번에서 데이터베이스가 시작이 됩니다.

생성된 링크로 들어가게 되면 데이터를 확인할 수 있습니다!

예시로 확인하기 위해 안에 아무 데이터를 넣고 확인해 보세요!!

ex) 

{                             

"테이블명" : [

{          

     "id":1

}          

]                 

}                          

   

 

주소 뒤에/1을 적어주면 첫 번째 데이터를 가져오고,

/2를 적어주면 두 번째 데이터를 가져오게 됩니다.

 

 

그러면 이제 실제로 데이터를 보내주기 위해 Http request를 보내기 위해

패키지를 하나 더 설치해야 하는데요!!!

 

 

 

 

5.axios 패키지 설치하기

 

 

이것이 npm에서 제공하는 http request를 보내기 위한 패키지입니다.

 

터미널에 npm i axios 를 입력하여 설치합니다.

 

 

 

 

6. 사용방법

 

 

1) vue파일 <script>에 import 시켜주기

 

 

 

 

import axios from 'axios'

 

import를 시켰으니 함수에서 axios를 사용하여

post request를 통해 데이터를 함께 보내주도록 합니다.

 

 

2) axios.post로 데이터 보내주기

 

 

axios 사용하여 post로 데이터 보내기

 

 

axios.post(                                                     

'보낼 URL/테이블명' ,

{보낼 데이터}

);                               

 

    id는 자동으로 추가되어 데이터에 생략해도 됩니다.     

 

 

3) 개발자 도구 > 네트워크에서 확인하기

 

1번과 2번이 되었으면 화면에서 잘 실행되는지 확인하기 위해

화면에서 등록한 후 개발자도구 > 네트워크에 들어가서 확인합니다.

 

 

개발자도구>네트워크

 

개발자도구>네트워크

 

 

저는 todos라는 테이블로 만들어서 

데이터를 보내는 순간 네트워크에 todos가 뜨고, 

안에 열어보니 http://localhost:3000/todos에

POST로 201번 성공적으로 등록된 것을 확인할 수 있었습니다.

 

 

4) db.json 파일 확인하기

 

방금 등록한 데이터가 db.json파일에 잘 저장되어 있는지 확인해 봅니다.

 

db.json파일

 

 

이와 같이 id는 자동적으로 추가되었고,

성공적으로 데이터가 저장된 것을 확인할 수 있었습니다!!!

 

 

 

---

 

 

혹시 수정될 부분이 있거나

모르는 부분이 있으면 댓글 남겨주세요!

감사합니다.