[React] Heroku - API json server 1/2
필요 준비물
- Heroku, postman 계정
- Browser - Chrome
- vscode, nodejs, postman - download
작업내용
- json-server 설치 및 프로젝트 생성
- db.json 스크립트 작성
- json-server 실행 및 테스트
- postman 기본 사용법
API json server를 구축하여 통신을 하는 이유는 DB나 WebServer 등 직접 접근하지 않고 미들웨어를 통하여 접근해보기 위해서 입니다. 여러 이슈(특히 보안, 인증, 라우팅) 관련하여 미들웨어를 통하여 접근을 하게되면 이슈를 해결할 수 있는 방법이 됩니다. API 통신을 하기 위해서는 무료 서비스를 이용하는 방법과 직접 서비스를 만드는 방법이 있습니다. 여기에서는 서비스를 직접 만드는 방법을 설명하도록 하겠습니다. 노드 기반(제로 코드, 30초 완성 json server)서버라는 오픈 소스를 이용하여 Heroku에 서비스를 올려서 테스트해보도록 하겠습니다.
무료 서비스를 통하여 테스트를 하려면 MOCK API 서비스를 이용하시면 편리합니다. 물론 여러개 api를 만들면 비용이 발생합니다. 테스트는 postman이라는 어플을 이용하겠습니다.
1. json-server 설치 및 프로젝트 생성
- vscode와 nodejs는 Post [MACOS] React 개발환경 구성 1/2 를 참고하여 설치해주세요.
- node 18.3 이상이 필요하여 node를 업그레이드 해야될수도 있습니다. brew를 통한 nodejs 관리 명령어를 몇가지 익혀봅니다.
- brew list : 목록에서 설치된 node 버전을 봅니다. node@10/12/15/18 등등
- brew install node@(10/12/18 version) : 설치할 node version
- brew list : 설치된 node 버전이 설치되었는지 확인합니다.
- brew link --overwrite node@(10/12/18 version) : 연결할 버전 링크 설정
- export PATH="~~ : 메시지중에 이 메시지를 복사하여 붙여넣고 실행합니다.
- npm -v, node -v로 정상적으로 작동하는지 확인합니다.
- 프로젝트 디렉토리를 만듭니다.
- npm install json-server : -g옵션을 사용하여 global로 설치하여도 됩니다. -g를 사용안하고 프로젝트 폴더에서 명령어를 치면 아래 화면처럼 노드모듈과 패키지 제이슨 파일이 설치가 된것을 확인할 수 있습니다.
- vscode 프로젝트 디렉토리를 열고 db.json or db.json5 파일을 생성합니다.
2. 스크립트 작성
- json-server의 샘플코드를 입력합니다.
3. json-server 실행 및 테스트
- npx json-server db.json : 프로젝트 디렉토리에서 실행
- json-server --watch db.json : -g 옵션을 통해 설치 하였을 경우 실행(어느 곳이든 실행)
4. postman 기본 사용법
- get : API 호출하여 json data 확인
- post : json data 추가하기
- put/patch : json data 수정하기
- delete : json data 지우기
여기까지 [React] Heroku - API json server 1/2 과정이 끝났습니다. json-server의 풀기능은 전부 다루지 않을 예정입니다. git document에 내용을 확인 바랍니다. 기본적으로 서버 설정(포트), 미들웨어 기능, 라우트 기능 등 재미있는 기능이 많으니 문서 확인하여 테스트하시기 바랍니다. 다음글에서는 서비스를 Heroku에 올리고 테스트 하는 내용이 있겠습니다. 실제 API 서버 설치 경험이 있다면 이 과정이 쉽다고 느끼겠지만 API 서버쪽 지식이 처음이시라면 어렵게 느껴지실 수도 있습니다. 어렵다 생각이 드시면 개념과 이론 지식을 공부하느것도 좋은 방법이 될 것입니다. 💪💪
다른 부분이 있으면 문의하기를 통하여 남겨주세요.
history