๐Ÿงฉ

๋ณดํ†ต ํŒŒ์ผ์„œ๋ฒ„๋Š” ํ”„๋ก ํŠธ ๋ฐฑ์—”๋“œ ์–ด๋””์„œ ๊ด€๋ฆฌํ•˜๋Š”์ง€ ๊ถ๊ธˆํ•ฉ๋‹ˆ๋‹ค???

์งˆ๋ฌธ์ž
์ฃผ์ฐจ
3์ฃผ์ฐจ
์ƒํƒœ
์งˆ๋ฌธ ๋‚ ์งœ
Oct 26, 2023 11:30 AM

ํŒŒ์ผ ๋ฆฌ์†Œ์Šค ์ผ๋ฐ˜์ ์œผ๋กœโ€ฆ

ํ”„๋ก ํŠธ์—์„œ ์ €์žฅ์„ ํ•˜๋ฉด ์•ˆ๋œ๋‹ค. ๋Œ€๋ถ€๋ถ„ AWS S3 Storage์—์„œ ์ผ๋ฐ˜์ ์œผ๋กœ ๊ด€๋ฆฌ๋ฅผ ์ง„ํ–‰ํ•œ๋‹ค.
ํ”„๋ก ํŠธ (form) โ‡’ ๋ฐฑ์—”๋“œ โ‡’ S3์— ์ €์žฅ
๋ฐฑ์—”๋“œ๋Š” DB์— ๊ฒฝ๋กœ ๋ช…์นญ์„ ์ €์žฅํ•˜์—ฌ ํŒŒ์ผ์„ ๊ด€๋ฆฌํ•  ์˜ˆ์ •์ด๋‹ค. ํ”„๋ก ํŠธ์— ๋„˜๊ฒจ์ค„ ๋•Œ์—๋Š” ์ „์ฒด URL ํ˜•์‹์œผ๋กœ ๋˜์ ธ์ฃผ๊ณ  ์ด์— ๋Œ€ํ•ด์„œ ์ด๋ฏธ์ง€๋ฅผ ๊ทธ๋ ค์ฃผ๊ฑฐ๋‚˜ ํ•˜๋Š” ํ˜•์‹์œผ๋กœ ๊ด€๋ฆฌํ•˜๊ฒŒ ๋  ๊ฒƒ

ํ”„๋ก ํŠธ์—์„œ ๊ด€๋ฆฌํ•ด์•ผ ํ•˜๋Š” ์ด๋ฏธ์ง€ ๋ฆฌ์†Œ์Šค๋ฅผ ์–ด๋–ป๊ฒŒ ๊ด€๋ฆฌํ•˜๋А๋ƒ ?

  1. ํ”„๋ก ํŠธ ์†Œ์Šค ๋‚ด์—์„œ ์ „์ฒด์ ์œผ๋กœ ๊ด€๋ฆฌํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ๋‹ค.
    1. /public ์•ˆ์—๋‹ค๊ฐ€
      /public/aseest/icons..
  1. S3์— ๊ด€๋ฆฌํ•จ
    1. ํ”„๋ก ํŠธ์˜ ์šฉ๋Ÿ‰์„ compactํ•˜๊ฒŒ ์ค„์ผ ์ˆ˜ ์žˆ์„ ๊ฒƒ์ด๋‹ค.
      /assets/icons/OOO.svg ํ˜•์‹์— ์ €์žฅํ•จ
      svg๋ฅผ ์ปดํฌ๋„ŒํŠธ ํ˜•์‹์œผ๋กœ ๋งŒ๋“ค์–ด์„œ svg๋กœ ๋ณ€ํ™˜ ?
  1. svg ์‚ฌ์šฉ ๊ด€๋ จํ•ด์„œ
    1. ์•„์˜ˆ public ํด๋”์ชฝ์œผ๋กœ ์œ„์ž„ํ•ด์„œ ์‚ฌ์šฉ
      npx @svgr/cli --typescript --out-dir ./src/components/Icons . public/icons
  1. ๋””์ž์ธ ์‹œ์Šคํ…œ
    1. ๋””์ž์ธ ์‹œ์Šคํ…œ ๋‚ด์— ์žˆ๋Š” Icon์„ ๋ถˆ๋Ÿฌ์™€์„œ ์‚ฌ์šฉํ•˜๋Š” ํ˜•ํƒœ