๊ด€๋ฆฌ ๋ฉ”๋‰ด

๋ชฉ๋ก์ด๋ฏธ์ง€ (1)

Suzie's Blog

Next.js ์—์„œ ์ด๋ฏธ์ง€ ๊ด€๋ฆฌ : public vs src/assets

์ตœ๊ทผ Next.js๋กœ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๋ฉด์„œ ์ด๋ฏธ์ง€๋ฅผ ์ €์žฅํ•˜๋Š” ๋‘ ๊ฐ€์ง€ ๋ฐฉ์‹์ด ์žˆ๋Š” ๊ฑธ ์•Œ๊ฒŒ ๋˜์—ˆ๋‹ค.1. public ํด๋”์— ์ €์žฅํ•˜๊ธฐ2. src/assets ์— ์ €์žฅํ•˜๊ธฐ๋‘˜ ์ค‘ ํ•˜๋‚˜๋งŒ ์“ฐ๋ฉด ๋˜๋Š” ๊ฑฐ ์•„๋‹ˆ์•ผ?๋ผ๋Š” ์ƒ๊ฐ์ด ๋“ค์—ˆ์ง€๋งŒ, ์ƒํ™ฉ์— ๋”ฐ๋ผ ๋‘˜ ๋‹ค ์“ฐ๋Š” ๊ฒŒ ์œ ๋ฆฌํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ฒŒ ๋˜์–ด ๊ณต์œ ํ•˜๊ณ ์ž ํ•œ๋‹ค. ์ผ๋‹จ ํŠน์ง•์„ ํ‘œ๋กœ ์ •๋ฆฌํ•ด ๋ณด์•˜๋‹ค.ํŠน์ง•publicsrc/assets์‚ฌ์šฉ ๋ฐฉ์‹URL ์ ‘๊ทผ ๊ฐ€๋Šฅ (import ๋„ ๊ฐ€๋Šฅ)Import ๋กœ ๋ถˆ๋Ÿฌ์˜ด์บ์‹ฑ ๋ฌธ์ œ์—…๋ฐ์ดํŠธ ๋œ ์ด๋ฏธ์ง€๊ฐ€ ์ด์ „ ์ด๋ฏธ์ง€์™€ ํŒŒ์ผ๋ช…์ด ๊ฐ™๋‹ค๋ฉด ์˜›๋‚  ํŒŒ์ผ์„ ๋ณด์—ฌ์ค„ ์ˆ˜๋„ ์žˆ์Œํ•ด์‹œ๋œ ํŒŒ์ผ๋ช…์œผ๋กœ ์ตœ์‹  ํŒŒ์ผ๋งŒ ํ‘œ์‹œ๋ฒˆ๋“ค๋ง๋ฒˆ๋“ค๋ง ๋˜์ง€ ์•Š์Œ๋ฒˆ๋“ค๋ง๊ณผ ์ตœ์ ํ™” ์ž๋™์œผ๋กœ ์ง„ํ–‰์„ฑ๋Šฅ๋ฒˆ๋“ค ํฌ๊ธฐ์— ์˜ํ–ฅ์„ ์•ˆ์คŒ์ž์ฃผ ์‚ฌ์šฉํ•˜๋ฉด ๋ฒˆ๋“ค ํฌ๊ธฐ๊ฐ€ ์ปค์งˆ ์ˆ˜ ์žˆ์Œ์ตœ์ ํ™”Next/image ์™€ ํ•จ..

๊ฐœ๋ฐœ/Next.js 2025. 1. 22. 09:14