안녕하세요

답글 구현 결과 GIF Depth controlled GIF 목차 1. 기존의 一자 댓글 형태 2. 댓글에 답글이 달리는 목표 형태 3. 어떻게 구현할까? 4-1. 목표대로 구현하기 위해 조건을 정리해보면 4-2. (Option) 페이지네이션 적용하려면 클라이언트 컴포넌트로 구현 5. 구현 방법 설명 6. 실제 사용한 코드 (주석 등등은 간소화 됨) 7. Depth를 활용해서 계단처럼 만들려면 1. 기존의 一 자 댓글 형태 기존에는 댓글을 저장할 때 parentPostId를 comment에 함께 저장했습니다. postId에 해당하는 댓글을 요청하여 시간순서로 댓글을 나열하기만 합니다. [ { _id: new ObjectId("653fca0cc5e5048246973a3c"), parentId: 3, // ..

https://sakuraop.tistory.com/614 에서 이어집니다. ( 안 봐도 상관 없습니다. 이미 quill은 만들고 나서 highlight 적용 방법을 찾는 것이기 때문에... ) 목차 1. highlight.js 설치 2. ReactQuill 에 highlight.js 적용 3. Custom Toolbar에 적용 1. highlight.js 설치하기 블로그 게시물의 본문에는 코드도 올라갈 것이기 때문에 일반 글과 코드 영역을 구분해야겠죠. highlight.js 를 설치하고 ReactQuill에 적용시켜 보겠습니다. 코드를 감지하여 아래와 같이 코드를 읽기 쉽도록 도와주는 라이브러입니다. https://www.npmjs.com/package/highlight.js?activeTab=rea..

목차 1. imgur 회원가입 및 로그인 2. imgur APP 등록하기 3. input으로 이미지파일 선택하기 4. imgur에 이미지 파일 업로드 POST 요청 보내기 ++ 어??? 나는 요청이 안되는데요? 5. ReactQuill 에 ref 속성 주입하기 6. ReactQuill에 URL 로 이미지 삽입하기 1. imgur 회원가입 및 로그인 https://imgur.com/ 위 링크로 이동하여 회원가입을 하고 로그인도 해줍니다. 2. imgur APP 등록하기 https://api.imgur.com/oauth2/addclient 로그인 하고 위 링크로 이동한 뒤에 이런 식으로 작성해주면 APP을 생성할 수 있습니다. https://imgur.com/account/settings/apps APP을 ..

목차 1. 수정할 error 목록 2. 수정 내용 1. import/named 원인: 리팩토링 과정에서 type의 경로가 잘못 지정되었다. 해결: 경로를 올바르게 수정. 2. import/order 원인: 규칙에 따라 order가 재정렬 된 모양이 error 조건과 다른 듯 하다. 해결: NavHead 위로 Inter와 ReactNode 객체를 이동시킨다. 3. react/no-danger 원인: 태그에 존재하는 위험한 속성이니 조심해야한다. JS 스크립트를 삽입하는 XSS 공격에 노출될 수 있다. 해결: 1. 규칙을 warning하지 않도록 바꾼다. 2. 해당 라인을 무시하도록 한다. 4. react/jsx-no-useless-fragment 원인: 불필요한 fragment가 존재한다. child를 하..