# Hydration-Issue

sju4486

📒 오늘 공부한 내용 🔍수업목차 >[27-1] 웹 에디터 (React-quill) [27-2] react-hook-form과 함께 사용하기 [27-3] 크로스 사이트 스크립트 (XSS) [27-3] Hydration Issue ✅ 웹 에디터 (React-quill) React-Quill Docs React-Quill 이외에도 React Draft Wysiwyg, TOAST UI Editor 등의 웹 에디터 라이브러리가 널리 쓰이고 있다. 📂 웹 에디터 적용하기 React-Quill 을 설치 >tsx import ReactQuill from 'react-quill'; im

zitto

💡 웹 에디터 적용하기 > React-Quill : textarea의 단점들을 보완해 stylish 하게 내용을 작성할 수 있도록 도와주는 웹 에디터 라이브러리 > 설치명령어 yarn add react-quill > [실습] ReactQuil의 onChange는 개발자가 만들어 놓은 커스텀 요소로, 이름만 같을 뿐 jsx의 onChange요소와는 전혀 다른 개념! > 그러나 > 에러발생! 이유는? Next.js 는 기본적으로 서버사이드 렌더링을 지원하는데, 서버에서 페이지를 미리 렌더링(pre-rendering) 하는 단계에서는 브라우저 상이 아니기 때문에 window나 do

nanyong0214

크로스 사이트 스크립트(XSS) > 다른 사이트의 취약점을 노려 Javascript와 HTML로 악의적 코드를 웹 브라우저에 심고 사용자 접속 시 그 악성 코드가 실행되도록 하는 것을 `크로스 사이트 스크립트(XSS)`라고 한다. >예시 `onerror`는 img태그를 정상적으로 불러오지 못했을 때 실행되는 요소 이를 이용하여 사용자의 accessToken을 훔쳐서 해커API주소로 보낼 수 있음 dompurify > 공격 코드를 자동으로 막아주는 라이브러리 `yarn add dompurify` `yarn add -D @typs/dompurify` 사용방법 주의사항: `dompurify`도 서버사이드 렌더링 에러가 발생하기 때문에 조건부 렌더링을 걸자. OWASP TOP10 > Open Web Application Security Project. 오픈소스 웹 애플리케이션 보안 프로젝트 주로, 웹 관련 정보노출이나 악성파일 및 스크립트,

hmds1606

웹에디터(Web Editor) 웹에디터란 글씨를 진하게 꾸미거나 기울이기 등 꾸미는 도구들을 통틀어서 말한다. 웹에디터 종류로는 매우 많은데 react-quill, ract-draft-wysiwyg, toast UI Editor를 많이 사용한다. react-quill을 사용하여 실습을 해봤는데 위와 같이 import를 하여 사용한 결과는 오류가 발생하게 되었다..ㅎ 그 이유는 웹에디터는 브라우저에서 실행되기 때문에 서버에서 프리렌더링시에는 읽을 수 없도록 그냥 import를 해주면 안되고 서버렌더링과 브라우저렌더링을 따로 나눠주는 dynamic import를 해줘야한다. dynamic import를 할 수 있는 도구는 Next.js에서 제공해 주는 기능으로 아래 사진과 같이 작성해주면 된다.

space086

📔 학습목표 웹 에디터 >> Web-Editor 로컬스토리지 보안 >> Cross-Site-Script(XSS) 하이드레이션 CSS >> Hydration-Issue 웹 에디터를 wysiwyg (위즈위그) 라고 부른다 대표적으로 많이 쓰이는 라이브러리들 (+toast-ui-editor) 리액트퀼에 쓴 온체인지는 html의 속성이 아닌 react quill을 만든 사람들이 만든 속성 css도 따로 import해야함 > <span style="font-size:20px; font-weight:700

songinho96

1교시 웹에디터: wysiwyg 라고 불린다. 많이 쓰이는 wysiwyg toast-ui-editor 가 좋은듯. React-Quill 을 사용하겠다. ![

huiju

React 웹 에디터 WYSIWYG : What You See Is What You Get(보는 대로 얻는다) > Next.js를 사용하고 있다면 > 이런 에러가 뜨게 되는데 Next.js는 서버사이드 렌더링(프리랜더링)을 지원하지만, 서버에서 페이지를 미리 렌더링하는 단계에는 브라우저상이 아니기 때문에 window나 document가 존재하지 않는다 이 문제를 해결하기 위해서는 document가 선언된 시점이후에 React-Quill을 import 해야 함! > => Next.js의 **`dynamic impo

j00b33

⬇️ Main Note https://docs.google.com/document/d/1bsi97CNsnVy5k6XfxorijPWWQkKM1YgHWL1rD4kDdrw/edit 🌵 [Web Editor] I used to use input/text area for typing the text on browser. The problem was, when I pressed enter, the line wasn't changing. By using web editor, it is now able to change the color, size, and even the styles of fonts. --> Here, I used

junejae_1625

Web-Editor 게시판을 작성할때 글자의 스타일을 줄 수 있는 웹 에디터이다. 글자의 크기, 진하게, 기울기, 밑줄 등 원하는 스타일을 지정해 줄 수 있다. 웹 에디터에는 많은 종류의 라이브러리가 있는데 대표적으로는 React-draft-wyswiyg과 React-quill이 있으며, React-quill을 사용해 보았다. > yarn add react-quill import "react-quill/dist/quill.snow.css";