728x90 티스토리챌린지21 [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. 삭제 기능 만들기 2 (Ajax 추가 내용과 에러 처리) 0:47 삭제기능 만들어오라던 숙제를 같이 해보도록 합시다.나중에 혼자 코드짤 때도 제 코드 따라칠 것입니까 잘 안되어도 혼자 이것저것 뭐라도 해보는 과정에서 실력이 늡니다. 코드 따라치는건 학습이 아니고 타이핑 실력만 향상됩니다.기능부터 한글로 설명해보면 1. 삭제버튼 누르면 서버로 삭제요청 보냄 (URL, method도 정하기)2. 근데 어떤 게시물 삭제할지 게시물 _id도 보내야 삭제를 정확히 잘해줄듯요 3. 서버는 요청 들어오면 DB에서 그 게시물 삭제해줌 이러면 될 것 같으니 이거 그대로 코드로 옮겨봅시다. 1. 삭제버튼누르면 서버로 삭제요청보냄 ajax 이용해서 삭제버튼을 누르면저 URL (/api/post/delete) 로DELETE 메소드로 요청을 보냄. 이제 저 경로로 요청하면 서버 기능을 실행하.. 2024. 11. 11. 삭제 기능 만들기 1 (Ajax) 글마다 삭제버튼을 만들고누르면 글을 DB에서 삭제하는 기능을 만들어봅시다.작성, 수정기능 만들 때 했던 내용과 비슷할 것 같아서 여러분이 알아서 하면 되는데 근데 이번엔 삭제시 글목록에서 글이 사라지는 UI 애니메이션같은걸 넣어봅시다.저기다가 버튼을 각각 만들고 그 다음에 버튼을 누르면 글이 삭제가 되는 기능을 만들어 볼 것. 삭제버튼누르면 애니메이션 넣으려는데 ▲ 글목록에 삭제버튼 하나 만들고삭제버튼 누르면 그게 담긴 박스를 서서히 사라지게 만들자는겁니다. 근데 그런 애니메이션을 만들기 위해선 자바스크립트 기능이 좀 필요할 것 처럼 보임. 저기 list/page.js 로 간다음에 저 내용들을 클라이언트 컴포넌트로 좀 바꿔줘야 할 것 같음. list/page.js 파일에다가클라이언트 컴포넌트로.. 2024. 11. 10. 이전 1 2 3 4 다음 728x90
