๋ฉ”์ธ ์ปจํ…์ธ ๋กœ ์ด๋™
๋ฒ„์ „: ๋ถˆ์•ˆ์ • ๐Ÿšง

๐Ÿ“ฆ 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')} />
๊ฒฝ๊ณ 

This plugin registers a Webpack loader that changes the type of imported/require images:

  • Before: string
  • After: {preSrc: string, src: import("@theme/IdealImage").SrcImage}

์„ค์ •โ€‹

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

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

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

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

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