728x90 복습5 [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] 수정 기능 만드는 방법 글 수정 기능 만들기수정 페이지 생성하기 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. [Next.js] 글 목록 조회 (리스트 페이지) 만드는 방법 글 목록 조회 (list 페이지) 기능 만들기. 게시판의 여러 기능- 글목록 조회기능- 상세페이지 - 글발행기능 - 수정삭제기능DB에 저장된 글들을 보여주는 기능 만들고 싶으면 1. html 페이지도 하나 필요하고 2. 그 페이지 방문하면 DB에서 데이터를 꺼내와서 (없으면 임시로 몇개 만들고)3. html 페이지에 꽂아넣어주면 되는거 아니겠습니까 1. 글 목록 보여줄 HTML 생성 1) list 폴더 app폴더 안에 만들어서 주소 생성./list 그리고 list 폴더 안에 page.js 파일 생성해서/list 경로로 들어갔을 시의 보여줄 page 만듦. 1-1) page.js 파일 안에다가 컴포넌트 생성하고 html 레이아웃 만들어주기.2) MongoDB에 있는 데이터 출력= connectDB 임.. 2024. 11. 13. [Next.js] 리액트와 동일한 map () / 컴포넌트 / props map 함수 사용법- 리액트와 동일- 모든 Array 자료형에다가 사용 let 어레이 = [1,2,3];어레이.map(()=>{ console.log('안녕')});사용방법:1) array.map() 이렇게 옆에 붙여줌.let array = [1,2,3]array 는 Array 자료형2) map() 소괄호 안에다가 콜백함수 넣어주기.array.map(function(){})array.map(()=>{})3) {} 안에 있는 내용을 array 자료 안에있는 데이터 개수 만큼 반복실행 해줌. array.map(function(){console.log('안녕')})= 안녕 3번 출력됨= 데이터 개수 3개라서= 1, 2, 3 이렇게 3개4) 소괄호 안에 파라미터 2개 추가 가능array.map((a,i)=>{.. 2024. 11. 12. 이전 1 다음 728x90
