안녕하세요

구현 순서 1. Link 태그를 이용하여 카테고리를 클릭하면 해당 url 로 이동하도록 합니다. 2. 라우터에서 searchParams를 전달받아 props로 전달합니다. 3. Props로 전달받은 데이터로 페이지에 카테고리 이름을 표시합니다. 4. 게시물 목록 api에 searchParams를 포함하여 GET 요청을 보냅니다. 5. DB에서 query로 검색한 게시물 목록을 반환합니다. 6. 게시물에 데이터를 전달합니다. 1. Link 태그를 이용하여 카테고리를 클릭하면 해당 url 로 이동하도록 합니다. return ( {subCategories.map((sub) => { const { _id, title } = sub; return ( - {title} ); })} ); pathname로 이동할 주..

목차 1. 기존 api 라우트 방법 vs Next13 2. 기존 dynamic route params 가져오는 방법 vs Next13 3. 기존 응답 방법 vs Next13 ( req.json(), searchParams 사용법 ) 4. nextauth 적용 방법 1. 기존 api 라우트 방법 vs Next13 기존 방식 src/pages/api 폴더 내에 생성한 폴더와 파일 구조로 api 라우팅을 할 수 있습니다. 'http://localhost:3000/posts/10' 이 주소로 'GET'이나 'POST' api 요청을 보내면 됩니다. [postId].ts 파일 내부에서는 if 문을 통해서 요청 방식에 따라 분기를 나눕니다. const handler = async (req: any, res: any..

전체 기능 설계 목차 댓글 기능 구현(1): https://sakuraop.tistory.com/601 1. 전체 기능 설계 2. 유저/게스트에 따라 Form 다르게 하기 3. 댓글 작성기능 구현 4. 댓글 리스트 구현 댓글 기능 구현(2) 5. 댓글 수정/삭제 구현 (유저/게스트/관리자에 따라 수정/삭제 권한 다르게 하기) 5. 댓글 수정/삭제 구현 (유저/게스트에 따라 수정 권한 다르게 하기) 구현 방법 간단 요약 관리자는 모든 버튼 가능 유저는 자신 댓글 버튼, 게스트 댓글 버튼 가능 게스트는 게스트 댓글만 가능 분기는 게스트, 유저, 관리자 세가지 입니다. 수정/삭제 버튼 visible 여부 게스트: 유저 댓글에 대해서 수정/삭제 버튼 hide 유저: 자신의 댓글에 대해서만 수정/삭제 버튼 vis..

목차 1. 전체 기능 설계 2. 유저/게스트에 따라 Form 다르게 하기 3. 댓글 작성기능 구현 4. 댓글 리스트 구현 댓글 기능 구현(2): https://sakuraop.tistory.com/602 5. 댓글 수정/삭제 구현 (유저/게스트/관리자에 따라 수정/삭제 권한 다르게 하기) 1. 전체 기능 설계 로그인/게스트 댓글 작성 로그인 유저와 비로그인 유저 모두 DB에 저장하는 데이터는 동일합니다. 하지만 로그인 유저의 경우에는 id와 password 입력을 필요로 하지 않습니다. 로그인을 구분하면서도, 데이터 형식은 유지하기 위해서 아래와 같이 구성합니다. 로그인: password: "", isLoggedIn: true, 게스트: email: "", isLoggedIn: false 2. 유저/게스..