Start JSON Server (🚨error..)

아래의 링크를 참고해 가상 API 서버를 생성하여 사용해보자

https://www.npmjs.com/package/json-server
"json-server"를 사용하면 JSON 파일을 기반으로 가상 API 서버를 생성할 수 있다
프론트엔드 애플리케이션을 개발하거나 테스트할 때 가짜 백엔드 서버를 구축할 수 있고
"json-server"는 개발자들이 프로토타입 개발이나 테스트 목적으로 가상 API를 빠르게 설정하고 사용할 수 있는 도구를 제공하는 npm 패키지이다

Install JSON Server

npm install -g json-server

Create a db.json file with some data

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

Start JSON Server

json-server --watch db.json

하지만 여기서 에러가 발생한다

참고 링크
https://m.blog.naver.com/vanstraat/221732533202

Powershell 실행정책으로 보안 때문에 파일을 로드 할수없다고 한다

설정을 변경 한 뒤 다시 확인해보면

재정의로 인해 셸은 현재 유효 실행 정책인 RemoteSigned을(를) 유지한다는 경고가 뜨게 되는데

set-executionpolicy RemoteSigned

-> 다시 확인해보면 LocalMachine 이 RemoteSigned으로 바뀐 것이 확인된다 🤔

여기서 다시 처음부터 설치 명령어을 제대로 하고자

sudo npm install -g json-server

를 해봤으나.. 실패...

👉
해결 방법

npx json-server --watch ./data/db.json

npx를 붙여 해결됐다

드디어 보게 된 hi ㅠㅠㅠㅠㅠ 😭

하지만
api 가 JSON으로 읽히지 않는다는 에러가 뜨게 된다 ....ㅠ

참고 링크
https://velog.io/@remon/fetch-%ED%86%B5%EC%8B%A0-%EC%A4%91-is-not-valid-JSON-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0

하지만 다시 보니 json-server와 리액트 로컬을 헷갈려 이상하게 실행 하고 있었다 ..!

npx json-server --watch ./data/db.json 후,
db.json을 돌리는 서버가 3000이니 url 값은 http://localhost:3000/nations
으로 설정해야하고
다른 터미널에서 npm start 후 3001 포트로 리액트 로컬을 돌려야 한다
son-server는 3000 포트로, 리액트 로컬은 3001 포트로 실행!!

👉
-> 3000포트로 json 데이터를 가져와 3001 포트에서 실행되어 결과가 출력된 모습

알아두기
초기에 설정을 파워쉘을 사용 하지 않기..
참고 : npm: 'npm' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다....

핵심은 브라우저에서 나오는 리액트 포트와 데이터를 올리는 json-server 의 포트는 다르게 설정하고 동시에 돌리는것이 포인트이다