[개발 Dev] JSON 서버 구축하기 / 로컬에서 API JSON 서버 구축하기 / 로컬 서버 만들기

안녕하세요.

디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다.

 

이번 포스팅에서는 프론트엔드 개발자가 로컬에서 JSON 서버를 구축하는 방법에 대해 다뤄보겠습니다.

보통은 백엔드 개발자가 만들어 놓은 api를 프론트엔드 개발자가 전달받아 사용하는데요.

 

저는 개인적으로 실무작업할 때, 백엔드 개발자분이 작업해줄 때까지 기다리질 못합니다.

마감일은 정해져있고, 일은 많고..^^

 

또, 이 방법은 혼자 스터디하시는 분들에게도 정말 좋을 것 같습니다.

어렵지 않으니 차분히 따라해 주세요!

 

 

  로컬 API JSON 서버 구축하는 방법

1. VSCODE에서 새 창(New WIndow)를 열어주세요.

2. 바탕화면에서 새로운 폴더를 하나 생성해 주세요. (꼭 바탕화면이 아니어도 좋습니다.)

3. VSCODE에서 새로 만든 폴더를 열고, json 파일을 생성해 주세요. (예: data.json)

4. 생성한 json 파일 안에 원하는 데이터를 넣어주세요.

// 예시)
{
  "users": [
    {
      "id": "tooktak",
      "password": "tooktak12345"
    }
  ]
}

5. 터미널을 열어 경로를 확인 하고, 현재 경로가 맞다면 해당 명령어를 입력합니다.

npx json-server ./data.json(저장한 파일명) --watch --port 8080

5. json api를 호출할 수 있는 local url이 생성됩니다.

6. fetch 혹은 ajax로 해당 url을 연동시켜 사용하세요.

7. 성공!

 

 

  참고사항

vscode가 닫히면 url이 닫히므로, 꼭 vscode를 연 상태에서 테스트 해주세요.