복학 전 방학에 사진 콘텐츠 제작과 관련된 서비스를 제공하는 회사에서 프론트엔드 개발자로 일을 했던 적이 있다.
( 간단하게 말했지만 'AI 기술로 커머스 판매 제품 콘텐츠 제작을 돕는 툴을 개발'하는 회사라고 할 수 있겠다. )
아무튼.. 이 서비스에서는 사진 업로드 기능이 필수적이었는데, 구현된 코드를 테스트 해보던 도중 갑작스럽게 작은 문제점(?)을 발견했고,
결론적으로는 구글링을 통해 문제를 해결했다. ( 감사합니다 구선생님들..♡ )
특정 사진들이 업로드 되지 않는 문제였는데 확장자가 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로 찍어보았다.
변환이 잘 된 것을 확인할 수 있다 !
이미지도 잘 업로드 되었다.
변환하는데 시간이 조금 걸리기 때문에 (한 1~2초 ?)
실제 서비스에 사용할 때에는 중간에 스피너나 업로드 중이라는 메세지를 띄우면 더 좋을 것 같다 !
정리해놓고 보니 그렇게 어려운 문제는 아니었지만 그 때의 나는 꽤 오랜시간 왜 안되지 ? 이젠 되겠지 ? 를 반복했다....
아무튼 그 때 잘 해결해놓은 덕분에 동아리 활동이나 다른 프로젝트에 참여시에 파일 업로드 관련하여 잘 활용하고 있다 !
비슷한 문제를 겪고 있는 사람이 있다면 내 글이 조금이나마 도움이 되었으면 좋겠다.
첫 게시글은 이 정도로 하고,
앞으로도 꾸준히 정리해야겠다 ! ٩(⚈ᴗ⚈)و
'Programming > React JS' 카테고리의 다른 글
| [React.js] 별점 기능 star rating (직접 구현) (5) | 2023.04.03 |
|---|
복학 전 방학에 사진 콘텐츠 제작과 관련된 서비스를 제공하는 회사에서 프론트엔드 개발자로 일을 했던 적이 있다.
( 간단하게 말했지만 'AI 기술로 커머스 판매 제품 콘텐츠 제작을 돕는 툴을 개발'하는 회사라고 할 수 있겠다. )
아무튼.. 이 서비스에서는 사진 업로드 기능이 필수적이었는데, 구현된 코드를 테스트 해보던 도중 갑작스럽게 작은 문제점(?)을 발견했고,
결론적으로는 구글링을 통해 문제를 해결했다. ( 감사합니다 구선생님들..♡ )
특정 사진들이 업로드 되지 않는 문제였는데 확장자가 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로 찍어보았다.
변환이 잘 된 것을 확인할 수 있다 !
이미지도 잘 업로드 되었다.
변환하는데 시간이 조금 걸리기 때문에 (한 1~2초 ?)
실제 서비스에 사용할 때에는 중간에 스피너나 업로드 중이라는 메세지를 띄우면 더 좋을 것 같다 !
정리해놓고 보니 그렇게 어려운 문제는 아니었지만 그 때의 나는 꽤 오랜시간 왜 안되지 ? 이젠 되겠지 ? 를 반복했다....
아무튼 그 때 잘 해결해놓은 덕분에 동아리 활동이나 다른 프로젝트에 참여시에 파일 업로드 관련하여 잘 활용하고 있다 !
비슷한 문제를 겪고 있는 사람이 있다면 내 글이 조금이나마 도움이 되었으면 좋겠다.
첫 게시글은 이 정도로 하고,
앞으로도 꾸준히 정리해야겠다 ! ٩(⚈ᴗ⚈)و
'Programming > React JS' 카테고리의 다른 글
| [React.js] 별점 기능 star rating (직접 구현) (5) | 2023.04.03 |
|---|
