๐ท ๋ฆฌ์กํธ๋ก ์ด๋ฏธ์ง ์ฝ์ ํ๊ธฐ
๋ฆฌ์กํธ ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ์ธ๋ถ์์ ๊ฐ๋จํ ๊ฒ ํ๋๋ผ๋ ๋ฐ์์ค๊ธฐ ์ํด์๋
๊ณต์ ๊ณผ์ ์ด ํ์ํ๋ฐ, ๊ฐ๋ฆฐ์ด์ธ ๋๋ ์์ง ์ด๋ฐ๊ฑธ๋ก ์ฝ์ง์ ํ๋ค (์ฃผ๋ฅต..)
์ ํ๋ธ ํด๋ก ์ฝ๋ฉ์ ํผ์ ์ผ์ฌ์ฐจ๊ฒ ํด๋ณด๊ฒ ๋ค๊ณ ํ ๊ฑท์ด๋ถ์ณค๋๋ฐ
๊ฐ๋จํ ๋ก๊ณ ์ด๋ฏธ์ง ํ๋ ์ฝ์
ํ๋๋ฐ 2์ผ ๊ฑธ๋ ธ๋ค๋ (๋๊ฐ์ ํ์ฐ ๋์๋.. ์?)
๊ทธ๋ฅ ๊ฒฝ๋ก ๋๋ ค ๋ฐ์ผ๋ฉด ๋๋๊ฑฐ ์๋์ผ?
์ ์๋์ผ..
์ ์กฐ๊ฐ๋ ๋ฌธ์๋ฅผ ๋ณด๊ธฐ์ซ์ด์ ์ผ๋ง๋ ์ ๋ฅผ ์ผ๋์ง
๊ตฌ๊ธ๋ง ํด๋ณด๊ณ , ์ฝ๋ฉ ์นดํ๋ ์ฐพ์๋ณด๊ณ , ์ฌ๋๋ ๋ค ๋ค์ก๊ฑด๋ง
๋ง์ง๋ง์ผ๋ก ๊ณต์๋ฌธ์ ํ๋ฒ ๋ค์ ธ๋ณด์ ํ ๊ฒ์ด ํด๊ฒฐ์ฑ ์ ์ฃผ์๋ค
(๊ณต์ ๋ฌธ์๋ฅผ ๊ฐ์ฅ ๋จผ์ ๋ด์ผํ๋๋ฐ... ์๋๋ ค)
์์ฃผ ์น์ ํ๊ฒ ์ฝ๋ ์์๊น์ง ๋์์์ ^^!
How to use
์ถ๊ฐ์ ์ผ๋ก ์ฐพ์๋ณด๋ ๋ณดํต ์ด๋ฏธ์ง ์ฝ์ ๋ฐฉ๋ฒ์ด 2๊ฐ์ง๊ฐ ์๋๋ฐ
public ํด๋์ src ํด๋๋ก ๊ทธ ๋ฐฉ๋ฒ์ด ๋๋๋ค.
1. src ํด๋์ ์ ์ฅํ ์ด๋ฏธ์ง ์ฌ์ฉํ๊ธฐ
src ํด๋์ ์ด๋ฏธ์ง๋ฅผ ์์ฒด์ ์ผ๋ก ์ ์ฅํ๋ค๋ฉด import ํ์ฌ ์ง์ ํ ๊ฐ์ src ์์ฑ์ ๋ฃ์ด์ค๋ค.
import ํ ๋์ ์ด๋ฆ์ class๋ช ์ฒ๋ผ ์ํ๋๋๋ก ์ง์ ํด์ค ์ ์๊ณ
src ์์ฑ ๊ฐ์ผ๋ก๋ ์ค๊ดํธ๋ฅผ ์ด์ฉํ์ฌ ์์ฑํ ๊ฐ์ ๋ฃ์ด์ฃผ๋ฉด ๋๋ค.
2. public ํด๋์ ์ ์ฅํ ์ด๋ฏธ์ง ์ฌ์ฉํ๊ธฐ
public ํด๋์ ์ ์ฅํ ์ด๋ฏธ์ง๋ ์๋๊ฒฝ๋ก๋ฅผ ์ด์ฉํ์ฌ ๋ถ๋ฌ์์ผ ํ๋ค.
import ๋ ๋ฐ๋ก ํ์ํ์ง ์๋ค.
<img className="icon-search" src="/search.png" alt="search" />
๐ก ๋ฐฐ์ด์
์ฒ์ ์ด๋ฏธ์ง๊ฐ ๊นจ์ก์ ๋๋ src ํด๋์ ์ด๋ฏธ์ง๊ฐ ๋ค์ด์์๊ณ
์ด๋ฏธ์ง์ src ์์ฑ๊ฐ์ ์๋๊ฒฝ๋ก๋ก ์ก์๋ ์ํ์๋ค.
๊ทธ ๋ ์ด๋ฏธ์ง๊ฐ ์ ์ ์ถ๋ ฅ๋๋ ค๋ฉด public ํด๋๋ก ์ด๋ฏธ์ง ๊ฒฝ๋ก๋ฅผ ์์ ํ๊ฑฐ๋ ์ด๋ฏธ์ง๋ฅผ import ํ์ด์ผ ํ๋ค.
์ฐพ์๋ณด๋ ์ํฉ์ ๋ฐ๋ผ public ํด๋์ src ํด๋๋ก ์ด๋ฏธ์ง๋ฅผ ๊ด๋ฆฌํ๋ ๋ฒ์ด ๋ค๋ฅธ ๊ฑธ ์์ ์์๋ค.
์ด ๋ถ๋ถ์ ๋ํด์ ๋ค์์ ๋ค์ ๋ค๋ค๋ด์ผ๊ฒ ๋ค.
์ฝ์ง ๋! ๐ฌ
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(๐ท ๋ฆฌ์กํธ๋ก ์ด๋ฏธ์ง ์ฝ์ ํ๊ธฐ), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@hill0ne/๋ฆฌ์กํธ๋ก-์ด๋ฏธ์ง-์ฝ์ ํ๊ธฐ์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค