Assignment 7 #6
Assignment 7 #6
Conversation
| const ThumbnailPreview = styled.div` | ||
| border-radius: 18px; | ||
| box-shadow: 5px 5px 10px 5px lightgray; | ||
| min-width: fit-content; | ||
| & > img { | ||
| max-width: 100%; | ||
| max-height: 150px; | ||
| } | ||
| `; |
There was a problem hiding this comment.
div ๋ถ๋ถ์ overflow: hidden;์ด๋ max-height: 150px;๋ ์ถ๊ฐํด ์ฃผ๋ฉด ์ข์ ๊ฒ ๊ฐ์์ฉ~!
- before
- after
There was a problem hiding this comment.
div ๋ถ๋ถ์
overflow: hidden;์ด๋max-height: 150px;๋ ์ถ๊ฐํด ์ฃผ๋ฉด ์ข์ ๊ฒ ๊ฐ์์ฉ~!
- before
- after
์ ์ถ ์ ์ ํ๋ฑํ๋๋ผ ์ด ๋ถ๋ถ์ ์ ๊ฒฝ์ ๋ชป์ผ๋ค์ใ ใ ๊ฐ์ฌํฉ๋๋ค
| const encodeFileToBase64 = (fileBlob, onLoad) => { | ||
| const reader = new FileReader(); | ||
| reader.readAsDataURL(fileBlob); | ||
| return new Promise((resolve) => { | ||
| reader.onload = () => { | ||
| onLoad(reader.result); | ||
| resolve(); | ||
| }; | ||
| }); | ||
| }; | ||
|
|
||
| export default encodeFileToBase64; |
There was a problem hiding this comment.
์ ๋ ์ธ๋ฏธ๋ ๋ฐ๋ผ์ FormData API๋ฅผ ์ฌ์ฉํ๋๋ฐ, FileReader API๋ก๋ ๊ตฌํํ ์ ์๋ค์ ๐๐ป
FileReader API๋ก ๊ตฌํํ๋ ๋ฐฉ๋ฒ์ด ๋ ํจ์จ์ ์ธ์ง ๊ถ๊ธํด์!
There was a problem hiding this comment.
์ ๋ ์ธ๋ฏธ๋ ๋ฐ๋ผ์ FormData API๋ฅผ ์ฌ์ฉํ๋๋ฐ, FileReader API๋ก๋ ๊ตฌํํ ์ ์๋ค์ ๐๐ป FileReader API๋ก ๊ตฌํํ๋ ๋ฐฉ๋ฒ์ด ๋ ํจ์จ์ ์ธ์ง ๊ถ๊ธํด์!
์ ๋ ์ค์ ๋ก ์ด๋ฏธ์ง๋ฅผ ์
๋ก๋ํ์ง ์๊ณ ๋ฏธ๋ฆฌ๋ณด๊ธฐ๋ฅผ ๋ณด๊ณ ์ถ์ด์ ์ด ๋ฐฉ๋ฒ์ ์ ํํ์ด์
๋ค๋ง FileReader API๋ฅผ ์ฌ์ฉํ๋ฉด base64 ์ธ์ฝ๋ฉ ๋ฐฉ์์ผ๋ก ์ด๋ฏธ์ง๊ฐ ๋ณด์ฌ์ง๊ธฐ ๋๋ฌธ์ ๋ฒ๋ค ํฌ๊ธฐ๊ฐ ์ปค์ง ์ ์๋ค๋ ๋จ์ ์ด ์๊ฒ ๋ค์ฉ
ํฌ๊ธฐ๊ฐ ์์ ์ด๋ฏธ์ง ํ์ผ์ผ ๊ฒฝ์ฐ์ ์ ํฉํ ๋ฐฉ๋ฒ์ด๋ผ๊ณ ์๊ฐํฉ๋๋ค~!
There was a problem hiding this comment.
๊ฐ๋ ค์ ๋ ๊ณณ์ ๋ฐ๋ฐ ๊ธ์ด์ฃผ์ จ๋ค์ ,,^^ ์ค๋๋ ํ๋ ๋ฐฐ์๊ฐ๋๋ค๐๐ปโโ๏ธ
๐ ๋ด์ฉ
๊ธฐ๋ณธ๊ณผ์
๐ PR Point
<Outlet />์ ์ฒ์ ์ ์ฉํด๋ดค๋๋ฐ ์ข์ ๊ฒ ๊ฐ์์ฉ๋ง์ง๋ง ๊ณผ์ ๊ฐ๊ธฐ๋ํ๊ณ ์ฑ์ญ์์ญ๋งน์ญํ๋ค์~
๐ ์คํฌ๋ฆฐ์ท