[React.js] 이미지 업로드 기능 (feat. heic 파일)

복학 전 방학에 사진 콘텐츠 제작과 관련된 서비스를 제공하는 회사에서 프론트엔드 개발자로 일을 했던 적이 있다.

( 간단하게 말했지만 'AI 기술로 커머스 판매 제품 콘텐츠 제작을 돕는 툴을 개발'하는 회사라고 할 수 있겠다. )

 

 

아무튼.. 이 서비스에서는 사진 업로드 기능이 필수적이었는데, 구현된 코드를 테스트 해보던 도중 갑작스럽게 작은 문제점(?)을 발견했고,
결론적으로는 구글링을 통해 문제를 해결했다. ( 감사합니다 구선생님들..♡ )

 

 

특정 사진들이 업로드 되지 않는 문제였는데 확장자가 heic 인 경우 기존코드로 업로드가 되지 않았다. 이 날 처음 알게 된 확장자...HEIC...

 

heic... 너 뭐냐..?

 

 

어쨋거나 잘 해결했기에 블로그를 통해 한 번 정리해두면 나와 같은 문제를 겪는 사람들에게 도움이 될 것이라고 생각했고,

나 또한 이후에도 여러방면으로 잘 활용할 수 있을 것 같아 글을 작성하게 되었다.

 

 

---

HEIC 파일 포멧과 발견에 대하여...

HEIC(High Efficiency Image Container) 파일 포멧은 고급 압축 기술을 기반으로,

공간을 덜 사용하면서 JPEG보다 높은 품질로 이미지를 저장한다고 한다.

또한 iOS11부터 Apple의 표준 이미지 형식으로 사용됐다고 한다.

 

또 나만 몰랐지...

어도비사이트에 자세한 내용이 정리 되어 있길래 링크를 첨부한다.

 

 

 

문제를 발견하게 된 경로는....

 

 

평소에는 카톡으로 주고받거나 구글에 검색하면 나오는 평범한 제품 사진들을 저장하여 업로드 했었는데,

그 날은 직접 제품을 촬영해서 업로드 해봐야겠다고 생각해서 (내가 왜 그랬을까...)

아이폰으로 촬영한 사진을 맥북에 에어드롭으로 전송하여 그 이미지를 업로드 했다.

 

 

이런 과정으로 평소와 달리 heic 파일을 업로드 하게 된 것이였다..!

바로 팀장님께 말씀드렸고 나의 업무로 배정되었다(?).... 

 

 

피할 수 없다면 즐...즐겨...!

 

이왕 맡게 된거.. 깔끔하게 성공시키자 ! 하며 수정했던 기억이 난다.

 

 

---

아무튼 ! Heic 포멧을 포함한 파일 업로드 방법은 다음과 같다.

heic2any 패키지를 사용하여 변환해주었는데 자세한 내용은 npm공식홈페이지에서 확인 할 수 있다.

 

 

파일 확장자명을 체크한 후 소문자로 변환하여 heic 포멧인지 확인한 후, 맞다면 변환하고 아니라면 바로 DataURL로 읽도록 작성하였다.

 

const [base64, setBase64] = useState("");
 
const handleChange = async () => {
    const reader = new FileReader();

    let file = imgRef.current.files[0];
    const fileName = file.name.split(".")[1].toLowerCase(); //확장자명 체크를 위해 소문자 변환 HEIC, heic

    if (fileName === "heic") {
      await heic2any({ blob: file, toType: "image/jpeg" })
        .then(function (resultBlob) {
          file = new File([resultBlob], file.name.split(".")[0] + ".jpg", {
            type: "image/jpeg",
            lastModified: new Date().getTime(),
          });
          reader.readAsDataURL(file);
        })
        .catch(function (x) {
          console.log(x);
        });
    } else reader.readAsDataURL(file);

    reader.onloadend = async () => {
      setBase64(reader.result);
    };
  };

 

blob 으로 file 객체를 넣어주고 toType에는 변환하고자 하는 파일의 포멧을 적어주면 된다.

그렇게 변환한 결과로 다시 파일객체를 생성한다.

 

new File(bits, name, {options});

 

• bits : blob 객체 (변환된 파일 넣어주기)
• name : 파일의 이름
• options : 파일의 선택적인 특성 

 

생성한 파일 객체를 DataURL로 읽어 useState를 사용해 값을 저장하였다. 

이제 이 저장한 값을 img 태그에 넣어주면 된다.

 

 

업로드 한 파일과 변환 후 파일을 console로 찍어보았다.

 

heic to jpeg 예시 이미지

 

변환이 잘 된 것을 확인할 수 있다 !

 

업로드 이미지가 잘 나타나는 것을 확인할 수 있다.

 

이미지도 잘 업로드 되었다.

 

변환하는데 시간이 조금 걸리기 때문에 (한 1~2초 ?)
실제 서비스에 사용할 때에는 중간에 스피너나 업로드 중이라는 메세지를 띄우면 더 좋을 것 같다 !

 

---

 

정리해놓고 보니 그렇게 어려운 문제는 아니었지만 그 때의 나는 꽤 오랜시간 왜 안되지 ? 이젠 되겠지 ? 를 반복했다....

 

울고 있는 나의 모습... 슬퍼하는 나의 모습....

 

아무튼 그 때 잘 해결해놓은 덕분에 동아리 활동이나 다른 프로젝트에 참여시에 파일 업로드 관련하여 잘 활용하고 있다 !

비슷한 문제를 겪고 있는 사람이 있다면 내 글이 조금이나마 도움이 되었으면 좋겠다.

 

 

첫 게시글은 이 정도로 하고,

앞으로도 꾸준히 정리해야겠다 ! ٩(⚈ᴗ⚈)و