환경변수 & 졸업 현재 강의에서는 주소가 localhost로 하드코딩되어 있다. 그런데 개발할 때 사용하는 api와 실서버 api의 주소가 다를 수 있다. 이런 정보를 애플리케이션의 소스코드에서 떨어트려 별도로 관리해야할 일이 생길 수 있다. 아래 환경변수 관련 문서를 보면 .env.local 파일을 홈디렉토리에 만들고 아래와 같이 애플리케이션이 사용하는 정보를 넣어주면 된다. https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables Configuring: Environment Variables | Next.js Next.js comes with built-in support for environmen..

글 삭제 이번엔 삭제를 구현해보자. Control.tsx 파일에서 onClick 이벤트를 추가해주고 fetch를 작성해주자. 삭제 메소드를 추가하기 위해 option을 따로 설정해주자. 테스트하면 글을 선택하고 삭제버튼을 눌렀을 때 삭제가 됐고 refresh를 하면 삭제가 잘 된 걸 확인할 수 있다. 그럼 삭제한 경우 데이터가 사라진 것이니까 루트로 이동하도록 처리하자. 이를 위해서는 router가 필요하다. 삭제가 끝나면 push해서 루트로 이동하고 서버 컴포넌트들을 다 refresh를 해야하니까 router.refresh도 처리해주자. // /src/app/Control.tsx 'use client'; import Link from 'next/link'; import { useParams, useRo..

글 수정 수정 기능을 구현해보자. 아직 페이지가 없어 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를 통해서 접근할..

Cache 이전 장에서 미리 얘기했던 것처럼 새로 글을 생성하고 이동하지만 목록은 변화가 없다! 이건 캐시와 관련되어 있는 내용이다. layout.tsx를 보면 서버에서 글목록을 가져오는 코드가 있다. fetch 명령어를 사용하게 되면 next.js는 기본적으로 한 번 가져온 정보를 저장하게 된다. 이 저장된 내용을 지우기 위해 ctrl + c를 눌러 실행되던 걸 멈추자. 그리고 .next 파일을 지우기 위해 rm -rf .next 를 실행하자. 실행해보면 열려있던 페이지에서 필요한 데이터를 가져오는 걸 볼 수 있다. 강의 내에서는 아래와 같이 터미널이 보이지만 내 터미널에서는 해당 부분이 보이지 않는다. 우선 json-server를 실행한 액세스 기록만으로 cache가 miss해서 다시 요청했는지 여부..

글 생성 이번에는 create 기능을 구현해보자. 이를 위해 create 폴더 내의 page.tsx 파일을 수정하면 된다. 중첩된 레이아웃을 설명하기 위해 이전에 만든 인위적인 layout.tsx 파일도 있는데 이건 이제 필요없어서 layout.tsx를 지워주고 page.tsx로 다시 시작하자. 만약 에러가 뜨면 일단 개발 서버를 껐다가 다시 켜보고 새로고침 해도 에러가 여전히 뜨면 .next를 지우고 다시 실행해보면 된다. 생성 기능을 위해 form을 만들어주자. 사용자가 어떤 값을 입력하고 create를 클릭했을 때 이벤트를 잡기 위해서는 form에 onSubmit 이 필요하다. 이건 사용자가 상호작용할 때 실행되는데 사용자와 상호작용하는 것은 서버 컴포넌트에서 다루지 않는다. 에러가 발생하게 되고,..