오늘의 목표
- Image Process
- Cloud Storage
- Image Validation
파이어베이스를 적용해봤는데, 파이어베이스 자체가 조금 느려서 첫 페이지 렌더링이 버벅대는 것을 알 수 있다. 이럴 땐, _app.tsx에 선언된 파이어베이스를 빼서 따로 폴더를 만들어서 빼놓고 파이어베이스를 사용하는 페이지(index.tsx)에서만 import 시켜서 사용하자. 이렇게 하면 그 페이지를 들어갔을 때 파이어베이스에서 데이터를 받아오므로 첫 페이지 렌더링에 영향을 미치지 않는다.
비단 파이어베이스 뿐만 아니라, 나중엔 다운로드 받아서 보여줘야 할 것들이 더 많아질 텐데 그럴 때 이런 방법을 사용하면 좋을 듯 하다.
또 다른 방법으로는 next/dynamic 를 이용하면 특정 함수가 실행될 때 동적인 import가 가능해진다. 함수가 실행되기 전에는 import가 일어나지 않기 때문에 페이지 접속 속도가 개선된다.
1. Image Processing
웹 사이트에 접속을 할 때, 보통 이미지나 폰트는 다운로드 속도가 느려서 가장 마지막에 다운된다.
검색창에 네이버 주소를 넣고 접속 시 일어나는 일
- 프론트 엔드 서버로 주소창에 입력한 주소로 요청을 보낸다.
- www.naver.com html 파일을 받아온다.
- html 코드 안에서 연결된 js, css 파일을 요청 후 받아온다.
- img태그의 src 속성을 통해 해당 url로 접속하여 다운로드 받아온다.
이전에 브라우저에서 백엔드로 데이터(text)를 요청하고 백엔드는 해당 요청을 받아 DB에서 데이터를 가져온다는 것을 배웠다. 근데 이미지는 text가 아닌데 어떻게 가져올까?
BLOB (Binary Large Object)이라는 것이 존재한다.
사진이나 이미지는 수많은 픽셀들로 이루어져 있고 그 픽셀들은 RGB값으로 색상이 결정된다. 그리고 RGB의 단위는 0,0,0 ~ 255,255,255 이다.
text 같은 경우 용량이 매우 작은 편이지만, 사진이나 비디오 같은 것들은 용량이 매우 크기 때문에 따로 전용 저장 공간이 있는 경우가 대부분이다. 그리고 그런 전용 공간을 제공해주는 서비스가 바로 Cloud-Storage이다.
2. Cloud Storage
대표적인 Cloud-Provider(클라우드 제공업체)로 AWS(Amazon Web Service), GCP(Google Cloud Platform), Azure(MicroSoft)가 있다.
예전에는 사진과 같이 용량이 큰 파일들을 DB의 BLOB을 이용해 저장했었지만, 현재는 클라우드 서비스를 이용을 많이 하는 추세이다.
- 브라우저에서 이미지 등록 버튼 클릭을 통해 함수가 호출된다.
- 백엔드로 이미지를 업로드하라는 요청이 전달된다.
- 백엔드에서는 받은 요청으로 빌린 클라우드 저장공간에 이미지를 저장한다.
- 클라우드에서는 저장 공간에 이미지를 저장하고 해당 저장 공간의 주소를 백엔드로 보내준다.
- 백엔드에서는 받은 주소를 다시 브라우저로 보내준다.
- 브라우저에서는 이미지 주소를 포함한 전체 정보를 담은 게시글의 등록 버튼을 클릭해 함수가 호출된다.
- 백엔드로 게시글 업로드하라는 요청이 전달된다.
- 백엔드에서는 받은 요청의 데이터를 DB의 테이블에 조인시킨다.
- 만약 브라우저에서 게시글 상세를 조회한다면, DB의 테이블에 있는 데이터가 백엔드를 통해 브라우저로 전달되고 fetch해서 이미지의 주소를 포함한 데이터를 보여준다.
- 이미지의 주소를 통해 브라우저에서 바로 클라우드의 이미지를 다운로드 받아온다.
현재 이 방식은 문제점이 두 가지 정도 있는데 뭔지 생각해보자..
3. Image Validation
이미지 검증은 왜 필요할까?
백엔드에서 준비가 되지 않았는데, 너무 큰 파일을 보낸다면 문제(과부하 같은)가 될 수 있다. 그 전에 프론트에서 검증해줄 필요가 있다.
그럼 어떻게 검증을 할까?
제일 기본적인 검증으로는 <input type="file" /> 태그의 속성 중에 accept라는 속성이 있는데 여기에 "image/확장자명"를 써주면 파일의 확장자를 강제할 수 있다.
추가 습득 지식
배열과 함수에도 optional chaining 적용이 가능하다.
// 배열
myList?.[0] // myList가 존재하면 0 번 째 인덱스 접근
// 함수
myFunction?.(인자); // myFunction이 존재하면 인자를 넣어서 실행피치 못하게 고유 ID가 없는데 임의로 필요할 땐? uuid 라이브러리 사용해보자!
npm에서 uuid 검색!
<input type="file" />이 존재한다... 이걸 지금까지 몰랐다니..
업로드 할 수 있는 api 만들어 달라고 백엔드에 요청
useRef를 이용하면 이벤트 전달이 가능?
