🚀 Week 4 Summary

[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.

---

[Search]

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
  

Elastic Search

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.
(디스크 자체에 저장)