공부34 14. update & delete 버튼 구현 🔨사전 작업 글을 선택하지 않고 있는 홈으로 갔을때 update, delete 버튼 안 보여야 한다. 글을 선택했을때 update, delete 버튼이 보여야 한다. 어디에 있던 update/1 으로 이동을 하는데 그게 아니라 선택한 글의 id가 update/id값 이렇게 나오도록 해야한다. 이 코드를 변경하면 된다. 보였다 안 보였다 하기 위해서는 주소의 id가 있는지 없는지 확인해야한다. 루트 layout.js 에서는 id가 있는지 없는지 확인할 수 없다. read/[id]/pages에서 props.params를 이용하여 id 값을 확인할 수 있다. 그러나 layout.js는 [id] 폴더보다 상위에 존재하기 때문에 props로 params가 주입되지 않는다. 💡 useParmas 사용? usePar.. 2023. 8. 25. 13. cache create에서 create하게 되면 content가 생성이 돼서 db.json에 데이터가 추가되고 URL 과 내용이 잘 변경된다. 그런데 글 목록에 content가 추가되지 않았다. 이는 캐시와 관련이 있다. 서버에서 글 목록을 가져오는 코드에서 fetch 명령어를 사용하게 되면 Next.js는 우리가 한 번 가져온 정보를 .next 폴더에 저장해둔다. reload를 해도 통신이 이루어지지 않고 있다. cache 가 HIT 이기 때문이다. 이 문제를 해결하기 위해서 글을 생성하고 서버 컴포넌트를 refresh하기 전에 layout.js에서 fetch로 인해서 만들어진 캐시를 지워야 한다. 📍 Revalidating Data 캐시된 데이터를 일정 시간 간격으로 재검증하려면 fetch()에서 next.re.. 2023. 8. 25. 12. 글 생성 🔔 만약에 서버를 껐다 켜도 문제가 생기면 next 폴더를 지우고 reload하면 됨 > [mac] rm -rf .next [window] rmdir /s /q .next > npm run dev 💡 form 태그 사용하기 onSubmit 사용한다. 이를 통해 사용자와 상호작용을 하기 때문에 Server Component에서 사용하지 못하므로 Client Component로 변경해야 한다. > "use client" onSubmit은 기본적으로 페이지 이동을 하기 때문에 기본 동작을 방지하기 위해서 > (e) => { e.preventDefault(); } 💡 input 값 찾기 e.target : form 전체 e.target.title : name이 title인 element e.target.titl.. 2023. 8. 25. 11. 글 읽기 read/[id]/page.js에서 읽기 기능 구현 💡 먼저 생각할 부분 이 페이지는 사용자와 상호작용 하는가? 그냥 데이터를 읽어서 출력할 뿐이다. = Server Component 데이터를 가져올 때는 함수를 async / await 방식 사용 id값을 URL에 반영해서 데이터를 가지고 옴 2023. 8. 25. 10. 글 목록 가져오기 Server Component 어떤 정보를 단순히 보여줌 사용자와 상호작용 X Client Component 버튼과 같이 사용자와 상호작용 O 📍 Client Component Next.js는 기본적으로 Server Component로 간주하기 때문에 Server Component에서 useState, useEffect 같은 api를 사용하려고 했더니 에러 발생 그러면 이 코드를(모듈을) Client Component로 변경하고 싶으면 맨 위에다가 "use client"; 작성하면 정상 작동 topics를 가지고 글 목록 만들기 위 코드 중에서 몇 가지 아쉬운 점 useEffect를 이용해서 데이터를 fetching 하고 있음. 즉 서버에서 클라이언트로 데이터를 가져오고 있음. 만약에 서버가 상파울루에 .. 2023. 8. 25. 09. Backend 현재 html, css 하드 코딩 되어있는 상태이다. 백엔드를 구축해서 백엔드에 있는 데이터를 가지고 와서 동적으로 위 내용을 표시 이때 Next.js를 순수하게 백엔드로 사용하고 싶다면 메뉴얼 Routing > Route Handlers 참고하면 Next.js로 API 구축 가능 📍 json server로 백엔드 구축 > npx json-server --port 9999 --watch db.json 9999 포트에 서버 연결 db.json파일에 내용(정보)를 저장 --watch : 내용이 변경되었을때 서버에 바로 적용 http://localhost:9999/topics 라는 주소로 접속하면 글 목록 보여주기 위해 db.json 파일에 "topics" 추가 데이터를 자바스크립트로 가져오기 위해 개발도구_.. 2023. 8. 25. 이전 1 2 3 4 5 6 다음 728x90
