2022_02_25

시간 측정 방법

• console.time(”keyword”)

• console.timeEnd(”keyword”)

  • time과 timeEnd는 () 안의 값이 같아야 시간 측정이 가능하다.

• const start = performance.now();

• const end = performance.now();

  • console.log(end - start) 와 같은 방법으로 측정한다.

FileReader

• Browser에서 가짜 url을 생성할 수 있다.

• 해당 브라우저에서는 생성한 url이 유효하지만 다른 브라우저에서는 존재하지 않는다.

• 위의 기능을 이용하여 이미지 preview를 storage를 거치지 않고 보여줄 수 있다.

  : 화면에 이미지가 보일 뿐 storage에는 업로드 되지 않은 상태이다.
  

• 이 때 가짜 url을 생성한 이미지들을 for문으로 uploadfile을 하게 되면 사진의 갯수 만큼 요청이 가기때문에 시간 소비가 늘어난다.

• 때문에 이러한 경우 Promise.all()을 사용하여 요청을 보내게 된다.

• 이러한 방식을 사용할 경우 Storage의 비용, 미리모기 속도의 향상을 가져올 수 있다.

• Blob : 사이즈카 큰 파일 타입을 의미한다.

PromiseAll

• 기본 문법 : Promise.all([])
  • 배열로 요청하기 때문에 결과값 또한 배열로 들어온다.
  • 모든 처리가 동시에 일어난다.
  • 때문에 기다리는 것도 Promise.all 에서 동시에 일어난다. (Promise.all 안의 각 Promise에 await을 거는게 아니라 Promise.all 자체에 await를 걸어야한다.)
• fulfiled : Promise에서 처리가 완료 된 상태
• rejected : 처리 중 오류가 발생한 상태
• pending : 처리중이라 기다리는 상태
• Promise를 여러개 요청하는 것 보다(for문과 같은 상황) Promise.all로 보내는 것이 더 빠르다.

** Promise.race() 라는 기능도 있다.

const results = await Promise.all(
      ["철수", "영희", "훈이"].map(
        (el) =>
          new Promise((resolve, reject) => {
            setTimeout(() => {
              resolve(el);
            }, 3000);
          })
      )
    );
    console.log(results);

Preload

• 미리 데이터를 받아두고 유저가 들어올 떄 빠르게 보여주는 방식
• useEffect를 이용하여 Image() 테그를 생성한다.
• useRef를 이용하여 상위태그의 child로 append 해준다.
• src에 링를 준 후 onload 시 스테이츠값을 준다.

  useEffect(() => {
      const img = new Image();
      img.src = url;
      img.onload = () => {
        setImgTag(img);
      };
    }, []);
  
    const onClickImagePreLoad = () => {
      if (imgTag) divRef.current?.appendChild(imgTag);
    };
  
  <div ref={divRef}></div>
  <button onClick={onClickImagePreLoad}>이미지 프리로드</button>

lazyLoad

• 특정 동작이 이루어졌을 때 해당 데이터를 다운
• 라이브러리를 사용하면 간단하게 사용할 수 있다.

webp로 확장자를 변경하면 이미지 다운로드 성능을 높일 수 있다.

• 이미지 업로드에 도움이 되는 라이브러리
  • react-beautiful-dnd
  • react-dropzone library
  • react-avatar-editor
• googlePageSpeed insights로 페이지의 실행속도를 분석할 수 있다.

algorithm

.toString(진법)

• 특정 데이타를 string으로 변환하는 동시에 () 안의 진법으로 바꿔준다.

parseInt()

• 원래의 진법으로 변환 (숫자 타입으로 받아온다.)

a = 125;
a = a.toString(3)

console.log(a)
// 결과값 : '11122'

a = parseInt(a, 3)

console.log(a)
// 결과값: 125