🌥 TIL 0221

⬇️ 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 react-quill.
How to useyarn add react-quillAfter installing, we should import these things:import ReactQuill from 'react-quill'; import 'react-quill/dist/quill.snow.css';Then, it is now able to use react-quill by writing <ReactQuill/> .
Then, we should use dynamic import method.
instead of two imports written up there, use

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

📢 Dynamic Import

Next js has the characteristic of pre-rendering. Before executed to the browser, inside the fontend server, the code is drawn precedingly.

Next js is react server side framework that supports server-side-rendering, so the code is executed and drawn inside the frontend server first, and then displayed in the browser with html, css, and javascript from frontend server.
--> This process is callded "Pre-rendering".

Comparing these two structure execution is called diffing, and executing to the display as a result was called hydration.

But while pre-rendering, document or window doesn't exists. So it's unable to execute web editor.
--> To solve this problem, react-quill is imported only when it is working on the browser.
--> This is called dynamic import.

Then it is successfully displayed in the browser.

🌵 [XSS]

When using web editor with hook-form, it was hard to make computer recognize it as register, and it wasn't automatically recognized as onChange. So by using setValue() , we put the value inside and made it recognize changeEvent by trigger() and told hook-form about it.

At the end of each front and back part of data, there were tags added and saved to the database. The problem was, <p><strong><br>...etc were remaining when we tried to get the data to detail page.
--> To remove them, we used optinal chaining.

Also to make sure the data are recognized as tag function itself, not as string, we used dangerouslySetInnerHTML .
--> But easy to get hacked. (トークンを奪取可能)

To prevent hacking, dompurigy sanitized the part where the security is needed.
--> Since this should only be operated in browser, process.browser && is used.
--> "Secure Coding"

🌵 [Hydration CSS Error]
After diffing process is operated, tag from server and tag from the browser are being compared. Here, error might occur while hydration, which executing the code to the browser that was once drawn in the server.
To solve this error, the number of tag in browser and the server should match.
--> This one was simple to solve: The condition was made to show empty tag if it wasn't the browser.