안녕하세요

목차 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. 유저/게스..

목차 1. DOMpurify란 XSS 공격과 DOMpurify.sanitize() 2. DOMpurify 설치 Next.js - TypeScript 3. 에러 발생: Next.js DOMPurify.sanitize() shows TypeError: dompurify__WEBPACK_IMPORTED_MODULE_5___default.a.sanitize is not a function 해결 => isomorphic-dompurify 설치 4. 에러 발생: Error: Hydration failed because the initial UI does not match what was rendered on the server. 원인 1: html 구조가 이상하면 나타나는 문제 원인 2: server의 pre-re..