useRef / browser-image-compression / Next.js Image

• browser-image-compression
• Image (next.js)
• useref

browser-image-compression

사진 업로드 시, 파일이 워낙 크다보니 여러모로 성능저하가 발생을 하기 시작했다.
피드백으로 받은 개선사항에서도 성능/속도부분이 3할을 차지하기 때문에 개선이 필요했다.

따라서 browser-image-compression라는 라이브러리를 사용하여, 자동으로 이미지 사이즈를 압축시켜버렸다.

• browser-image-compression는 자바스크립트 기반으로된 라이브러리로 사용법이 직관적이여서 많이 사용하는 것 같다.

사용법은 굉장히 간단하다.

const handleImageChange = async (e: any) => {
    let file = e.target.files;
    if (file.length === 0) {
      return;
    } else {
      const {
        currentTarget: { files },
      } = e;

      const options = {
        maxSizeMB: 1, //* 허용하는 최대 사이즈 지정
        maxWidthOrHeight: 500, //* 허용하는 최대 width, height 값 지정
        useWebWorker: true, //* webworker 사용 여부
      };

      let theFile = files[0];

      try {
        const compressedFile = await imageCompression(theFile, options); 
        // 압축된 이미지를 리턴받는다.(imageCompression)

        const reader = new FileReader();
        reader?.readAsDataURL(compressedFile); // 여기에 compressedFile 변수를 넣어주면 끝
        reader.onloadend = (finishedEvent) => {
          const {
            currentTarget: { result },
          }: any = finishedEvent;
          setImageUpload(result);
        };
      } catch (error) {
        console.log(error);
      }
    }
  };

Next.js에서 제공하는 Image태그

위와같이 이미지 압축을 진행하고, 추가로 할 수 있는 부분을 더 찾아봤는데,
바로바로 next.js의 Image컴포넌트를 사용하면 이미지 최적화 기능을 사용 할 수 있다는 사실을 발견하여 바로 사용해봤다.

참고로 Image 컴포넌트의 장점은 다음과 같다.

• Improved Performance : 언제나 디바이스 사이즈에 맞게 최적화된 이미지 제공

• Visual Stability : width,height를 명시하여 이미지 만큼의 공간 확보 -> CLS방지
  여기서 CLS는 현재 보고있는 페이지에 발생하는 레이아웃의 변경이다.

• Faster Page Loads : 이미지가 뷰포트에 들어왔을 경우만 로드(Lazy load) -> 페이지 로드 속도 향상

• Asset Flexibility : 외부에 저장되어 있는 이미지까지 리사이징 가능

  사용법은 굉장히 간단한 편이다.
   import Image from 'next/image';
   
   
    <Image
             src={item?.imgUrl}
             alt="postImg"
             width={252}
             height={300}
             priority={true}
             onClick={saveScroll}
             className="image-box"
             quality={75}
           />

browser-image-compression, Image 태그 사용 전

browser-image-compression, Image 태그 사용 후

useref

카카오맵 api를 사용하려고보니, document.getElementById('map')를 통해서 불러올 수 밖에 없었다.
하지만 리액트 환경에서는 가급적이면 사용을 하면 안되기 때문에, useRef를 사용해서 우회를 해보려고 한다.

dom 객체 접근방법은 useRef로 우회함

const container = document.getElementById('map');

->   const container = useRef(null);
->  const map = new kakao.maps.Map(container.current, options); 
//여기에 .current를 붙여주면됨

    <div
      id="map"
      ref={container}  // 연결
      style={{ width: '620px', height: '650px' }}
    ></div>