🐵 TIL 0126

📝 [Short Notes]

Instance of ___

• Sometimes, the server isn't able to catch the error.
• So using error instance of ___ helps to catch to error with force.
  

---

🗒 [Freeboard]

Presenter Component

• The comment section is drawn within the map() method. map() method enables to call particular section multiple times.
• But since there is only one modal, all the data are shared.
• For exmpale, all the password data of each 10 comments are all mixed up inside one modal.
• To prevent these data combination, there must be separate component for comment list.
  --> First, second, thrid ... comments should have its own data saving zone. Basically, all the states are getting separated.

---

🗂 [Layout Compromise]

• Layout is taking the role of whole UI structure of the project.
  --> Basically dividing the display screen in to header, navigation, banner, and footer. (or can be anything else)
• Can maintain a clear and simple structure in coding.

{props.children}

• Automatically sent.
• It's used within body tag inside the main layout.
  
• The main layout is fixed and the body contents are changing as the user moves the page. Body contents are the components that are shown on the screen.

Hidden_LAYOUT

• Can Hide specific layout

const HIDDEN_HEADERS = [
    "/12-06-modal-address-refactoring"]

• Here, we use square brackets, and inside, we put in the address of the page that we do not want the layer heard to appear.

const isHiddenHeader = HIDDEN_HEADERS.includes(router.asPath)

• Then via using includes() method and asPath method, which tells the page that the user's going to approach currently, the user can compare the values inside the arrray and asPath. Only when those values are different, the user can execute the layout and differ the display of each pages.

---

🥫 [Global Style]

First, the user must declare and inser globalstyle in _app.tsx.

import {Global} from '@emotion/react'
.
.
.
	<Global styles={globalStyles}/>

• So here, the user is importing the Global in emotion as a tag, and for the keyvalues, styles must be input.
• Global style is written in css.
  --> To pass this globalStyles to other pages, globalStyles should be inside the Global tag's value: style={globalStyles}.

import {css} from '@emotion/react'

const globalStyles = css`
    *{
        margin: 0px;
        box-sizing: border-box;
        font-size: 50px;
        font-family: "myFont";
    }

    @font-face {
    font-family: "myFont";
    src: url("/fontsscifibit/ttf");
    }
`;

• Global style is applied to every pages since it's "GLOBAL".
• The font size that's declared in this page affects rest of all components but if the user specifies the font-size into different size in other component, then that changed font-size is applied to that component.
• It's like placeholder or defaultValue that can be changed anytime if the user specifies.

---

🧃 [Fonts]

Fonts can be written in globalStyles.

@font-face {
    font-family: "myFont";
    src: url("/fontsscifibit/ttf");
    }

• Here, myFont is the fontName. (The fontName can be anything the user defines.)
  

Fallback-Font

• If the first input font is failed to be downloaded, the following fonts are applies. That's why user should write down at least 2 fonts in the font-family code to make sure the fonts work all the time.