Next.js
예전에도 배웠지만 만들기전 생각한 페이지의 기능들과 필요한 것들을 미리 글로 적어서 표현해보고
그걸 바탕으로 코딩을 하라.
이 얘기는 정말 처음 주구장창 하던 나한테 생각하는 길을 열어준 계기이기도 하다. 어떻게 해야할까 감 잡기 힘들 때 조금씩 적고 그려가며 구상한 뒤 관련 된 정보들을 찾아가면서 만들어내는 과정이 정말 뿌듯하다.
게시판 만들기
간단하게 정리하자면
- HTML페이지 만들기
- 그 페이지 방문하면 DB에서 데이터 꺼내기
- 꺼내온 데이터를 HTML에 넣기
전체 리스트 보여주는 페이지는 앞서 진행했떤 db 데이터 불러오기를 그대로 진행한 뒤
데이터 안에 있는 post들을 map으로 쫙 뿌려서 보여주면 그냥 완성 된다.
상세 페이지
다른 사이트들의 상세 페이지들의 URL을 보면 보통 끝에 아이디 값이나 분류 할 수 있는 값을 넣는데 그렇게 만들어보자.
/detail/{게시글id}같이 말이다.
그럼 page랑 폴더를 계속 만들어서 게시글마다 늘려야할까?
아니다 dynamic route 문법을 쓰면 비슷한 페이지를 여러개 만들 필요가 없다.
detail이란 폴더를 만들어 라우팅 될 url을 하나 만든후 detail안에 [작명]을 이용해 폴더를 하나 더 만들자.
그러면 []가 입력된 폴더는 detail 뒤에 어떤게 오든 []폴더 안에 있는 page를 보여달라는 뜻이다. 작명의 의미는 개발 환경에 맞춰서 만들자
깨알 db : 저번에선 db에서 데이터를 모두 가져올 때 find()를 이용했는데 하나만 찾으려면 findOne({찾을 document정보})으로 검색해보자 / ex) findOne({title:"테스트"})
다만 위 처럼 title 같은 걸로 찾을 경우 중복값이 있을 테니 몽고 db에서 데이터를 저장할 때 할당해주는 id를 찾아 검색해보면 좋다. id 검색할 땐 document정보 부분에 _id: new ObjectId("<id숫자>")를 넣으면 되는데 ObjectId는 몽고db에서 import하는 부분을 잊지 말자.
그럼 해당 글을 데이터를 보여주려면 id를 알아와야 하는데 어떻게 할까?
방금 폴더를 만들 때 []을 이용해서 만들었는데 []로 만든 폴더 안의 page.js에서 props를 파라미터로 받아보자.
그리고 실제 console.log로 찍을 시 우리가 알던React 문법의 props가 아닌
이런 값이 뜬다 여기서 params는! URL에서 detail/ 뒤에 들어오는 값이다.
detailId는 내가 만든 폴더 명이다
그럼 게시글에 link나 a태그를 활용해서 클릭시 각 게시글의 id값이 /detail/{id}로 붙어서 이동시켜 버리면 해당 id값을 detail로 넘길수 있고 해당 id값을 db에 요청해서 화면에 뿌려주면 완료
- dynamic route를 이용하자
- url뒤에 어떤 값이든 허용하려면 폴더명을
[작명]로 만들자 []로 만든 해당 페이지는 해당 라우팅이 되는 URL 부분을props의params로 받을 수 있다.- 받은 값을 가지고 데이터를 조회하자.
