안녕하세요

목차 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..

https://sakuraop.tistory.com/598 게시물 수정 기능 구현, 권한 없는 이용자 접근 제한하기 목차 1. 게시물 수정 라우터, API 생성하기 postId를 쿼리로 GET 요청을 보내 수정할 게시물의 데이터를 불러오기 수정 버튼을 클릭하면 /manage/newpost/1로 POST 요청보내기 DB에서 게시물 데이터 업데이 sakuraop.tistory.com 위의 게시물에서 이어지는 문제 해결 글입니다. (수정한 게시물로 redirect 하였더니 새로고침이 되지 않는 문제 발생) 게시물을 수정하였지만 redirect된 게시물에는 변화가 없습니다. 🔻ㅎㅎ를 지우고🔻 🔻게시물로 redirect 했더니 바로 반영이 안되는 문제🔻 업데이트한 게시물이 DB의 데이터와 다른 문제 발생 redi..

목차 1. 게시물 수정 라우터, API 생성하기 postId를 쿼리로 GET 요청을 보내 수정할 게시물의 데이터를 불러오기 수정 버튼을 클릭하면 /manage/newpost/1로 POST 요청보내기 DB에서 게시물 데이터 업데이트하기 작성된 게시물로 redirect 하기 2. 게시물 수정 권한을 확인하고, 권한이 없다면 돌려보내기 게시물 작성자의 id와 로그인 중인 user의 id가 일치하는지 확인 + 블로그 관리자인 경우(isBlogAdmin)에도 수정 권한을 가지도록 하기 수정 권한이 없는 경우에는 경고창을 띄우고 접근하려던 게시물로 redirect 하기 1. 게시물 수정 라우터, API 생성하기 게시물 작성 페이지 라우터: /manage/newpost 게시물 수정 페이지 라우터: /manage/ne..

목차 1. router 만들기 2. 라우터에 들어갈 컴포넌트기 만들기 3. quill 만들기 4. server에 quill에 작성한 데이터 전송 (request) 5. DB에 저장 6. 저장 결과 7. react-quiil이 content를 저장하는 원리 1. router를 만들어줍니다. /manage/newpost 경로에 라우터를 만들어줍니다. import Editor from "@/containers/Editor/Editor"; const NewPostRouter = async () => { return ( ); }; export default NewPostRouter; Router는 라우팅 역할만 맡도록 합니다. 2. /src/containers/Editor/Editor.tsx 컴포넌트를 만들어 줍..