⬇️ Main Note
💫 [Browser Storage]
- When I refresh the browser or move to other pages, the log-in process wasn't saved .
- This was because accessToken was saved in Browser, not in the browser storage.
- To be specific, when the browser is refreshed, all the html, css, js are newly drawn and states and globalstates are also refreshed. This means the accessToken is newly built so it is unable to maintain the previous accessToken.
--> Refreshing => re-requesting to the frontend to draw the display.
--> Previous accessTokens are getting reset.
- To make sure the log in process is maintaining throughout the browser when the user logs in, the accessToken must be saved in browser storage itself.
🌟 Types of Browser Storage
- Permanent Saving
- Able to assign the expiring date.
- Permanent Saving
- Even after exiting the browser, the data are saved.
- Temporal Saving
- Disappears once the user exits the browser.
- Only the data is shown when the browser is operating currently.
--> Doesn't disappear after the refresh.
--> So by using
state, the accessToken could be saved to setAccessToken and use the same accessToken over and over again until the expiration.
⬇️ Able to save the accessTokens like this
💫 [Login-Rendering Process]
When request is sent to frontend server from the browser, first the frontend server does "Pre-rendering" inside frontend server. After pre-rendering, frontend responds to the browser and displays on the screen. Then by "diffing", meaning after comparing between pre-rendering on frontend and browser displayed screen, "hydration" happens. Hydration is applying the differences between two.
- When pre-drawing in frontend server, there wasn't a storage to save like "localStorage" in browser's storage.
- So here we use
typeof window !== 'undefined' only to those where the execution is happenig in broswer and access to localStorage.
- Also, we can use
useEffect : Once the display is drawn,
useEffect function is operated.
--> useEffect- After the component is fully drawn, this function is operated. (ex) cursor blinking in the input box after the component is executed.)
Local --> Closure --> Global
💫 [Closure - HOC / HOF]
There are bunch of diverse frtontend servers: the server where the users access, the server where the managers access, and the server where the sellers access, etc.
On managers' server, the controllers can view who has been logged in to the server, or the posts that have been created.
I'm making a two big different server, the server where the logged-in users see and the guest users see.
--> With useEffect, when accessToken doesn't exist-meaning that when the user hasen't logged in-, the page is moved to the log-in page.
At this point, the pages that require user-log-in, the logic must be written at the top of all pages.
--> Here, I used HOC: Higher Order Component.
☽ Stack Structure
: First In Last Out
: Last In First Out
- Piled up in a sequence of execution
❁ Closure: Inner function that can access to otter function.
- Returns JSX(react HTML)
- Before executing a particular component, executing the preceding-upper component.
- One HOC made, and the developer can add that HOC infront of the log-in needed components => if the uesr has logged in, authorization is given to the user for the page in a simple way!
- Since HOC is used with components,
with should be put infront of the name.
- Does not Return JSX(react HTML)
- Advantage: No need to type in
event.target.id every single time, so the code gets shorter.
- Back then using material-ui or ant-design, the id is sent when component is used.
- Since id should be a unique value that doesn't overlap with others, when the id is hacked, there might be a serious problem in big services.
--> HOF prevents these problems.