์ด๊ฒ์ ์ต์ ๋ฆด๋ฆฌ์ค๋ฅผ v7.0.0.zip์ผ๋ก ๋ค์ด๋ก๋ํ ์ ์๋ SVGR์ด๋ผ๋ Linux ์ฑ์ ๋๋ค. ์ํฌ์คํ ์ด์ ์ฉ ๋ฌด๋ฃ ํธ์คํ ์ ๊ณต์ ์ฒด OnWorks์์ ์จ๋ผ์ธ์ผ๋ก ์คํํ ์ ์์ต๋๋ค.
OnWorks์ ํจ๊ป SVGR์ด๋ผ๋ ์ด ์ฑ์ ๋ฌด๋ฃ๋ก ๋ค์ด๋ก๋ํ์ฌ ์จ๋ผ์ธ์์ ์คํํ์ญ์์ค.
์ด ์ฑ์ ์คํํ๋ ค๋ฉด ๋ค์ ์ง์นจ์ ๋ฐ๋ฅด์ธ์.
- 1. ์ด ์ ํ๋ฆฌ์ผ์ด์ ์ PC์ ๋ค์ด๋ก๋ํ์ต๋๋ค.
- 2. ํ์ผ ๊ด๋ฆฌ์ https://www.onworks.net/myfiles.php?username=XXXXX์ ์ํ๋ ์ฌ์ฉ์ ์ด๋ฆ์ ์ ๋ ฅํฉ๋๋ค.
- 3. ์ด๋ฌํ ํ์ผ ๊ด๋ฆฌ์์์ ์ด ์์ฉ ํ๋ก๊ทธ๋จ์ ์ ๋ก๋ํฉ๋๋ค.
- 4. ์ด ์น์ฌ์ดํธ์์ OnWorks Linux ์จ๋ผ์ธ ๋๋ Windows ์จ๋ผ์ธ ์๋ฎฌ๋ ์ดํฐ ๋๋ MACOS ์จ๋ผ์ธ ์๋ฎฌ๋ ์ดํฐ๋ฅผ ์์ํฉ๋๋ค.
- 5. ๋ฐฉ๊ธ ์์ํ OnWorks Linux OS์์ ์ํ๋ ์ฌ์ฉ์ ์ด๋ฆ์ผ๋ก ํ์ผ ๊ด๋ฆฌ์ https://www.onworks.net/myfiles.php?username=XXXXX๋ก ์ด๋ํฉ๋๋ค.
- 6. ์์ฉ ํ๋ก๊ทธ๋จ์ ๋ค์ด๋ก๋ํ์ฌ ์ค์นํ๊ณ ์คํํฉ๋๋ค.
์คํฌ๋ฆฐ ์ท
Ad
SVGR
๊ธฐ์
React๋ ์ฆ์ SVG๋ฅผ ์ง์ํ๋ฉฐ SVG ํ์ผ ๋์ ๊ตฌ์ฑ ์์๋ฅผ ๊ฐ๋ ๊ฒ์ด ๋ ๊ฐ๋จํ๊ณ ์ฝ๊ณ ํจ์ฌ ๊ฐ๋ ฅํฉ๋๋ค. React ๊ตฌ์ฑ ์์์ ๋ํ๋ SVG๋ ํ์ด์ง์ ์ธ๋ผ์ธ๋๋ฉฐ CSS๋ฅผ ์ฌ์ฉํ์ฌ ์คํ์ผ์ ์ง์ ํ ์ ์์ต๋๋ค. SVGR์ ๊ฒฌ๊ณ ํ ์ํคํ ์ฒ๋ก ์ธํด ๋ค๋ฅธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋ค๋ฆ ๋๋ค. svg-parser + Babel์ ์ฌ์ฉํ์ฌ SVG ์ฝ๋๋ฅผ JavaScript ์ฝ๋๋ก ๋ณํํฉ๋๋ค. ์ ์ฒด ๋๋ ํ ๋ฆฌ๋ฅผ ์ฒ๋ฆฌํ ์ ์์ผ๋ฉฐ ๋ชจ๋ SVG ํ์ผ(.svg ๋๋ .SVG์ ์ผ์น)์ด React ๊ตฌ์ฑ ์์๋ก ๋ณํ๋ฉ๋๋ค. react-native-svg๋ฅผ ์ฌ์ฉํ์ฌ React Native๋ฅผ ํ๊ฒํ ํ ์ ์์ต๋๋ค. SVGR์ ๋ ธ๋ API๋ฅผ ๋ ธ์ถํ๋ฏ๋ก ์ฌ์ฉ์ ์ง์ ์คํฌ๋ฆฝํธ๋ฅผ ๋ง๋ค๊ฑฐ๋ SVGR์ ๊ธฐ๋ฐ์ผ๋ก ๋ค๋ฅธ ๋๊ตฌ๋ฅผ ๋น๋ํ ์ ์์ต๋๋ค. SVGR์ ์นํฉ ๋ก๋๋ก ์ฌ์ฉํ ์ ์์ผ๋ฏ๋ก SVG๋ฅผ React ๊ตฌ์ฑ ์์๋ก ์ง์ ๊ฐ์ ธ์ฌ ์ ์์ต๋๋ค. SVGR์ CLI์ API ๋ชจ๋์์ ์ฌ์ฉํ ์ ์๋ ๋ช ๊ฐ์ง ์ฌ์ฉ์ ์ง์ ๊ฐ๋ฅํ ์ต์ ๊ณผ ํจ๊ป ์ ๊ณต๋ฉ๋๋ค. ๋ชจ๋ SVG ๋ ธ๋๋ฅผ ๋๋ฌธ์๋ก ์์ ํ๊ณ react-native-svg ๊ฐ์ ธ์ค๊ธฐ์ ํจ๊ป ํน์ ํ ํ๋ฆฟ์ ์ฌ์ฉํฉ๋๋ค. ์ง์๋์ง ์๋ ๋ชจ๋ ๋ ธ๋๊ฐ ์ ๊ฑฐ๋ฉ๋๋ค.
๊ธฐ๋ฅ
- SVG to React ๋ณํ๊ธฐ
- ๋ ธ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ
- CLI ๋๊ตฌ
- ์นํฉ ํ๋ฌ๊ทธ์ธ
- ์ฌ์ด ํตํฉ
- ์ฑ๋ฅ์ ์ ์ฐ์ฑ
ํ๋ก๊ทธ๋๋ฐ ์ธ์ด
์๋ฐ ์คํฌ๋ฆฝํธ
์นดํ ๊ณ ๋ฆฌ
์ด๊ฒ์ https://sourceforge.net/projects/svgr.mirror/์์ ๊ฐ์ ธ์ฌ ์๋ ์๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋๋ค. ๋ฌด๋ฃ ์ด์ ์ฒด์ ์ค ํ๋์์ ๊ฐ์ฅ ์ฌ์ด ๋ฐฉ๋ฒ์ผ๋ก ์จ๋ผ์ธ์ผ๋ก ์คํํ๊ธฐ ์ํด OnWorks์์ ํธ์คํ ๋์์ต๋๋ค.