🦩 TIL 0208

⬇️ Main Note
https://docs.google.com/document/d/1JkTenBt5y05beZn0A_ZjezbQCrQNyjmUz-M7qkuLRnw/edit

---

🎀 [UUID]

: Universally Unique ID
: Random ID generator

• It doesn't overlap with other IDs.
• Used when the user wants to give a random id instead of using index for key in map().

---

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

---

🧠 [useRef]

useRef is used when connecting the tag with variables.
ex) input tag made, assign in variable, make the cursor blink

19-03-image-ref

//goal : onClick 하면 fileRef.click()이 되도록 연결시키는것
import { ChangeEvent, useRef, useState } from "react";
import { useMutation, gql } from "@apollo/client";
import {
  IMutation,
  IMutationUploadFileArgs,
} from "../../src/commons/types/generated/types";
import { checkFileValidation } from "../../src/commons/libraries/utils";

const UPLOAD_FILE = gql`
  mutation uploadFile($file: Upload!) {
    uploadFile(file: $file) {
      url
    }
  }
`;

export default function ImageValidationPage() {
  const fileRef = useRef<HTMLInputElement>(null);

  const [image, setImage] = useState("");
  const [uploadFile] = useMutation<
    Pick<IMutation, "uploadFile">,
    IMutationUploadFileArgs
  >(UPLOAD_FILE);

  const onChangeFile = async (event: ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    console.log(file);

    const isValid = checkFileValidation(file);
    if (!isValid) {
      return;
    }

    try {
      const result = await uploadFile({ variables: { file } });
      console.log(result.data?.uploadFile.url);
      setImage(result.data?.uploadFile.url || "");
    } catch (error) {
      alert(error.message);
    }
  };

  const onClickImage = () => {
    fileRef.current?.click();
  };

  return (
    <div>
      <div
        style={{
          width: "100px",
          height: "100px;",
          backgroundColor: "#5080b6",
          color: "white",
          fontSize: "30px",
        }}
        onClick={onClickImage}
      >
        select
      </div>

      <img src={`https://storage.googleapis.com/${image}`} />

      <input
        style={{ display: "none" }}
        type="file"
        ref={fileRef}
        onChange={onChangeFile}
        //화면에만 안보일뿐 코드 자체는 존재함
      />
    </div>
  );
}

//image 받아온걸 보드에 같이 image를 넘겨줘야함

---

🌸 [Algorithms - new Date()]