게시글 작성 시 이미지 복사 붙혀넣기로 이미지 첨부 가능하도록 구현 #624
Conversation
|
⚡️ Lighthouse report!
|
| const handlePasteImage = (event: ClipboardEvent<HTMLTextAreaElement>) => { | ||
| const file = event.clipboardData.files[0]; | ||
|
|
||
| if (file.type.slice(0, 5) === 'image') { |
There was a problem hiding this comment.
혹시 해당 file.type이 뭐라고 나오나요??
찾아도 관련없는 것들이 많이 나오네요
참고하신 자료가 있다면 공유 부탁들려요!
There was a problem hiding this comment.
'image/png' , 'image/webp'와 같이 나와요!
There was a problem hiding this comment.
참고한 자료는 따로 없고 console.log를 통해 파일의 정보를 확인하고 코드를 작성했었습니다 😃
|
|
||
| import { convertImageToWebP } from '@utils/resizeImage'; | ||
|
|
||
| export const uploadImage = async ({ |
| }) => { | ||
| if (!inputElement) return; | ||
|
|
||
| const webpFileList = await convertImageToWebP(imageFile); |
There was a problem hiding this comment.
오 혹시 정말 사소하게 궁금한 부분인데, 변환하는데 몇초가 걸리는지 궁금해요! 만약 시간이 걸리는 작업이거나, slow 3g 환경이라면 변환 중.. 같은 문구나 로딩 스피너를 보여줘도 좋겠네요!
There was a problem hiding this comment.
너무 짧은 시간이라서 따로 설정을 안해줘도 될 것 같아요. 그리고 미리보기는 webP로 변환된 이미지가 아닌 처음 입력받은 이미지로 미리보기 URL을 만들어서 변환 시간은 포함이 안되도록 했습니당
메모리 6배 부하, slow3G일 때
걸린 시간 : 19ms , 0.019초
메모리 부하 X, slow3G일 때
걸린 시간 : 8ms , 0.008초
메모리 부하 X, 노 쓰로틀링일 때
걸린 시간 : 6ms , 0.006초
There was a problem hiding this comment.
제로의 제안으로 webp로 이미지 변환 속도를 측정해보았습니다 ~
fe-리뷰요청
|
fe-리뷰완 |
🔥 연관 이슈
close: #602
📝 작업 요약
⏰ 소요 시간
40분
🔎 작업 상세 설명
적용된 동영상
2023-09-15.1.46.35.mov
🌟 논의 사항
크루들과 이야기 해보고 싶은 부분을 적어주세요.