게시물 삭제 기능 구현하기4주차에 수정 기능까지 만들어보았으니 이제 삭제 기능을 구현할 차례이다.게시물 리스트에서 각 게시물마다 삭제 버튼을 만들어야 하는데, 그걸 위해 list/page.js 파일을 통째로 클라이언트 컴포넌트로 만들어버리면 효율성이 떨어지기에, 게시물 목록만 우선 따로 분리해서 클라이언트 컴포넌트로 만들어준다.컴포넌트를 분리했으면 ListItem에 DB에서 받아온 데이터를 props로 넘겨준다. 이때, props 전달하는 방법 외에 ListItem 내에서 useEffect를 사용하여 DB의 데이터를 가져오는 방법도 있다. 하지만 useEffect 안의 코드는 html 로드가 완료된 후에 실행되기 때문에 검색엔진 노출에 불리하다는 단점이 있다. 따라서 컴포넌트 구조가 너무 복잡한 경우가 ..

13.4 버전 이상부터는 서버 API 기능을 page.js 안에 클라이언트 컴포넌트와 함께 작성하여 처리할 수 있게 되었다.글을 작성하는 기능을 구현한다고 할 때, 다음과 같이 코드를 작성할 수 있다.import { connectDB } from "@/utils/database";export default async function Write() { async function handleSubmit(formData) { "use server" const db = (await connectDB).db('forum') await db.collection('post_test').insertOne({title: formData.get('title')}) revalidatePath('/wr..

Middleware allows you to run code before a request is completed. Then, based on the incoming request, you can modify the response by rewriting, redirecting, modifying the request or response headers, or responding directly.ㅡ Next.js 공식문서 한마디로 미들웨어란 요청이 들어왔을 때 해당 요청에 대해 응답을 보내기 전 무언가를 수행할 수 있게 해주는 중간자같은 역할을 한다고 볼 수 있다. 애플리케이션의 성능과 보안성, 사용자 경험을 강화하고자 할 때 사용되는데, 일반적으로 다음과 같은 경우에서 효과적으로 쓰인다 :특정 페이지로..

회원가입, 글 작성하기, 댓글 달기 등등 기본적인 기능들은 이제 다 구현을 해보았으니 다크모드 기능을 한 번 구현해보려 한다. state를 통해 다크모드인지 라이트모드인지를 관리하면 된다는 것은 누구나 쉽게 떠올릴 수 있을 것이다. 리액트 사용자였다면 특히 여기서 자연스럽게 useState를 생각하게 될텐데, useState 사용 시 새로고침 시 상태가 초기화되기 때문에 다크모드의 상태를 관리하기에는 적절하지 않다.상태 데이터를 DB에 저장할 수도 있지만 간단하게 브라우저의 저장공간에 저장해보자. 1. localStorage에 저장하기localStorage.setItem("저장할 이름", "값"); // 저장하기localStorage.getItem("저장할 이름"); // 가져오기localStorage...

기본적으로 Next.js는 Google Font에서 제공하는 폰트들을 별다른 요청 없이 가져와 쓸 수 있도록 되어있다. Next.js 앱의 기본 상태에서 app 폴더의 루트 layout.tsx를 보면, 실제로 다음과 같이 Inter 폰트를 next/font/google 으로부터 import하여 모든 페이지에 적용 중임을 확인할 수 있다.import { Inter } from 'next/font/google' const inter = Inter({ subsets: ['latin'] }) export default function MyApp({ Component, pageProps }) { return ( )}  내가 적용하고 싶은 폰트는 Pretendard로, Google Fo..

게시물 상세페이지 만들기 게시판 DB에 글 데이터를 몇 개 집어넣고 리스트를 조회하는거까지 해봤으니, 이제 특정 게시물을 눌렀을 때 해당 게시물의 상세페이지로 넘어가는 기능을 구현할 차례이다. Dynamic Route 현재 게시물 리스트는 /list에서 조회하고 있고, 게시물을 선택하면 그 게시물의 id 값에 따라 /detail/1, detail/2, detail/3 이런식으로 url이 바뀌면서 그 내용을 보여주면 된다. 1. 다음과 같이 detail 폴더를 만들고, 그 안에 [id]라는 폴더를 또 만든다. [폴더명] -> 폴더 생성 시 이렇게 대괄호로 감싸게 되면, 이 부분에 어떤 내용이 와도 상관없다는 의미가 된다. 따라서 /detail/123, /detail/ㅇ 이렇게 입력해도 /detail/[id..