๋ฉ”์ธ ์ปจํ…์ธ ๋กœ ์ด๋™
๋ฒ„์ „: 2.0.0-beta.21

๐Ÿ“ฆ plugin-ideal-image

์•„์ฃผ ์ด์ƒ์ ์ธ ์ด๋ฏธ์ง€(๋ฐ˜์‘ํ˜•, ์ง€์—ฐ ๋กœ๋”ฉ, ์ €ํ™”์งˆ ํ”Œ๋ ˆ์ด์Šคํ™€๋”)๋ฅผ ๋งŒ๋“ค์–ด์ฃผ๋Š” ๋„ํ์‚ฌ์šฐ๋ฃจ์Šค ํ”Œ๋Ÿฌ๊ทธ์ธ์ž…๋‹ˆ๋‹ค.

์ •๋ณด

๊ธฐ๋ณธ์ ์œผ๋กœ ํ•ด๋‹น ํ”Œ๋Ÿฌ๊ทธ์ธ์€ ๊ฐœ๋ฐœ์ค‘์—๋Š” ๋น„ํ™œ์„ฑํ™”๋˜์–ด ์žˆ์œผ๋ฏ€๋กœ ํ•ญ์ƒ ์ „์ฒด ํฌ๊ธฐ ์ด๋ฏธ์ง€๋ฅผ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด์ƒ์ ์ธ ์ด๋ฏธ์ง€ ๋™์ž‘์„ ๋””๋ฒ„๊ทธํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด disableInDev ์˜ต์…˜์„ false๋กœ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.

์„ค์น˜โ€‹

npm install --save @docusaurus/plugin-ideal-image

์‚ฌ์šฉ๋ฒ•โ€‹

ํ•ด๋‹น ํ”Œ๋Ÿฌ๊ทธ์ธ์€ PNG, GIF, JPG ํฌ๋งท๋งŒ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.

import Image from '@theme/IdealImage';
import thumbnail from './path/to/img.png';

// ๋ฆฌ์•กํŠธ ์ฝ”๋“œ
<Image img={thumbnail} />

// ๋˜๋Š” ์•„๋ž˜์™€ ๊ฐ™์€ ์ฝ”๋“œ
<Image img={require('./path/to/img.png')} />

์„ค์ •โ€‹

์„ค์ •ํ•  ์ˆ˜ ์žˆ๋Š” ํ•„๋“œ

์˜ต์…˜ํƒ€์ž…๊ธฐ๋ณธ๊ฐ’์„ค๋ช…
namestringideal-img/[name].[hash:hex:7].[width].[ext]์ถœ๋ ฅํ•  ํŒŒ์ผ์— ๋Œ€ํ•œ ํŒŒ์ผ๋ช… ํ…œํ”Œ๋ฆฟ์ž…๋‹ˆ๋‹ค.
sizesnumber[]original size์‚ฌ์šฉํ•˜๋ ค๋Š” ๋ชจ๋“  ๋„ˆ๋น„๋ฅผ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค. ์„ค์ •ํ•œ ํฌ๊ธฐ๊ฐ€ ์›๋ณธ ์ด๋ฏธ์ง€ ๋„ˆ๋น„๋ณด๋‹ค ํฌ๋‹ค๋ฉด ๋‹ค์Œ์— ์„ค์ •ํ•œ ์ด๋ฏธ์ง€ ํฌ๊ธฐ๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค(์ด๋ฏธ์ง€ ํฌ๊ธฐ๋ฅผ ํฌ๊ฒŒ ๋งŒ๋“ค์ง€๋Š” ์•Š์Šต๋‹ˆ๋‹ค).
sizenumberoriginal size์‚ฌ์šฉํ•˜๋ ค๋Š” ๋„ˆ๋น„๋ฅผ ์ง€์ •ํ•˜์„ธ์š”. ์ง€์ •๋œ ํฌ๊ธฐ๊ฐ€ ์›๋ณธ ์ด๋ฏธ์ง€ ๋„ˆ๋น„๋ณด๋‹ค ํฌ๋‹ค๋ฉด ํ›„์ž๊ฐ€ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค(์ด๋ฏธ์ง€๊ฐ€ ํ™•๋Œ€๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค)
minnumbersizes๋ฅผ ์ง์ ‘ ์ง€์ •ํ•˜์ง€ ์•Š๊ณ  min, max, steps ๊ฐ’์„ ์„ค์ •ํ•˜๋ฉด ํฌ๊ธฐ๊ฐ€ ์ž๋™์œผ๋กœ ์„ค์ •๋ฉ๋‹ˆ๋‹ค.
maxnumbermin ํ•ญ๋ชฉ์„ ์ฐธ๊ณ ํ•˜์„ธ์š”.
stepsnumber4min์™€ max ์‚ฌ์ด์—์„œ ์ƒ์„ฑ๋˜๋Š” ์ด๋ฏธ์ง€ ๊ฐœ์ˆ˜ ์„ค์ •(์„ค์ •๊ฐ’ ํฌํ•จ)
qualitynumber85JPEG ์••์ถ• ํ’ˆ์งˆ
disableInDevbooleantruefalse ๊ฐ’์„ ์„ค์ •ํ•ด ๊ฐœ๋ฐœ ๋ชจ๋“œ์—์„œ ์ด์ƒ์ ์ธ ์ด๋ฏธ์ง€ ๋™์ž‘์„ ํ…Œ์ŠคํŠธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. Tip: ๋Š๋ฆฐ ๋„คํŠธ์›Œํฌ ํ™˜๊ฒฝ์„ ์‹œ๋ฎฌ๋ ˆ์ด์…˜ํ•˜๋ ค๋ฉด ๋ธŒ๋ผ์šฐ์ €์—์„œ network throttling์„ ์‚ฌ์šฉํ•˜์„ธ์š”.

์„ค์ • ์˜ˆ์‹œโ€‹

๋‹ค์Œ์€ ์„ค์ • ์˜ˆ์‹œ์ž…๋‹ˆ๋‹ค:

docusaurus.config.js
module.exports = {
plugins: [
[
'@docusaurus/plugin-ideal-image',
{
quality: 70,
max: 1030, // ์กฐ์ •ํ•  ์ด๋ฏธ์ง€ ์ตœ๋Œ€ ํฌ๊ธฐ.
min: 640, // ์กฐ์ •ํ•  ์ด๋ฏธ์ง€ ์ตœ์†Œ ํฌ๊ธฐ. ์›๋ณธ์ด ๋” ์ž‘์œผ๋ฉด ํ•ด๋‹น ํฌ๊ธฐ๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.
steps: 2, // min, max ์‚ฌ์ด์—์„œ ์ƒ์„ฑ๋œ ์ตœ๋Œ€ ์ด๋ฏธ์ง€ ๊ฐœ์ˆ˜(์„ค์ •๊ฐ’ ํฌํ•จ)
disableInDev: false,
},
],
],
};