React๋ฅผ ๋ณต์ตํ๋ฉด์ ์ด์ ๋ณด๋ค ์ ์ดํดํ๊ฒ ๋ ๋ด์ฉ์ ์ ๋ฆฌ
์ฐธ๊ณ ํ ๋งํ JS ์ฝ๋ฉ ์ปจ๋ฒค์ ๋ชฉ๋ก ์ ๋ฆฌ
๊ธฐ๋ณธ์ ์ธ React Webpack Babel ์ค์ ์ ์ฐ์ต, ๊ธฐ๋กํ๋ค.ํ๋ก์ ํธ์ ๋ฉํ ์ ๋ณด๋ฅผ ๊ด๋ฆฌํ pakage.json ํ์ผ์ ํ๋ก์ ํธ ๋ฃจํธ์ ์์ฑํ๋ค.Webpack ๊ฐ๋ฐ ์๋ฒ ํ๊ฒฝ์ ๊ตฌ์ฑํ๊ธฐ ์ํ ์์กด ํจํค์ง๋ฅผ ์ค์นํ๋ค.๊ฐ๋ฐ ์๋ฒ์์๋ง ์ฌ์ฉํ ๊ฒ์ด๋ฏ๋ก -D ์์ฑ์ ๋ถ
github ๊ณ์ ์ ์ฌ๋ฌ ๊ฐ ์ฌ์ฉํ๊ฒ ๋๋ฉด์ ํด๋๋ณ github ๊ณ์ ์ ๋ถ๋ฆฌํ๊ณ ์ ์๋ฃ๋ฅผ ์ฐพ์๋ณธ ํ ๋ฐฉ๋ฒ์ ์ ๋ฆฌ
HTML/CSS๋ก ์ด๋ฏธ์ง ํฌ๊ธฐ์ ์์น๋ฅผ ์กฐ์ ํ๋ 3๊ฐ์ง ๋ฐฉ๋ฒ์ ์ฅ๋จ์ ์ ๋น๊ต
Instagram ์ฌ์ฉ์ ์ ์ฅ์์ ์งํฌ ์ ์๋ ์น ์ ๊ทผ์ฑ ๋ฐฉ๋ฒ์ธ ๋์ฒด ํ ์คํธ์ ๋ํด ์๊ฐ.
imgar ํ๋ก์ ํธ ์งํ ์ ๋ง์ฃผ์น ๋ฌธ์ ๋ก, SVG๋ฅผ React ์ปดํฌ๋ํธ๋ก ์ฌ์ฉ ์ ๋ฐ์ํ ์ค๋ฅ๋ฅผ ํด๊ฒฐํ๋ ๋ด์ฉ์ ์ ๋ฆฌ
imgar ํ๋ก์ ํธ ์งํ ์ ๋ง์ฃผ์น ๋ฌธ์ ๋ก, ๋ฌธ์์ด ๋ฆฌํฐ๋ด ํ์ ์ฌ์ฉ ์ ํ์ ์คํฌ๋ฆฝํธ์์ ํ์ ์ค๋ฅ๊ฐ ๋์ค๋ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๋ ๋ด์ฉ ์ ๋ฆฌ
react-router-dom์ ์ด์ฉํ๋ค.ํญ์ ๋๋ฅด๋ ๊ฒ ๋ฟ์ธ๋ฐ path๊ฐ ๋ฐ๋์ด์ ๋ง์ผํ ํ ์ชฝ์์๋ ํด๋ฆญ ์์ ๋ํ ์ ๋ณด๋ฅผ ์ ํํ๊ฒ ํ์ ํ ์ ์๊ฒ ๋๋ค.
React์์ API๋ฅผ ๊ฐ์ ธ์ฌ ๋ ๋ง๋ CORS ์ค๋ฅ๋ฅผ Webpack Proxy๋ฅผ ์ด์ฉํด ํด๊ฒฐ
ํ๋ก๊ทธ๋๋จธ์ค ์ํด๋ฆฌ ์ฑ๋ฆฐ์ง 3์ฃผ์ฐจ ํผ์ฆ ์กฐ๊ฐ ์ฑ์ฐ๊ธฐ javascript ํ์ด
์นด์นด์ค ์ด๋ชจํฐ์ฝ ์ต์ ๋งํฌ์ ๊ณผ ๋ผ์ดํธ ํ์ฐ์ค๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ๋ถ์ํ ๋ค, ๊ฐ์ ์ ์ด ์๋ค๋ฉด ๊ฐ์ ๋ฐฉ๋ฒ๊น์ง ๋ฐ์ํ์ฌ html, css๋ก ๊ตฌํํด๋ณด์๋ค.