분류 전체보기525 [Next.js] 게시판 삭제기능 "use client"; import Link from "next/link"; import WriteBtn from "./WriteBtn"; export default function BoardItem({ data }) { return ( Q & A {data.map((a, i) => { return ( {data[i].title} {data[i].content} {/* {data[i]._id} */} 수정 { fetch("/api/post/delete", { method: "DELETE", body: data[i]._id, }) .then(r => r.json) .then(() => { e.target.parentElement.style.opacity = 0; setTimeout(() => { e.ta.. 2024. 2. 24. [Next.js] client component에서 DB데이터 가져오려면 client component에서 DB데이터 가져오려면 useEffect이용해서 서버에 부탁해서 DB데이터를 가져온다!! "use client"; import Link from "next/link"; import WriteBtn from "./WriteBtn"; import { useEffect } from "react"; export default function BoardItem() { useEffect(() => {}, []); return ( Q & A {data.map((a, i) => { return ( {data[i].title} {data[i].content} {/* {data[i]._id} */} 수정 삭제 ); })} ); } 근데 이렇게 하면 단점은 검색노출이 어려울수도 있다. 왜나면.. 2024. 2. 24. [Next.js] 게시판 수정기능 1.일단 수정버튼을 만들자 수정 2. 수정페이지를 만들자 저 Link주소에 맞는 파일을 생성하고 거기에 수정페이지를 꾸미자 export default function Edit() { return ( 수정페이지 버튼 ); } 3. 수정페이지에 기존의 내용을 가져와서 채워놔야함 import { connectDB } from "@/util/database"; import { ObjectId } from "mongodb"; export default async function Edit(props) { //console.log(props); const client = await connectDB; const db = client.db("market"); const result = await db .collecti.. 2024. 2. 24. [Next.js] 입력한 데이터 mongoDB에 저장하기 input 창에 입력된 데이터를 mongoDB에 저장하는 코드를 구현할거다. pages/api/post/new.js export default function handler(요청, 응답) { console.log(요청.body); // 이렇게하면 유저가 보낸 데이터가 나올거다 } 저렇게하면 input창에 입력한 데이터가 나올거다. 그걸 이용하자. 이제 저 입력한 정보를 mongoDB에 저장하자. import { connectDB } from "@/util/database"; export default async function handler(요청, 응답) { if (요청.method == "POST") { const client = await connectDB; const db = client.db("m.. 2024. 2. 24. 이전 1 2 3 4 5 6 7 8 ··· 132 다음