생활코딩

Coding Everybody

읽기 기능 구현

토픽 생활코딩 > WEB > WEB2 - JavaScript > React > Next.js 13

읽기 기능을 구현해봅시다. 

소스코드

https://github.com/egoing/nextapp/commit/c5f80f61d9e279f3a55f07c026a1f7d8c2e17421

절차

1. app/read/[id]/page.js 편집

export default async function Read(props){
  const id = props.params.id;
  const resp = await fetch(`http://localhost:9999/topics/${id}`);
  const topic = await resp.json();
  return <>
    <h2>{topic.title}</h2>
    {topic.body}
  </>
}

2. http://localhost:3000/read/1 접속

이전과 같은 화면이 나오면 강력 새로고침을 해서 캐쉬를 지워주면 됩니다. 

  • Windows/Linux : Ctrl + Shift + R
  • Mac : Cmd + Shift + R (safari : Cmd + Option + R)

댓글

댓글 본문
  1. 와 헤매고 있었는데 공유해주셔서 감사합니다!!
    대화보기
    • 김김김
      TypeError: fetch failed가 발생한다면 backend 서버를 실행하지 않았기 때문

      터미널에서 npx json-server --port 9999 --watch db.json 실행
      참고: https://opentutorials.org......364
    • 어흥
      230813