1 ๊ทธ๋ฆฌ๊ธฐ
=> Render
2 ๊ทธ๋ฆฌ๊ณ ๋ ๋ค
=> componentDidMouont
ex) input์ฐฝ์ ๊ทธ๋ ธ๋๋ฐ ๊ทธ๋ฆฌ๊ณ ๋ ๋ค์ Input์ฐฝ์ cursor๋ฅผ ๊น๋นก๊ฑฐ๋ฆฌ๊ฒ ํ๊ณ ์ถ์
--> ๊ทธ๋ฌ๋ฉด ์ผ๋จ render ๊ทธ๋ฆฌ๊ณ ๋์ ๊ทธ๋ ค์ง component์ ์ปค์๋ฅผ ๊น๋นก๊ฑฐ๋ ค์ผํ๋๊ฑฐ์
3 ๊ทธ๋ฆฌ๊ณ ๋ ๋ค ๋ณ๊ฒฝ๋์๋
=> componentDidUpdate
-๋ง์ด ์ฌ์ฉํ์ง ์์
4 ๊ทธ๋ฆฌ๊ณ ๋ ๋ค ์ฌ๋ผ์ง ๋
=> copmonentWillUnmount
ex) ์ฑํ
์ฌ์ดํธ ๋ฐฉ์์ ์ฃผ๊ณ ๋ฐ๊ณ ๋ง์ ํ๊ณ ์์
--> ์ด๋ ๋ฐฑ์๋ ์ปดํจํฐ์์๋ ๋๊ตฌ๋ ๋๊ตฌ๊ฐ ์ด๋ค ์ฑํ
๋ฐฉ์ ์ ์๋์ด์๋ค๋ ์ฌ์ค์ ์๊ณ ์์
--> ์๋ก๊ณ ์นจ ์ํด๋ ๋ฐ์ดํฐ๊ฐ ๊ณ์๊ณ์ ์
๋ฐ์ดํธ๊ฐ ๋๋ ์ค์ธ๊ฒ
--> ๋๊ฐ ๋๊ตฌ์ ์ฐ๊ฒฐ์ด ๋์ด์๋์ง ์ฒดํฌ๋ฅผ ํ๊ณ ์๊ธฐ ๋๋ฌธ์ ๊ฐ๋ฅํจ
It is useful when a frontend developer makes a program without any backend developers.
Public API looks like the table below. (github)
When the user types particular address in browser, the browser connects to frontend computer and gets HTML and CSS.
At the moment, let's say that the user is uploading an image in the browser, and there is an API that uploads file in "backend":
When user tries to upload a file, input-file-selection page pops out. Once the user selects a file and clicks OK button, the data is sent.
Then variables are set and the file that's saved in that variable can be put into uploadFile-API and sent to backend computer. Then the data is saved.
Q. THen is that data saved in data base?
No, it isn't.
1. Images or files take big data-capacity, so those data that take big data capacities should be saved into separate area: Storage.
2. So the backend computer sends the data to storage and the storage sends back the URL of the saved data.
3. Then that URL is returned to the browser.
4. After frontend computer sets the URL into state, it requests for API.
--> For example, the user saves the data into setMyImage and requests backend computer for createBoard-API.
5. After all these processes, data is uploaded to the data base.
--> Still, the image itself isn't the data that is being saved. The URL of the image is being saved in the data base.
6. File goes to the storage and URL goes to data base.
So basically the image is able to be shown only when the address exists. When the address is saved into storages, then the user can take out the address and display it from the storage.
Or else, there is another method to save these URL and file at once: Image Table.
--> Via using image table, the user can manage the whole file itself.
And those storages are usually called as Cloud.
Cloud Provider
Data are saved as table format.
-- So when showing the image to the users by displaying on screen, it accesses eto GCP and displays the image.
When we go to Naver.com and check network, images are displayed after the texts are shown. That's because the images are re-drawn after re-downloading and getting it.
Mostly backend computer takes a big role in searching. Once the frontend computer requsts for searching a word, the backend copmuter responses with the wanted word. then frontend receives it and displays to the screen.
: This database scans the whole thing.
Disk based database
So to make sure the program runs in an efficient way, elastic search database can be used.
Hello
World
Disk based database
Memory based database
Memory based: Temporal saving.
--> Once the computer is shut down, all the data are gone.
--> Fast since it doesn't have to permanently save everything.
(์ผ๋จ ์งฑ๋ฐ์๋๋ ๊ฐ๋
)
Disk based: Permanent saving.
--> Doesn't get deleted even when the computer is shut down.
--> Slow since it has to save the data safely.
(๋์คํฌ ์์ฒด์ ์ ์ฅ)