728x90 티스토리챌린지11 [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] 글 작성 기능 만드는 방법 글 작성 기능 만들기- 글 작성 하고,작성한 글을 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] MongoDB 사용법 데이터 조회 Clusters - Browse Collection 으로 데이터 조회 가능.데이터 생성Create Database 클릭해서 생성 가능.1) database (프로젝트) 이름2) collection(폴더) 이름document 는 파일 Insert Document 이걸로 파일(데이터들) 생성. Next.js 환경에서 MongoDB 연결 1) 몽고DB 라이브러리 설치 npm install mongodb2) DB에 접속하기 - 서버 컴포넌트서버 컴포넌트 안에다가MongoClient 써주고 import.const client = await MongoClient.connect('DB접속URL~~', { useNewUrlParser: true })const db = client.db("forum").. 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 2 다음 728x90
