[TIL] Day28

6월 15일 목표

wysiwyg : 위지위그(WYSIWYG: What You See Is What You Get, "보는 대로 얻는다")는 문서 편집 과정에서 화면에 포맷된 낱말, 문장이 출력물과 동일하게 나오는 방식을 말한다. 이는 편집 명령어를 입력하여 글꼴이나 문장 형태를 바꾸는 방식과 구별된다. => 텍스트 에디터

라이브러리
react-quill
react-draft-wysiwyg
toast UI

import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";

export default function webEditorPage() {
  const onChangeContents = (value: string) => {
    console.log(value);
  };
  <div>
    작성자 : <input type="text" />
    <br />
    비밀번호 : <input type="password" />
    <br />
    제목 : <input type="text" />
    <br />
    내용 : <ReactQuill onChange={onChangeContents} />
    <br />
    <button>등록하기</button>
  </div>;
}

🔥 ReactQuil의 onChange는 개발자가 만들어 놓은 것
html의 onChange와 이름만 같을 뿐 전혀 다른 것이다!

ReferenceError: document is not defined
localStorage.getItem("")을 했을 때 없다고 나온 오류와 비슷한 것 같다
왜???

에디터가 document에 접근하는 코드를 가지고 있을 것이라...
서버에서 페이지를 미리 렌더링 하는 단계에서는
브라우저 상이 아니기 때문에 window나 document가 존재하지 않는데
window 또는 document object 를 선언하기 전이기 때문에
document가 선언되지 않았다는 에러가 발생

서버에서 렌더링 할 때 / 브라우저에서 렌더링 할 때 2개로 나누어야 함

서버에서는 react quill 를 import 하지 않고
브라우저에서는 react quill 를 import

어떻게? dynamic-import (next.js에서 제공)

기존 import 코드 변경 -> 프리렌더링 때는 import x / 브라우저에서 import o

import dynamic from 'next/dynamic';

const ReactQuill = dynamic( () => import('react-quill'), {
  ssr : false
})

html 태그가 보인다

dynamic import가 쓰이는 곳
!클릭하면 라이브러리가 실행되어야 할 때 사용 =>
사용하지 않는데 미리 import해두면, 성능에 좋지 않다.
: 코드 분할(Code Splitting)

리액트 폼과 함께 사용하기

1) 스테이트를 하나 더 만들어서 value값 저장하기
2) 수동으로 register 등록하기 => setValue사용하기

실제로사용해보면

헉!

태그가 그대로 보인다 🫣🫣🫣🫣🫣

dangerouslySetInnerHTML 속성을 사용하자
위험을 감수하고 HTML 태그를 추가할 때 사용하는 속성이며, __html 속성 값에 추가하려는 데이터를 입력해준다

🔥 div 및 span 태그로 dangerouslySetInnerHTML 를 사용한다면 반드시 빈 태그 형식으로 작성

하지만!!!
이와 같은 속성은 사용자의 민감 정보가 손쉽게 탈취당할 위험에 노출될 수 있다
javascript 와 HTML로 악의적 코드를 웹 브라우저에 심고 사용자 접속 시 그 악성 코드가 실행되도록 하는 것을 크로스 사이트 스크립트 (Cross Site Script / XSS)

예시 ) img태그에 onerror라는 속성을 더해, 해당 태그를 dangerouslySetInnerHTML 속성을 이용해 불러왔을 때 사용자에게서 중요한 정보를 빼내는 스크립트 실행

공격 코드가 들어있으면 자동으로 차단해주는 라이브러리를 이용하자
dompurify

<div
	dangerouslySetInnerHTML={{
		__html: Dompurify.sanitize(String(data?.fetchBoard.contents))
	}}
/>

Dom을 건드리는 라이브러리이기 때문에 프리렌더링 불가능
조건부 렌더링 사용하기

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

시큐어코딩을 위한 OWASP TOP10 확인하기
OWASP

SQL Injection ?
SQL쿼리문을 작성할때 조건을 통해 데이터를 주고 받는데, 이 조건을 직접 조작하여 공격하는 현재는 이것을 ORM을 사용해 막고 있음

Hydration Issue

 <div>
      <div style={{ color: "red" }}>작성자: {data?.fetchBoard.writer}</div>
      <div style={{ color: "green" }}>제목: {data?.fetchBoard.title}</div>

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

프리렌더링 할 때 css가 3개 -> 브라우저에 렌더링 할 때 div가 4개이니 css 안맞음