728x90 > 메모98 [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] 상세 페이지 만드는 방법 상세 페이지 (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. 헷갈리는 GET, POST 쉽게 정의 GET 요청 ( 정보를 받는 요청 / 데이터 가져오기 )의미: 서버에 정보를 요청해서, 서버에 있는 정보를 받아오는 방식이다.예시: 뉴스 웹사이트에 접속해서 기사를 볼 때, 브라우저가 서버에게 “기사 좀 보여줘!”라고 요청하는 것이 GET 요청.POST 요청 ( 정보를 보내는 요청 / 데이터 보내기 )의미: 내가 새로운 정보를 서버에 보내서 서버가 그 정보를 저장하거나 처리하게 만드는 방식이다.예시: 회원가입 시 이름, 이메일 등의 정보를 서버에 저장하고 싶을 때, “이 정보를 추가해줘!”라고 요청하는 것이 POST 요청.요약GET 요청: 서버에 있는 정보를 받아오는 요청.POST 요청: 새로운 정보를 서버에 보내는 요청.간단한 비유 정리GET 요청: "책을 빌려오는 것" (서버에서 데이터를 가져오기)P.. 2024. 11. 7. 이전 1 2 3 4 5 ··· 17 다음 728x90
