포트폴리오 랜딩페이지를 아무 생각없이 만들었는데
잘 됨..
왜지...
컨셉을 잡았으니 보랏보랏했던 css를 싹 갈아엎어야한다는 것은 함정
오늘은 알고리즘 테스트 내일은 중간고사인건 흐린눈..
오늘의 목표
-
이미지 저장 과정을 알려주세요! image-Process
-
이미지 데이터베이스에 저장하면 안됨? cloud-Storage
-
그 이미지는 문제가 있어요. Validation
포트폴리오 리뷰
firebase를 가지고 포트폴리오 꾸려보기
Map을 사용 할 시 key에 index를 쓰는건 단점이 많은데
따라서 key값에 index대신 uuid를 넣을 수 있다.
파이어베이스를 다룰 컴포넌트에서 uuid를 사용하기 위하여
설치 후 하기 내용을 임폴트함
import { v4 as uuidv4 } from "uuid";uuid 라는건 범용 고유 식별자라는 뜻
v4를 uuidv4로 바꾸어서 코드내에서 사용 하면 된다
옛방식인(commen.js)을 써도 무관하다.
타입스크립트 버전도 제공하기에 설치하면 된다
(yarn add-dev @types/uuid)
- axios의 문제점
useQuery는 렌더링 과정에서 바로 여청을 하는 반면에
axios는 useEffect는 렌더 이후 mount 될떄 요청을 하기 때문에 느리다는 단점이 있다.
-보완하기 위해 ReactQuery
rest-api의 느린 요청을 해결하기 위해 axios를 대신해 ReactQuery를 사용 한다. 연습이나 한두번 쓴다면 그대로 쓰면 되지만 아예 프로젝트를 진행해야한다면 ReactQury를 쓰면 된다.
- axios를 useEffect에 사용 하는 이유는
awaiyt을 하면 요청을 완료하기전까지 아래코드로 내려가지 않아
화면이 그려지지 않는 문제가 있음.
이를 해결하기 위해 렌더링한 후 useEffect를 실행해 요청을 보내도록 했다.
1. 이미지 저장 과정을 알려주세요! image-Process
이미지 저장 과정에선 일반적인 웹 서버의 단계와 달리
스토리지라는 다른 용량이 큰 컴퓨터가 필요하다
메모리도 크고 cpu가 크면 컴퓨터가 보통 좋은 것인데
스토리지는 용량이 조금 더 큰 컴퓨터이다.(클라우드)
용량이 큰 이유는 여기에 이미지와 동영상 등을 저장시키는 용도로 쓰이기 떄문이다.
스토리지는 이미지와 동영상을 주소를 이용하여 정보를 주고 받는다.
브라우저에서 input을 통하여 받은 파일을 변수에 담아 저장하여
uploadFile이라는 api로 보내는 것
보통 백에서는 이렇게 전달 받은 파일을 스토리지로 이동될 수 있게 만들어둔다.
그러고나서 백에서 저장된 파일은 내려받을 수 있는 주소를 브라우저로 알려준다.
이렇게 받은 Url(string형태)을 스테이트에 담도록 설정해주면 된다.
만약 사진 업로드를 하겠다고하면 그 파일(게시물을 각각)데이터를 스테이트에 담고
그걸 create 요청을 통하여 게시물에 관련된 내용은 백에 전달하고 그걸 디비에 담아 게시물이 된다.
file은 별도로 스토리지에 담기고 Url만 디비로 저장 되는 것이다.
이렇게 되면 게시물 등록이 완료되고 등록이 완료됨을 브라우저로 전달된다...
실습
프로젝트 폴더에 yarn add apollo-upload-client 을 설치하고
app.js에
import { createUploadLink } from "apollo-upload-client";을 import 하고 upload 기능을 쓸 수 있게 client에서 링크를 넣는것이 아닌 upload를 통해서 받게 만들어둔다
2. 이미지 데이터베이스에 저장하면 안됨? cloud-Storage
useRef
태그를 변수에 넣어서 쓸수 있음
const fileRef = useRef<HTMLInputElement>(null);
<input type="file" ref={fileRef} onChange={onChangeFile} />이렇게 변수를 선언한 뒤 jsx에 넣어주면
레프의 타입을 고르고
기초값은 Null로해야한다
fileRef.current.click()이렇게 파일 자체를 변수 코드로 클릭할 수 있게 된다.
왜 굳이 이렇게 클릭하는 것이냐면
파일선택이나 선택된 파일없음을 변경하는 것이 어렵다
그래서 원래의 버튼이나 태그는 display:none으로 하여 보이지 않게 하고
다른 디자인을 넣은 버튼을 만들어두고 그 버튼을 누르면 원래의 파일선택이 눌러지게
눈속임용 코드를 짤수 있는 것
const onClickImage = () => {
fileRef.current?.click();
};
옵셔널 체이닝으로 있으면 클릭할 수 있게 해준다
if (!file?.size) {
Modal.error({ content: "파일이 없습니다." });
return;
}
if (file.size > 5 * 1024 * 1024) {
// 5메가바이트이상이면 업로드 불가라는 뜻.
Modal.error({ content: "파일이 5MB를 초과합니다." });
return;
}
if (!file.type.includes("jpeg") && !file.type.includes("png")) {
Modal.error({ content: "jpeg 혹은 png파일만 가능합니다." });
return;
}이렇게 사진 파일 업로드에 대한 제한을 거는데
이 제한이 너무 많아지면 관리하기가 힘들어진다
이럴때 라이브러리 안에 파일을 만들어 따로 관리한다.
사진에서 사진확장자를 선택하는 방법에는 if문 외에 또다른 방법이 하나 있는데
파일을 입력 받는 인풋 태그 안에 accept="image/jpeg" 를 넣으면
아예 jpeg만 파일을 등록할 수 있음.
- 5메가 바이트이상의 사진을 거부하려면?
