json-server는 직접 DB를 만들고 서버를 구축할 필요 없이 json 파일을 이용해 REST API 서버를 구축해주는 라이브러리를 말한다.
JSON Server는 단일 JSON 파일로부터 RESTful API를 생성하여, 개발자는 JSON 파일에 데이터를 정의하고 JSON Server는 이를 기반으로 API 엔드포인트를 자동으로 생성한다. 이렇게 생성된 API를 통해 클라이언트는 데이터를 요청하고 응답 받을 수 있다.
JSON Server를 이용하면 서버를 구축하고 DB를 설정하는 복잡한 과정 없이도 가상의 REST API를 생성할 수 있다. 이를 통해 프론트엔드 개발자는 실제 백엔드와 통신하는 대신 JSON Server를 이용해 더욱 효과적으로 어플리케이션을 개발할 수 있다. 즉 개발 및 테스트 단계에서 유용하게 사용될 수 있다.
환경 설정
1. json-server 설치하기
Node.js를 사용해 JSON Server를 설치해야 한다.
Node.js를 설치하고 터미널 혹은 cmd에서 아래 명령을 실행한다.
npm install -g json-server
만약 Mac OS의 경우 해당 명령 수행 결과 아래와 같은 오류가 발생한다면 앞에 sudo 명령어를 추가하여 실행하면 된다.
sudo npm install -g json-server
위 명령을 관리자 권한으로 json-server를 전역으로 설치하라는 의미이다.
2. JSON 파일 준비
json-server를 설치하였으면 서버에 사용할 JSON 데이터를 가지고 있는 파일을 준비해야 한다. 따라서 먼저 해당 프로젝트를 만들 폴더를 생성하고 폴더 안에 json 파일을 만든다.
예를 들어, 나는 json-server라는 폴더를 만들었고 폴더 내부에 html 파일과 "db.json" 파일을 만들어주었다.
3. JSON Server 실행
json 파일까지 만들었으면 JSON Server를 실행시켜야 한다.
터미널창을 이용해 아래 명령을 수행한다.
json-server --watch db.json
※ 주의할 점
해당 명령은 db.json 파일이 있는 곳에서 실행해야 한다. 그래서 터미널에서 명령을 실행하기 전 cd "폴더명"으로 db.json 파일이 있는 폴더로 경로 이동 후 명령을 수행하길 바란다.
이 명령을 실행하면 JSON Server가 db.json 파일을 감시하고, 해당 파일의 내용을 기반으로 가상 서버를 시작한다.
기본적으로 JSON Server는 "localhost:3000"에 서버를 실행한다.
만약 포트 넘버 3000을 다른 숫자로 바꾸고 싶다면 아래 명령을 실행하면 된다.
json-server --watch db.json --port 8000
이런 식으로 '--port' 옵션을 사용해 새로운 포트 번호를 지정할 수 있다.
※ 오류 발생 예시
'json-server --watch db.json' 명령을 powershell에서 실행하다 보면 아래와 같은 오류가 발생할 수 있다.
이를 해결하기 위해서 Windows PowerShell 관리자 권한으로 실행 > 설정 변경을 해야한다.
1) executionpolicy로 현재 설정 확인
2) set-executionpolicy unrestricted로 실행 규칙 변경
PS C:\Windows\system32> set-executionpolicy unrestricted
실행 규칙 변경
실행 정책은 신뢰하지 않는 스크립트로부터 사용자를 보호합니다. 실행 정책을 변경하면 about_Execution_Policies 도움말
항목(https://go.microsoft.com/fwlink/?LinkID=135170)에 설명된 보안 위험에 노출될 수 있습니다. 실행 정책을
변경하시겠습니까?
[Y] 예(Y) [A] 모두 예(A) [N] 아니요(N) [L] 모두 아니요(L) [S] 일시 중단(S) [?] 도움말 (기본값은 "N"): Y
3) executionpolicy로 변경된 설정 확인
Restricted -> Unrestricted로 변경되어야 함.
4. API 요청 및 호출
'json-server --watch db.json'을 입력하면 서버가 실행되면서 API 주소가 나타날 것이다.
우리는 해당 주소로 API를 요청하고 호출할 수 있다.
예를 들어 GET, POST, PUT, DELETE 등 HTTP 메서드를 사용해 데이터를 가져오거나 생성, 수정, 삭제할 수 있다.
만약 "localhost:3000/users"에 GET 요청을 보내면 "users"엔드포인트의 데이터를 얻을 수 있다.
[JavaScript] json-server로 가상 서버 만들기
json-server
json-server는 직접 DB를 만들고 서버를 구축할 필요 없이 json 파일을 이용해 REST API 서버를 구축해주는 라이브러리를 말한다.
JSON Server는 단일 JSON 파일로부터 RESTful API를 생성하여, 개발자는 JSON 파일에 데이터를 정의하고 JSON Server는 이를 기반으로 API 엔드포인트를 자동으로 생성한다. 이렇게 생성된 API를 통해 클라이언트는 데이터를 요청하고 응답 받을 수 있다.
JSON Server를 이용하면 서버를 구축하고 DB를 설정하는 복잡한 과정 없이도 가상의 REST API를 생성할 수 있다. 이를 통해 프론트엔드 개발자는 실제 백엔드와 통신하는 대신 JSON Server를 이용해 더욱 효과적으로 어플리케이션을 개발할 수 있다. 즉 개발 및 테스트 단계에서 유용하게 사용될 수 있다.
환경 설정
1. json-server 설치하기
Node.js를 사용해 JSON Server를 설치해야 한다.
Node.js를 설치하고 터미널 혹은 cmd에서 아래 명령을 실행한다.
만약 Mac OS의 경우 해당 명령 수행 결과 아래와 같은 오류가 발생한다면 앞에 sudo 명령어를 추가하여 실행하면 된다.
위 명령을 관리자 권한으로 json-server를 전역으로 설치하라는 의미이다.
2. JSON 파일 준비
json-server를 설치하였으면 서버에 사용할 JSON 데이터를 가지고 있는 파일을 준비해야 한다. 따라서 먼저 해당 프로젝트를 만들 폴더를 생성하고 폴더 안에 json 파일을 만든다.
예를 들어, 나는 json-server라는 폴더를 만들었고 폴더 내부에 html 파일과 "db.json" 파일을 만들어주었다.
3. JSON Server 실행
json 파일까지 만들었으면 JSON Server를 실행시켜야 한다.
터미널창을 이용해 아래 명령을 수행한다.
※ 주의할 점
해당 명령은 db.json 파일이 있는 곳에서 실행해야 한다. 그래서 터미널에서 명령을 실행하기 전 cd "폴더명"으로 db.json 파일이 있는 폴더로 경로 이동 후 명령을 수행하길 바란다.
이 명령을 실행하면 JSON Server가 db.json 파일을 감시하고, 해당 파일의 내용을 기반으로 가상 서버를 시작한다.
기본적으로 JSON Server는 "localhost:3000"에 서버를 실행한다.
만약 포트 넘버 3000을 다른 숫자로 바꾸고 싶다면 아래 명령을 실행하면 된다.
이런 식으로 '--port' 옵션을 사용해 새로운 포트 번호를 지정할 수 있다.
※ 오류 발생 예시
'json-server --watch db.json' 명령을 powershell에서 실행하다 보면 아래와 같은 오류가 발생할 수 있다.
이를 해결하기 위해서 Windows PowerShell 관리자 권한으로 실행 > 설정 변경을 해야한다.
1) executionpolicy로 현재 설정 확인
2) set-executionpolicy unrestricted로 실행 규칙 변경
3) executionpolicy로 변경된 설정 확인
Restricted -> Unrestricted로 변경되어야 함.
4. API 요청 및 호출
'json-server --watch db.json'을 입력하면 서버가 실행되면서 API 주소가 나타날 것이다.
우리는 해당 주소로 API를 요청하고 호출할 수 있다.
예를 들어 GET, POST, PUT, DELETE 등 HTTP 메서드를 사용해 데이터를 가져오거나 생성, 수정, 삭제할 수 있다.
만약 "localhost:3000/users"에 GET 요청을 보내면 "users"엔드포인트의 데이터를 얻을 수 있다.
'Front-End > JavaScript' 카테고리의 다른 글