Editor

웹 에디터에는 여러가지 종류의 Editor 가 존재한다.

일단 여러가지 Editor 가 존재하지만, 우리는 react-quill 을 사용해본다.

작동안됨!!!!
ReferenceError: document is not defined

import ReactQuill from 'react-quill'

const WebEditorPage = (): JSX.Element => {
  const onChangeContents = (): void => {
    console.log('나는 에디터다')
  }
  return (
    <form>
      작성자: <input type="text" />
      <br />
      비밀번호: <input type="password" />
      <br />
      제목: <input type="text" />
      <br />
      제목: <ReactQuill onChange={onChangeContents} /> <br />
      <button>등록하기</button>
    </form>
  )
}

나타낼수 있도록 하는방법

useEffect: 안됨
process.browser: 안됨

process.browser ?
<ReactQuill onChange={onChangeContents}/> <br /> :
<></>

여기서 알수 있는것은 import 자체에 문제가 있다는것을 알 수 있다.

`dynamic import`

기존 browser 는 frontend 에서 prerendering 한 html 을 받는다.

[ browser ] ---> [ frontend server ]
                      |
[ brower ] <----   prerendering

내가 원하는 시점에 import 할 수 있는 기능 next/dynamic 의 dynamic 을 사용하면 된다.

--- dynamic import ----

[ browser ] ---> [ frontend server ]
                      |
[ browser ] <-- dynamic import - "not prerendering"

dynamic import 는 비동기 로 작동하며, 필요한 시점에 해당 기능을 가져오는 역할을 한다.

처음부터 필요없는 모든 기능을 다운받기 보다는 필요한 시점에 가져오는 효율적인 기능이다

즉,

document -> react-quill -> react-quill 조작

이러한 순서로 진행되어야 하는데, document 에 react-quill 이 생성되기 전에 불러와져서 문제가 된다.

이때, dynamic import 를 사용한다면, runtime 시 모듈을 import 할 수 있다.

SXX

mutation {
  createBoard(createBoardInput: {
    wrtier: "철수"
    title: "안녕하세요"
    password: "1234"
    contents: "<img src='#' onerror='console.log(localStorage.getItem(\"accessToken\")); const aaa '>
  }) {
    _id
  }
}

OWASP Top 10 4년 혹은 3년마다 해킹 관련 해서 TOP10 알려주는 사이트

SQL Injection 의 이해


[ browser ] ---비밀번호---> [ server ] -- [ db ]
             9898 || 1===1    ORM     |
                              ODM     |
                                      |
                                  SQL 공격
                             검사1) email == a@a.com
                             검사2) pass === 1234 || 1===1 맞나?

하이드레이션 문제점

prerendering 시 browser 상에 존재하지 않고 frontend server 에서 작동한다. 이러한 부분에서 발생하는 문제가 있다. prerndering 시 최적화 를 위해 조건문으로 typeof window !== "undefined" 를 사용하여, 조건문으로 compnent 를 추가한다면, 이전에 그렸던 component 를 참고하여 그린다.

이러한 참고로 인해 색상이 변경된다든지 하는 issue 가 발생할 수 있다.

이것 외에도 SPA 로 인한 hydration 의 문제점이 더 있다.

사실 react 는 서버로 부터 받은 주소가 아닌 browser 자바스크립트를 읽어서 해당 주소에 맞는 화면을 그려주는 방식이다.

브라우저 동작 방식은 html 을 가장 먼저 server 로 부터 요청을 한다. 그리고 html 문서를 읽으며 css, javascript 를 읽어 server 에 요청하는 방식이다.

이렇게 js, css 를 받은이후 브라우저의 화면이 rendering 된다.

그러므로, 첫 접속시 느릴수 없는 태생적 이유가 존재한다. 첫화면이 나올때 까지 걸리는 시간을 TTV(Time To View) 라 부른다.

Next.js 는 서버로 부터 prerendering 된 page 를 받고, 이후 js 를 받은이후 react 를 입히는 작업(hydration) 을 하게 된다.

즉, 첫 Page는 이미 prerendering 된 html 을 받으므로, 첫 페이지 접속시 느린 react 의 단점을 극복했다.

TTY 를 최소한으로 하며, 빠르게 화면을 보여줄 수 있는 방법이 무엇일까? 생각한 방법이 바로 prerendering 이다.

TTI(Time To Interect)

             요청
brower  ------------>
        <-------------
        prerendering HTML
          HTML 의 <script><link> 파일 요청
brower  ------------>
        <------------
         JS(공통), CSS 코드 다운로드
brower  ------------>
        <------------
         JS(공통), CSS 코드 다운로드

번외

resolutions

내가 사용하는 library 의 version 을 지금 내가 사용하는 react 버전으로 사용하도록 한다.