폴더를 하나 만들고 VS.Code에서 해당 폴더를 연 뒤 터미널에서 다음과 명령을 입력합니다.
npm create vite@latest .
npm install
npm run dev
개발용 JSON Server 간단하게 구축하기
개발에 간단히 사용할 수 있는 JSON 서버를 구축하기 위한 글입니다.
다음처럼 json-server를 구동할 수 있습니다.
npx json-server --port 9999 --watch db.json
json-server가 설치되어 있지 않다면 설치할 것인지를 묻고 설치되면 서버가 실행됩니다. 포트는 9999이고 서비스할 json 데이터는 db.json 파일이 저장되어 있는데요. 다음 예시와 같습니다.
{
"profile": {
"name": "typicode"
},
"topics": [
{"id": 1, "title": "html", "body": "html is ..."},
{"id": 2, "title": "css", "body": "css is ..."}
]
}
json 데이터가 위와 같다면 다음과 같은 url을 통해 서버에 데이터를 요청해 받아올 수 있습니다.
http://localhost:9999/topics
http://localhost:9999/topics/1
http://localhost:9999/topics/2
이 정도도 나쁘진 않으나 서비스할 데이터를 변경할 수도 있습니다. 클라이언트 단에서 서비스할 데이터를 추가하기 위한 서비스 호출 코드는 다음과 같습니다.
const title = event.target.title.value
const body = event.target.body.value
const options = {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({ title, body })
}
fetch(`http://localhost:9999/topics`, options)
.then(res => res.json())
.then(result => {
console.log(result)
})
위의 코드가 실행되면 서버 단의 db.json에 새로운 데이터가 추가됩니다.