๐ฅ ๋ฌธ์ ๋ฐ ์ง๋ฌธ
์ฌ์ฉ์ ํ์ ์ธ์ฆ ์ด๋ฏธ์ง ์ ๋ก๋ ๊ธฐ๋ฅ ๊ตฌํ
MVP ๊ตฌํ ๋ด์ฉ ์ค ํน์ ์๊ฐ ์ฌ์ฉ์ ์ธ์ฆ์ ์ํ ์ด๋ฏธ์ง๋ฅผ ์
๋ก๋ํ๋ ๊ธฐ๋ฅ์ ๋ด๋นํ๊ฒ ๋์๋ค...!
์ ํ ๊ฐ์ฌ๋์ ๊ฐ์๋ฅผ ํ ๋๋ก ํ์ํ ๋ถ๋ถ์ ์ถ๊ฐํ๋ฉฐ ์ฝ๋๋ฅผ ์์ฑํ์๋ค.
๊ฐ์ ์ฝ๋๋ ๋ค์๊ณผ ๊ฐ์ด UploadContainer, Input Styled component๋ก ๊ตฌ์ฑ๋์ด์๋ค.
โโโ UploadContainer: onClick, onDrop, onDragEnter, onDragLeave, onDragOver โโโ โโโ Input: onChange
ํด๋น ์ฝ๋์ ๊ฒฐ๊ณผ๋ ํ์ผ์ UploadContainer๋ด๋ถ์ ๋๋๊ทธํ๊ฑฐ๋ ํด๋ฆญํ๋ฉด ํ์ผ์ด ์
๋ก๋๋๋ฉด์ ํ์ผ๋ช
์ ๋ณด์ฌ์ค๋ค. ๊ทธ๋ ๋ค๋ฉด ์ด๋ฏธ์งํ์ผ๋ง! ์ฌ๋ ค์ ์ฌ๋ฆฐ ์ด๋ฏธ์ง๋ฅผ ๋ณผ ์ ์๊ฒ ๊ตฌํํ ์ ์๋ ๋ฐฉ๋ฒ์ ์์๊น?
๐ข ํด๊ฒฐ ๊ณผ์
'์๋ฐ์คํฌ๋ฆฝํธ ์ด๋ฏธ์ง ๋ฏธ๋ฆฌ๋ณด๊ธฐ', 'input type="file" ๋ฏธ๋ฆฌ๋ณด๊ธฐ'์ ๊ฐ์ ํค์๋๋ฅผ ํด๋ฆญํ๋ฉด ๋ง์ ๊ตฌํ๋ฐฉ๋ฒ์ด ์๋ค. ๊ทธ ์ค ๋๋ FileReader ๊ฐ์ฒด๋ฅผ ์ฌ์ฉํ์ฌ ์ฝ๋๋ฅผ ์์ฑํ์๋ค.
FileReader๋ฅผ ํตํด ์ฝ๊ฒ ํ์ผ ๋ด์ฉ์ ์ฝ๊ฑฐ๋ ์ ์ฅ์ด ๊ฐ๋ฅํ๋ค. ๊ตฌํํ ๋ด์ฉ์ ๋ค์๊ณผ ๊ฐ๋ค.
const handlePreview = (changedFile) => { const imgReader = new FileReader(); const uploadItem = document.querySelector('.upload_img'); imgReader.onload = (e) => { uploadItem.style.backgroundImage = `url(${e.target.result})`; }; imgReader.readAsDataURL(changedFile); };
FileReader์ธ imgReader๊ฐ onload ๋ ๊ฒฝ์ฐ ์ํ๋ ์์ญ์ background-image์ ์
๋ก๋ํ ์ด๋ฏธ์ง๊ฐ ์ง์ ๋๊ฒ ๊ตฌํํ์๋ค,,
๐์ฌ๊ธฐ์ onload๋ ํ์ผ ์ฝ๊ธฐ๊ฐ ์ฑ๊ณต์ ์ผ๋ก ์๋ฃ๋์์ ๋ ๋ง๋ค ์คํ๋๋ FileReader์ ์ด๋ฒคํธ ํธ๋ค๋ฌ์ด๋ค.