๐Ÿ“ƒ

์ด๋ฏธ์ง€ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ๊ตฌํ˜„

์ƒ์„ฑ์ผ
Oct 27, 2021 05:14 PM
๊ธฐ๋ก์ž
ํ•ด๊ฒฐ ์—ฌ๋ถ€
ํ•ด๊ฒฐ ์—ฌ๋ถ€
์†์„ฑ
React
์นดํ…Œ๊ณ ๋ฆฌ
์ด์Šˆ

๐Ÿ”ฅ ๋ฌธ์ œ ๋ฐ ์งˆ๋ฌธ

์‚ฌ์šฉ์ž ํƒ€์ž„ ์ธ์ฆ ์ด๋ฏธ์ง€ ์—…๋กœ๋“œ ๊ธฐ๋Šฅ ๊ตฌํ˜„

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์˜ ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ์ด๋‹ค.

๐Ÿ“ƒ ์ฐธ๊ณ ์ž๋ฃŒ