๐Ÿš€ Week 4 Summary

j00b33ยท2022๋…„ 2์›” 10์ผ
0

CodeCamp FE 05

๋ชฉ๋ก ๋ณด๊ธฐ
21/33

[Component Life-Cycle]

1 ๊ทธ๋ฆฌ๊ธฐ
=> Render

2 ๊ทธ๋ฆฌ๊ณ  ๋‚œ ๋’ค
=> componentDidMouont
ex) input์ฐฝ์„ ๊ทธ๋ ธ๋Š”๋ฐ ๊ทธ๋ฆฌ๊ณ  ๋‚œ ๋’ค์— Input์ฐฝ์— cursor๋ฅผ ๊นœ๋นก๊ฑฐ๋ฆฌ๊ฒŒ ํ•˜๊ณ  ์‹ถ์Œ
--> ๊ทธ๋Ÿฌ๋ฉด ์ผ๋‹จ render ๊ทธ๋ฆฌ๊ณ  ๋‚˜์„œ ๊ทธ๋ ค์ง„ component์— ์ปค์„œ๋ฅผ ๊นœ๋นก๊ฑฐ๋ ค์•ผํ•˜๋Š”๊ฑฐ์ž„

3 ๊ทธ๋ฆฌ๊ณ  ๋‚œ ๋’ค ๋ณ€๊ฒฝ๋์„๋•Œ
=> componentDidUpdate
-๋งŽ์ด ์‚ฌ์šฉํ•˜์ง„ ์•Š์Œ

4 ๊ทธ๋ฆฌ๊ณ  ๋‚œ ๋’ค ์‚ฌ๋ผ์งˆ ๋•Œ
=> copmonentWillUnmount
ex) ์ฑ„ํŒ… ์‚ฌ์ดํŠธ ๋ฐฉ์—์„œ ์ฃผ๊ณ ๋ฐ›๊ณ  ๋ง์„ ํ•˜๊ณ  ์žˆ์Œ
--> ์ด๋•Œ ๋ฐฑ์—”๋“œ ์ปดํ“จํ„ฐ์—์„œ๋Š” ๋ˆ„๊ตฌ๋ž‘ ๋ˆ„๊ตฌ๊ฐ€ ์–ด๋–ค ์ฑ„ํŒ…๋ฐฉ์— ์ ‘์†๋˜์–ด์žˆ๋‹ค๋Š” ์‚ฌ์‹ค์„ ์•Œ๊ณ  ์žˆ์Œ
--> ์ƒˆ๋กœ๊ณ ์นจ ์•ˆํ•ด๋„ ๋ฐ์ดํ„ฐ๊ฐ€ ๊ณ„์†๊ณ„์† ์—…๋ฐ์ดํŠธ๊ฐ€ ๋˜๋Š” ์ค‘์ธ๊ฒƒ
--> ๋ˆ„๊ฐ€ ๋ˆ„๊ตฌ์™€ ์—ฐ๊ฒฐ์ด ๋˜์–ด์žˆ๋Š”์ง€ ์ฒดํฌ๋ฅผ ํ•˜๊ณ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๊ฐ€๋Šฅํ•จ


[Open-API]

It is useful when a frontend developer makes a program without any backend developers.
Public API looks like the table below. (github)

  • API-key: Exists to prevent million times of requests.
    --> Able to use only when the user signed up to the API and gets the key of it.

[Firebase]

  • Firebase is useful for frontend developers who work without backend developers.
  • Frontend devloper can directly save data into database.
  • Since there is not backend computer that secures the data, it might seem dangerous. But via using firebase, the google provides those securities.
    --> BAAS : Backend As A Service
    : Lend backend as a service
  • To use BAAS, the user must access to the homepage and write the source code.
    --> It's simple and easy to use when making a simple service.
    --> No need for complicated source code, but only frontend codes.
  • Also, firebase is usually used for testing the web page, so the developer can extend developing when it works successfully.
  • Firebase use noSQL.
    --> collection usage.
    --> Collection saves the data as an object form.

[Image]

Structure

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.

Storage (Cloud)

And those storages are usually called as Cloud.

Cloud Provider

  • AWS, GCP, AZURE are most known cloud providers.
  • Computer is lent to these cloud providers.
  • It can save the file and also upload the file.

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.

How it works

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.

  • The images are downloaded at their own speed, so the time it takes to be displayed are different.

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.


Types of Database

Full Table Scan

: This database scans the whole thing.

  • ex) When the user is using searching method to look up for the posts that contain "Italy", full table scan database is scanning all the millions of posts.
  • It's inefficient way to do so.
  • Disk based database

So to make sure the program runs in an efficient way, elastic search database can be used.

  • Inside the database, the words are separated as tokens in the table.
    --> ex) "Hello Word" => Hello World
  • Then the words of row are saved as a number so that the user can take out that specific number of row, which contains same words.
  • Each words are seen as tokens, so this database action is called as tokenizing.
  • This is way much faster.
  • Disk based database

Redis

  • High traffic === High connection volume
    --> More the traffic goes higher, more the searching keywords overlap.
  • When things start to overlap much, new database is created: Reis.
  • In this database, the searching keywords are saved in the table.
  • "Cashing in redis" => Temporally save the keyword.
  • Memory based database
    --> Fast

Disk based vs. Memory based

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.
(๋””์Šคํฌ ์ž์ฒด์— ์ €์žฅ)

profile
์ฝฑใ…†l

0๊ฐœ์˜ ๋Œ“๊ธ€