[Library] 웹에디터

✅ 웹 에디터를 사용하는 이유

위지위그(WYSIWYG)

What You See Is What You Get 보는대로 얻는다. 문서 편집 과정에서 화면에 포맷된 낱말, 문장이 출력물과 동일하게 나오는 방식으로, 기존의 textarea같은 일반적인 텍스트가 아니다.

• 주의사항

  • 스크립트 공격
    정보의 탈취가 일어날 수 있다.
    XSS 공격방지 라이브러리 사용한다.
    Dompurify.sanitize로 어느정도 예방가능하다.

  • sql 인젝션
    sql문으로 공격하는 방식으로 비밀번호를 1234 || 1===1
    true가 되어 비밀번호를 넘겨주게 된다.

  • owasp top 10으로 해킹방법 확인

✅ 웹에디터의 사용

• 불러온 값 사용

  • 태그 그 자체를 읽어줘

    코드예시

    <div>
       dangerouslySetInnerHTML={{
                    __html: `${data?.fetchUseditem.contents}`,
                  }}
     </div>

    기존의 저장된 html코드를 읽어서 그려준다.

• 추가사항

  • 다이나믹 임포트
    화면이 다그려지고나서 실행되는 useEffect와 달리 그려지기 전에 브라우저에서 실행되게 한다.
    브라우저에서 임포트 하는 방식 (프리렌더링에서 안함)

  • 코드사용

    dynamic(async () => await import("react-quill"), { ssr: false });
    ssr(서버사이드렌더링)에서는 안할거다.

  • 다른방식 (브라우저 / window 있을시 실행)
    if(process.broswer)
if(typeof window !== "undefined")

  • import를 브라우저에서 사용해야하는 라이브러리가 있어 위의 코드처럼 사용해줘야 작동한다. (react-quill)