728x90 분류 전체보기530 [Next.js] 상세 페이지 만드는 방법 상세 페이지 (detail) 만들기- 리스트 페이지에서 글 클릭하면 나오는 상세페이지 구현하기1. 글 제목을 누르면 2. 상세페이지로 이동하고 3. 그 페이지에선 DB에서 그 게시물을 가져와서 보여줌 Dynamic route 사용폴더 하나로 수많은 URL 생성/detail/1로 접속시 1번글 내용/detail/2로 접속시 2번글 내용/detail/3로 접속시 3번글 내용이렇게 보여줘야 함. 1) detail (상세페이지 URL) 폴더 하나 생성. 그리고 detail 폴더 안에 [작명] 해서 또 폴더 생성하기.detail 폴더 안에 - [id] 폴더- id 라고 작명했다. - 대괄호 써줘야 함. - URL 주소창 에다가 /detail/아무거나 입력했을 때 뜬다는 의미. 2) 그 다음 또 [작명] 폴더 안.. 2024. 11. 13. [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] 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. 삭제 기능 만들기 3 (query string / URL parameter) 보호되어 있는 글 입니다. 2024. 11. 11. 삭제 기능 만들기 2 (Ajax 추가 내용과 에러 처리) 0:47 삭제기능 만들어오라던 숙제를 같이 해보도록 합시다.나중에 혼자 코드짤 때도 제 코드 따라칠 것입니까 잘 안되어도 혼자 이것저것 뭐라도 해보는 과정에서 실력이 늡니다. 코드 따라치는건 학습이 아니고 타이핑 실력만 향상됩니다.기능부터 한글로 설명해보면 1. 삭제버튼 누르면 서버로 삭제요청 보냄 (URL, method도 정하기)2. 근데 어떤 게시물 삭제할지 게시물 _id도 보내야 삭제를 정확히 잘해줄듯요 3. 서버는 요청 들어오면 DB에서 그 게시물 삭제해줌 이러면 될 것 같으니 이거 그대로 코드로 옮겨봅시다. 1. 삭제버튼누르면 서버로 삭제요청보냄 ajax 이용해서 삭제버튼을 누르면저 URL (/api/post/delete) 로DELETE 메소드로 요청을 보냄. 이제 저 경로로 요청하면 서버 기능을 실행하.. 2024. 11. 11. 이전 1 ··· 10 11 12 13 14 15 16 ··· 89 다음 728x90
