React 에서 db.json 에 있는 데이터를 axios로 불러오는 방법

React
1

Next.js로 코딩을 하고 있고요.
db.json 에 내용 담아서 루트폴더에 놓았습니다.
포트번호는 9000입니다.

문제는 데이터가 받아와 지지 않는 상태인데요.
db.json 파일 넣고,

json-server -p 9000 db.json

으로 서버도 열어줬(?)습니다.

그런데 저 명령어를 vscode에 입력하면 yarn dev가 안돼서 닫고(?) yarn dev를 실행했는데 그게 문제일까요…?
그렇담 어떻게 해야하나요…?ㅠㅠ

​해당 서버의 엔드포인트도 확인해서 postman으로 확인했을때 내용 확인은 잘 했는데,
axios를 통해 내용을 불러올때 오류가 발생해서 계속 내용이 안불러와집니다…ㅠㅠ

import axios from "axios";
import StoreBoard from "../src/components/units/store/storeBoard.container";

const Home = () => {
  async function zzz() {
    const result = await axios.get("http://localhost:9000/stores/${id}");
    console.log(result);
  }

  return (
    <>
      <Aaa>dd</Aaa>
      <Bbb>aaa</Bbb>
      <button onClick={zzz}>REST-API 요청하기!!</button>
      <StoreBoard />
    </>
  );
};

export default Home;

가독성을 위해 styled 코드는 뺐습니다!
내용을 화면에 띄우진 않고 콘솔로 내용이 받아와지나 확인해보는데, 오류만 뜨고 안되네요…ㅠㅠ

검색을 했더니 package.json 에 proxy 코드를 추가해서 엔드포인트만 입력하는 방법도 있는데, 그것도 오류가 나서 질문드립니다…

image
image1600×560 66.6 KB

image
image1600×505 126 KB

image
image1600×581 111 KB

해당 오류는 위의 코드를 통해 띄운 화면의 오류이고,
package.json에 프록시 설정해서 (

"proxy": http://localhost:9000
// package.json에 코드추가

index.js 에서 엔드포인트만 입력하면 404에러가 뜹니다.

참고로 엔드 포인트의 1은 제가 임시로 하드코딩 한 내용입니다.

2

먼저 진단을 하는 것은 항상 어렵습니다. 그렇기게 자신의 표준화된 진단 패턴을 가지는 것은 많은 도움이 됩니다.

client/server 통신에서 처음 하는 것은 server가 정상적으로 해당 주소에 해당 포트에 열려있는지 확인하는 것입니다.

위 예는 http protocol을 사용 할 것으로 예상되는데, 중요한 것은 내가 만든 client말고 검증된 프로그램으로 진단해야 한다는 것입니다.

http의 경우 cli에는 curl이 있고 gui에는 크롬 개발자도구(크롬에서 F12누르기)가 있다고 봅니다.

여기서 실패하면 인/아웃바운드 정책을 봅니다. 서버가 구동하면서 특정 ip만 허용한다든지, 인바운드만 허용한다든지.

그 다음 방화벽정책 같은 것을 봅니다.

하여간 표준화된 도구로 서버가 열려있음을 확인하고 클라이언트로 호출하는 구현을 합니다.

도움이 되었기를 바랍니다.

1개의 좋아요
3

서버를 연 채로 yarn dev를 실행해야할 것 같습니다.

4

서버를 연 터미널을 닫으셔서 서버가 꺼진거 같네요. vscode 터미널의 오른쪽 상단에 + 표시가 있는데 이걸 누르시면 터미널 새로 하나더 열리구여. 여기서 Next도 실행시키시면 될거 같습니다.

5

Byung-Jun_Park 님 자세한 설명 감사합니다!
Byung-Jun_Park님이 제시해주신 방법은 아니었으나, 문제 해결했습니다!

yarn dev와 동시에 json-server를 열어줘야하는데 두 서버를 동시에 여는 방법을 몰라서 일어났던 일이었습니다!ㅎㅎ;;;
알려주신 방법은 잘 정리해뒀다가 나중에 비슷한 상황이 생기면 참고하겠습니다!
감사합니다!

6

yarn dev하고 새로운 터미널 명령어를 쓰는 방법을 몰라서 발생했습니다! 아랫분 댓글 참고하여 열어서 성공했습니다!!
답변 감사드립니다!!ㅎㅎ

1개의 좋아요
7

네! 감사합니다! 이 방법으로 json-server와 yarn dev 해서 성공적으로 열었습니다!
친절한 설명 감사드립니다!
정말 어떻게 해야할지 몰라서 눈앞이 깜깜했는데, 감사해요! ㅎㅅㅎ!