์ฌ์ง ๊ณต์ ๊ฐ ๋ฉ์ธ ์๋น์ค ํน์ฑ ์, ํ ์คํธ๋ณด๋จ ์ด๋ฏธ์ง์ ๊ด์ฌ๋๊ฐ ๋๊ธฐ ๋๋ฌธ์ ์ด๋ฏธ์ง๋ฅผ ๋จผ์ ๋ฐฐ์นํ์๋ค.
๊ทธ๋ฌ๋ค๋ณด๋, ์ฐ๋ คํ๋๋๋ก ์ด๋ฏธ์ง๊ฐ ๋ก๋ฉ๋๊ณ ๋์ ํ ์คํธ๊ฐ ๋ฐ๋ฆฌ๊ฒ๋๋ฉด์ ๋๊ท๋ชจ ๋ ์ด์์ ํ์์ด ๋ฐ์ํ์๋ค.
์ฌ๋ฌ์ฅ์ ์ด๋ฏธ์ง์ ๊ฒฝ์ฐ์ CLS ์ ์๊ฐ 0.8๋ก ์ด๋ง์ด๋งํ๋ค...
๐๐ป placeholder๋ก ๋ ์ด์์์ด ๋ฐ๋ฆฌ๋ ํ์์ ๋ฐฉ์งํ๋ ค๊ณ ํ๋ค.
โ๏ธ ๋ฌธ์ ์
์ฒ์์ ์ด๋ฏธ์ง๋ฅผ ์ ๋ก๋ํ๋ ์ฌ์ฉ์ ์ ์ฅ์์, ๊ฒ์๋ฌผ์ ์ด๋ฏธ์ง๊ฐ ๊ท์ ๋ ์ฌ์ด์ฆ (1:1, 3:4)์ ์ฌ์ฉํ๋ฉด ์ด๋ฏธ์ง ์๋ฆผํ์์ด ๋ฐ์ํ๋๊ฒ์ ํผํ๊ณ ์ถ์๊ธฐ ๋๋ฌธ์ ์ด์ ๊ฐ์ด ์ด๋ฏธ์ง ์ฌ์ด์ฆ๋ฅผ ์ ์ํ ์ ์์๋ค.
ํ์ง๋ง, ์ด ๋ฐฉ์์ ์ ์งํ๋ค๋ฉด ๊ธฐ์กด์ ์๋ณธ๋น์จ์ ์ด๋ฏธ์ง ๋ก๋ฉ์ ์ ์์๊ฐ ์๋ค๋ณด๋ placeholder์ ์ ์ํ๊ธฐ๊ฐ ๋๊ฐํด์ง๋ค
placeholder๋ง ์ง์ ๋ ์ฌ์ด์ฆ๋ฅผ ์ง์ ํด๋๊ณ , ์ด๋ฏธ์ง๋ ์๋ณธ ์ด๋ฏธ์ง๋๋ก ๋ฃ๋ ๋ฐฉ์์ ํด๋ณด๋ฉด ์ญ์๋ ๋ ์ด์์ ์ด๋์ด ๋ฐ์ํ๋ค๋ณด๋, ์ด ๋ฐฉ๋ฒ ๋ํ.. ์ ์ ํ ๋ฐฉ๋ฒ์ด ์๋๋ค.
ํ ์คํธ์ ์ด๋ฏธ์ง ์์ ๋ฐฐ์น๋ฅผ ๋ฐ๊พธ๊ฑฐ๋, ์ ์๋ ๋น์จ๋ก ์ด๋ฏธ์ง๋ฅผ ์ ๋ก๋ ํ๋ ๋ฐฉ๋ฒ ์ค ํํด์ผํ๋ค
๐๐ป ์ด๋ฏธ์ง ์ฌ์ด์ฆ๋ฅผ 1:1 ๋น์จ๋ก ์ ์ํ๊ณ , ๋์ ์ฌ์ฉ์์๊ฒ crop ๊ธฐ๋ฅ์ ์ ๊ณตํด์, ์ฌ์ฉ์ ๊ฒฝํ๊ณผ ์ฌ๋ฏธ์ฑ์ ๋์ด๋ ๋ฐฉ์์ ํํ์๋ค.
react-easy-crop
<Cropper
image={selectedImages[currentImageIndex]}
crop={crop}
zoom={zoom}
aspect={1}
onCropChange={onCropChange}
onZoomChange={onZoomChange}
onCropComplete={onCropComplete}
cropShape="rect"
showGrid={true}
style={{
containerStyle: {
position: "relative",
width: "100%",
height: "100%",
background: "#230c0c",
},
mediaStyle: {
objectFit: "cover",
transition: "transform 0.2s ease-out",
},
cropAreaStyle: {
border: "2px solid gray",
borderRadius: "2px",
},
}}
instagram๊ณผ ๊ฐ์ฅ ์ ์ฌํ๋๋ก ํ๋,์ถ์๊ฐ ๊ฐ๋ฅํ๊ณ ์ฌ์ฉ์๊ฐ ์ํ๋๋๋ก 1:1 ๊ท๊ฒฉ์ ์ด๋ฏธ์ง๋ฅผ ์๋ฅผ ์ ์๋๋ก ์ด๋ฏธ์ง crop ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ธ react-easy-crop ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ํ์ฉํด ํฌ๋กญ ๊ธฐ๋ฅ์ ๊ตฌํํ๋ค.
์ด์ ์ด๋ฏธ์ง๊ฐ ๋ก๋ฉ ๋๊ธฐ์ ์, placeholder๊ฐ ์ด๋ฏธ์ง ๊ณต๊ฐ์ ์ฐจ์งํ๋ฉด์ ๋ ์ด์์ ์ด๋์ด ๋ฐ์ํ์ง ์๋๋ค!
'ํ๋ก์ ํธ' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[React] SEO, ์น ์ ๊ทผ์ฑ ๊ฐ์ ํ๊ธฐ (0) | 2024.07.19 |
---|---|
[react] ์ด๋ฏธ์ง ์ต์ ํํ๊ธฐ (0) | 2024.07.13 |
Firebase ๋ถ๋ถ ๋ฌธ์ ๊ฒ์๊ธฐ๋ฅ ๊ตฌํ (0) | 2024.07.11 |
code Splitting, prefetch ๋ก๋ฉ์๋ ๊ฐ์ (0) | 2024.07.10 |
[react-query] ์ข์์ ๊ธฐ๋ฅ ์ต์ ํํ๊ธฐ (0) | 2024.07.02 |