글 수정 수정 기능을 구현해보자. 아직 페이지가 없어 404가 뜰 것이다. 우선 /src/app/update/[id]/page.tsx 파일을 만들어 주고 기본 틀만 제공하자. 그런데 수정이란 크게 2가지의 합성이다. Update = Create + Read 따라서 수정을 진행할 때 읽고 만드는 두 가지가 모두 필요하다. 기본적인 UI는 Create에 있는 page.tsx에서 가져오자. 그런데 Update는 원본이 적혀 있어야 하기 때문에 Read 기능도 필요하다. 그런데 Create는 클라이언트 컴포넌트이고 Read는 서버 컴포넌트로 구현되어 있다. 그래서 이걸 그대로 사용할 수는 없다. useEffect와 fetch를 이용해서 데이터를 가져오는 작업이 필요하다. 그리고 가져온 데이터를 form 안에 넣..

사전 작업 글 수정, 삭제 진행 전 사전 작업을 진행하자. 글을 선택하지 않는 홈에서는 수정, 삭제 버튼이 보이지 않아야 하고, 글을 선택한 후에만 수정, 삭제 버튼이 보여야 한다. 그리고 지금은 업데이트 버튼을 누르면 항상 update/1로 이동하는데, 다이나믹 라우팅도 적용시켜보자. 수정, 삭제 버튼이 글 상세 조회에서만 보이도록 처리 이 부분은 layout.tsx에 children 아래 작성된 ul 태그에 작성되어 있다. 그런데 이 코드를 보였다 안 보였다 하려면 주소의 id가 있는지 없는지 확인해야 한다. 그런데 layout.tsx는 id가 있는지 없는지 확인이 불가능하다. /src/app/read/[id]/page.tsx는 id 폴더 밑에 있기 때문에 props.params.id를 통해서 접근할..

글 읽기 읽기 기능의 경우 사용자와 상호작용하는 게 아니라 내용을 출력할 뿐이라 서버 컴포넌트로 작성하는 게 유리하다. 일단 데이터를 서버로부터 가져와야 하므로 async await를 써준다. // /src/app/read/[id]/page.tsx export default async function Read(props: any) { const resp = await fetch(`http://localhost:9999/topics/${props.params.id}`); const topic = await resp.json(); return ( {topic.title} {topic.body} ); } 참고자료 생활코딩 - Next.js 13 https://opentutorials.org/course/509..

Server Componet VS Client Component Next.js에서는 Server Component, Client Component라는 개념이 구분되어 있다. React 18 버전부터 서버 컴포넌트라는 개념이 추가가 되면서 Next.js가 그걸 가져와서 구분되어 진 것이다. 서버 컴포넌트를 안 써봤다면 지금까지 클라이언트 컴포넌트 방식으로 구현해왔을 것이다. 그리고 클라이언트 컴포넌트에서는 useState, useEffect, onClick, onChange와 같은 것들을 사용할 수 있는데 서버 컴포넌트에서 이런 것들을 사용하게 되면 에러가 발생하게 된다. 두 컴포넌트는 사용할 수 있는 api가 다르다는 것을 기억하면 좋다. 그리고 Next.js에서는 특별한 조치를 취하지 않는다면 서버 컴..