생활코딩

Coding Everybody

코스 전체목록

닫기

읽기 기능 구현

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

소스코드

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
  2. 어흥
    230813
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기