교육후 개인공부/React18 [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. [Next.js] 서버기능 만들려면 전체 폴더 위치에다가 pages폴더 만들고 그 안에 api폴더 만들고 그 안에 test.js같은 파일 만들면 된다. 이런식으로 만들자!! 일단 get요청을 테스트 해보자 export default function handler() { console.log(123); } 코드를 이렇게 입력하고 인터넷주소창에 localhost:3000/api/test 이렇게 입력해보자! 몹시 성공적 export default function handler(req, res) { console.log(123); return res.status(200).json("안녕"); } 이렇게하면 응답까지 해준다!!!! post 서버기능 만들려면 form을 이용하면 된다!!! export default function Write() { .. 2024. 2. 20. [Next.js] useRouter 페이지 이동하는 방법으로 Link말고 useRouter를 쓰는방법도 있다 useRouter는 client component에서 사용할수있다. import { useRouter } from "next/navigation"; let router = useRouter(); 리액트에서 navigate쓰던거랑 방법이 비슷한것 같다. "use client"; import { useRouter } from "next/navigation"; export default function DetailLink() { let router = useRouter(); return ( { router.push("/list"); }} > 버튼 ); } router.back() : 뒤로가기 router.forward() : 앞으로가기 .. 2024. 2. 20. 이전 1 2 3 4 5 다음
