오늘은 별도의 서버가 없는 환경에서 프론트엔드 작업을 진행하고자 할 때, 최소한의 실무적인 환경을 제공 받을 수 있는 API-Server 중 하나인 JSON Server를 소개하려고 한다.
JSON Server는 Node를 기반으로 구동되는, API-Server로써, 사용하기 위해서는 Node.js 설치가 필요하다.
나의 경우, Ajax를 통해 비동기적으로 JSON Data를 통신해야하는 작업에서 해당 툴을 많이 사용해왔다.
JSON Server를 구축하는 방법은 아래와 같다.
⑴ Node.js를 설치한다.
오늘은 Node를 소개하는 것이 아니기 때문에, 설치 방법은 생략한다.
⑵ JSON Server를 사용하는 것에 두 가지 방법이 있는데,
첫 번째는 폴더에 Server 정보를 셋팅하여 사용하는 방법,
두 번째는 JSON Server를 전역으로 설치하여, 별도의 셋팅 없이 사용하는 보편적인 방법이다.
⑶ - ⑴ 폴더에 Server 정보를 셋팅하여 사용하는 방법
명령 프롬프트(CMD) 진입 후, 아래 순서대로 명령어를 입력한다.
> mkdir my-json-server → server 구축할 폴더 생성
> cd my-json-server → 생성한 폴더로 이동
> npm init → node_modules 생성
해당 순서로 진행하였다면, 폴더 내에 node_modules 폴더와 package.json 및 package-lock.json 파일이 생성되는데 딱히 건들 필요 없는 요소들이다.
다음으로, Server를 생성하고 셋팅하기 위한 server.js 와 DB로 사용할 JSON 파일, db.json을 생성한다.
server.js 에는 다음과 같이 코드를 작성하여, 서버 환경을 만들어준다.
const jsonServer = require('json-server')
const server = jsonServer.create()
const path = require('path')
const router = jsonServer.router(path.join(__dirname, 'db.json')) // ← 사용할 json 파일 지정
const middlewares = jsonServer.defaults()
// Set default middlewares (logger, static, cors and no-cache)
server.use(middlewares)
// To handle POST, PUT and PATCH you need to use a body-parser
// You can use the one used by JSON Server
server.use(jsonServer.bodyParser)
server.use(router)
let port = 80; // ← port 설정 부분 (변경 가능)
server.listen(port, () => {
console.log(`JSON Server is running, port(${port})`)
})
만약, 사용하고자 하는 data가 달라지면, db.json 을 수정하거나, 해당 위치에 다른 JSON 파일명을 넣어주면 된다.
port 부분은 사용할 포트 넘버를 설정하는 부분으로, 본인 환경에 맞게 변경해서 사용하면 된다.
다음으로는, 서버를 구동 시키기 위해 아래의 명령어를 입력해준다.
> node server.js → server로 설정한 js 파일명을 적으면 된다.
정상적으로 구동 되면, 아래와 같은 화면을 볼 수 있다.
이후, 해당 로컬 포트 주소로 접속하여 아래와 같은 page가 노출된다면, 정상적으로 실행된 것이다.
⑶ - ⑵ JSON Server를 전역으로 설치하여, 별도의 셋팅 없이 사용하는 방법
명령 프롬프트(CMD) 진입 후, 아래 순서대로 명령어를 입력한다.
> npm install -g json-server → json-server를 전역(-g)으로 설치한다.
설치 이후에는 DB로 사용할 JSON 파일이 있는 위치로 이동하여, 해당 data를 load 할 수 있도록 명령어를 입력한다.
> json-server --watch [파일명].json
해당 json 파일이 정상적으로 존재하고 문제가 없다면, 아래 화면을 볼 수 있다.
이후, 설정된 3000번대 URL로 접속하면, 위에서 본 것과 동일한 JSON Server의 Main page를 볼 수 있을 것이다.
JSON Server는 쉽게 RESTful한 Server를 구축해주기 때문에 알아두면 사용할 곳이 많다.
또한 GET, POST, DELETE 등...여러 Method를 지원하기 때문에 사용법을 잘 익힌다면, 편리한 도구가 될 것 같다.
이 블로그는 개인이 혼자 공부해가며 내용을 정리하는 용도로 활용되고 있습니다.
잘못된 지식이나 이론을 게시하지 않도록 주의하고 있습니다.
'나의 개발 환경 셋팅 기록용' 카테고리의 다른 글
| Git 활용법 노트 정리 (0) | 2021.03.18 |
|---|---|
| 나의 Pycharm 개발 환경 설정 (0) | 2021.02.01 |
| vscode에서 EsLint / Prettier 적용하는 방법 (0) | 2021.02.01 |