31) FileReader ?

이희주·2022년 6월 21일

FileReader lazyload preload promise.all

React

오늘 수업 내용

이미지 미리보기

이미지를 보기 위해서는 이미지 경로(주소)가 필요한데, 이미지 서버에 이미지를 등록하고 등록한 이미지 주소를 불러와야 다른곳에서도 이미지를 불러올 수 있었다

하지만 이미지를 올려놓고 다시 뒤로가기를 하면 이미지 서버에는 이미지가 올라가지만, 사용되는 곳은 없기 때문에 데이터 낭비와 서버 과부하가 오게 된다

그래서 이미지 주소를 서버에서 가져오는게 아니라, 미리보기 용으로 만들어주는 방법을 사용 !

const onChangeFile = (event: ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (!file) {
      alert("파일을 첨부해주세요");
      return;
    }

    // FileReader : 파일과 관련된 다양한 기능을 가지고 있음 ! 그중에 파일을 읽어서 url 주소로 만들어줄거야
    const fileReader = new FileReader();
    fileReader.readAsDataURL(file);
    // 파일로 url을 만들어주기
    fileReader.onload = (data) => {
      // 파일이 다 만들어지면 결과가 data에 들어옴(data.target.result 라는 이름으로)
      if (typeof data.target?.result === "string") {
        console.log(data.target?.result);
        setImageUrl(data.target?.result);
      }
    };
  };

임시 url로 api 요청하기

  const onClickGraphqlApi = async () => {
    // 1. upload file api 요청
    const resultFile = await uploadFile({ variables: { file } });

    // 2. upload file api 받아오고 url만 꺼내기
    const url = resultFile.data.uploadFile.url;

    // 3. createBoard 요청
    const result = await createBoard({
      variables: {
        createBoardInput: {
          writer: "이망고",
          password: "1234",
          title: "제목",
          contents: "내용",
          images: [url],
          //images는 배열로 들어간다!!
        },
      },
    });
    console.log(result);
  };

Promise & Promise.all()

// Promise
	const onClickPromise = async () => {
    	const result1 = await new Promise((resolve, reject) => {
      		setTimeout(() => {
        		resolve("https://dog1.jpg");
      		}, 1000);
    	}).then((res) => console.log(res));
      
        const result2 = await new Promise((resolve, reject) => {
              setTimeout(() => {
                  resolve("https://dog2.jpg");
              }, 3000);
          }).then((res) => console.log(res));
     };


// Promise.all()
	const onClickPromiseAll = async () => {
		const result = await Promise.all([
			setTimeout(() => {resolve("https://dog1.jpg")}, 1000)}).then((res) => console.log(res));
      		setTimeout(() => {resolve("https://dog2.jpg")}, 3000)}).then((res) => console.log(res))
		])
	};

Promise

result1, result2 순서대로 실행됨 (4초정도)

Promise.all()

all 안에 들어있는 함수들을 동시에 실행해서 약 3초의 시간이 소요됨

fileReader를 사용해서 이미지를 등록할 때, Promise.all을 이용해서 이미지를 한번에 여러장 등록 할 수 있다

promise.all() - map 참고

	const onClickPromiseAll = async () => {
		const result = await Promise.all(["http://storage.url1.jpg",
		"http://storage.url1.jpg", "http://storage.url1.jpg"].map((el)
			=> new Promise((resolve, reject) => {
					setTimeout(() => {
						resolve(el)
					}, 3000)
			})
		))
	};