728x90 분류 전체보기530 요즘 새로운 앱개발은 플러터로도 충분 발행버튼 누르면 끝. 2024. 11. 17. [Next.js] 삭제 기능 만드는 방법 (3) 애니메이션 추가 해주기1. 애니메이션 동작 전, 동작 후의 CSS 스타일을 생각해보고2. 애니메이션 동작 전 스타일 넣어주고3. transition 스타일도 넣어주고 4. 원하는 시점에 애니메이션 동작 후 스타일을 넣기1) 박스 투명도가 1에서 0으로 감소하는 애니메이션 동작 전은 opacity : 1, 동작 후는 opacity : 0 ( 완전한 투명 )젤 큰 박스인 list-item 에다가 스타일링 동작 후는 opacity : 0 = Ajax 끝났을 때 주고싶음. onclick 에 파라미터 e 붙이기 이렇게 써주기. 서버로 데이터를 보내는 다른 방법 fetch 를 쓸 땐 저렇게 body 써서 데이터를 실어보낼 수 있고 form 태그를 쓰면 input 태그를 이용해서 데이터를 보낼 수 있다. 2024. 11. 17. [Next.js] 삭제 기능 만드는 방법 (2) listItem.js 에서 삭제기능 구현하기7) 삭제 버튼 누르면 서버로 삭제 요청 보내기ajax 의 fetch() 라는 함수 이용.삭제버튼을 누르면저 URL (/api/post/delete = 서버경로) 로DELETE 메소드로 요청을 보내기.8) 서버경로에 맞는 파일 생성/api/post/delete서버 파일 생성.컴포넌트도 채워주기.9) 서버에 글 삭제 코드 짜기서버에 DB 글 삭제하라고 지시(요청)해야하니서버 파일 안에는 DB글 삭제할 수 있도록 코드 짜야함.= deletOne() = document 하나 삭제.누가 이 서버로 요청을 하면DB에 있는 글을 삭제할 수 있게끔 하는게 서버의 역할if 조건문 사용해서 Delete 요청을 받았을 경우를 써주기. DB 갖고오는 코드 작성해주고deletOne함.. 2024. 11. 16. [Next.js] 삭제 기능 만드는 방법 (1) 삭제기능 만들기 전에 list/page.js 수정- 자바스크립트 기능 개발 필요한 부분클라이언트 컴포넌트로 수정하기.js로 글목록에서 글이 사라지는 애니메이션 list/page.js 로 간다음에= 글 목록 페이지 자바스크립트 기능 개발이 필요한 곳만클라이언트 컴포넌트로 만들어서 집어넣기= 나중에 js로 글목록에서 글이 사라지는 애니메이션 넣어야 함. map 함수로 담아줬던 html 을 client 컴포넌트로 만들어서 집어넣도록 함. 1) list 폴더 안에다가 새로운 파일 생성 = ListItem.jsListItem 파일에다가client 컴포넌트 생성. 2) map 함수로 담아줬던 html 옮겨주기 이 부분 옮겨줌."use client";export default function ListItem() {.. 2024. 11. 15. [Next.js] 수정 기능 만드는 방법 글 수정 기능 만들기수정 페이지 생성하기 1. 수정페이지로 이동하는 버튼 만들기= Link 태그 사용 /list 목록페이지의 글제목마다 수정버튼 생성 수정 버튼 누르면 수정페이지 URL 로 이동해야 함. import { connectDB } from "@/util/database";import Link from "next/link";export default async function List() { const db = (await connectDB).db("forum"); let result = await db.collection("post").find().toArray(); console.log(result); return ( {result.map((a, i) => { .. 2024. 11. 14. [Next.js] 글 작성 기능 만드는 방법 글 작성 기능 만들기- 글 작성 하고,작성한 글을 DB 로 보내서 저장.- DB 입출력을 안전하게 대리로 해줄 수 있는 서버 생성.1. 글 작성할 수 있는 페이지 만들고 2. 전송버튼누르면 서버에 글저장해달라고 부탁하고 3. 서버는 부탁받으면 검사해보고 DB에 저장.서버 생성 방법"누가 글제목과 내용을 보내면 DB에 저장해주세요" 기능마다 URL과 method이름을 붙여서 구분- URL 작명은 자유- method는 GET POST PUT DELETE 4개 중에 맘대로 골라서 작성 1) app 폴더 바깥에 pages 폴더 생성하고 pages 폴더 안에 api 라는 폴더를 또 생성. 그리고 api 폴더안에 test.js 파일 생성. = 서버 생성 pages\api\test.js 는 자동으로 서버기능의 U.. 2024. 11. 14. 이전 1 ··· 9 10 11 12 13 14 15 ··· 89 다음 728x90
