โ๏ธ ๋ง๋ React ์ฌ์ดํธ build & Github Pages๋ก ๋ฐฐํฌ
0. ๋ฐฐํฌํ๊ธฐ ์ ์ฒดํฌํ ์ฌํญ
(1) ์ผ๋จ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ๋์๋ณผ ๋ ์ฝ์์ฐฝ, ํฐ๋ฏธ๋์ ์๋ฌ๊ฐ ๋๋ฉด ์๋๋ค
(2) ํน์ ์ฌ์ดํธ๋ฅผ ๋ฐฐํฌํ ๋
http://codingapple.com/ ์ฌ๊ธฐ์ ๋ฐฐํฌํ๋ ๊ฒฝ์ฐ์ ๋ฐ๋ก ์ค์ ์ด ํ์์์ด ๋์ถฉ ํด๋ ๋์ง๋ง http://codingapple.com/blog/ ์ด๋ฐ ํ์ ๊ฒฝ๋ก๋ก ๋ฐฐํฌํ๊ณ ์ถ์ผ๋ฉด ํ๋ก์ ํธ์ ์ค์ ์ด ๋ฐ๋ก ํ์ํ๋ค.
ํ๋ก์ ํธ ํ์ผ ์ค package.json ์ด๋ผ๋ ํ์ผ์ ์คํํด
"homepage": "http://codingapple.com/blog",
homepage๋ผ๋ ํญ๋ชฉ์ ์ถ๊ฐํ ํ, ๋ฐฐํฌํ ์ฌ์ดํธ ๊ฒฝ๋ก๋ฅผ ๋ค์ ์ถ๊ฐํ๋ฉด ๋๋ค. (ํน์ /blog ์ด๋ ๊ฒ ๊ฒฝ๋ก๋ฅผ ์จ๋ ๋จ)
๊ทธ๋ฆฌ๊ณ ๋ฆฌ์กํธ ๋ผ์ฐํฐ๊ฐ ์คํผ๋์ด ์๋ค๋ฉด ๋ผ์ฐํฐ๊ฐ ์ ๊ณตํ๋ basename="" ์์ฑ์ ์ถ๊ฐํ๋๊ฒ ๋ผ์ฐํ
์ด ์ ๋จ!
- ์์ธํ ๋ด์ฉ: https://create-react-app.dev/docs/deployment/#building-for-relative-paths
1. ๋ณ ๋ฌธ์ ๊ฐ ์๋ค๋ฉด ์ด์ ํฐ๋ฏธ๋์ build ๋ช
๋ น์ด๋ฅผ ์
๋ ฅ
- state, JSX, <์ปดํฌ๋ํธ>, props ์ด๋ฐ ๋ฌธ๋ฒ๋ค์ ๋ธ๋ผ์ฐ์ ๊ฐ ํด์ํ ์ ์์ด ๊ทธ๋๋ก ๋ฐฐํฌํ ์ ์๋ค.
- ๋ฐ๋ผ์ ์ด๋ฌํ ๋ฌธ๋ฒ๋ค์ CSS, JS, HTML ๋ฌธ๋ฒ์ผ๋ก ๋ฐ๊ฟ์ฃผ๋ ์์
์ด ํ์ํ๋ค.( ์ด๊ฒ์ ์ปดํ์ผ ๋๋ build ๋ผ๊ณ ํ๋ค. )
- build ํ๋ ค๋ฉด ๋ฆฌ์กํธ ํ๋ก์ ํธ์์ ํฐ๋ฏธ๋์ ์ผ ํ ์๋ ์
๋ ฅ
npm run build
- ๊ทธ๋ผ ์์
ํ๋ก์ ํธ ํด๋ ๋ด์ build ๋ผ๋ ํด๋๊ฐ ํ๋ ์์ฑ๋๋๋ฐ ์์ ์งฐ๋ ์ฝ๋๋ฅผ ์ ๋ถ .html, .css, .jsํ์ผ๋ก ๋ณํํด์ ๊ฑฐ๊ธฐ ๋ด์์ค!
- build ํด๋ ์์ ์๋ ๋ด์ฉ์ ๋ชจ๋ ์๋ฒ์ ์ฌ๋ฆฌ๋ฉด ๋! (index.html์ด ๋ฉ์ธ ํ์ด์ง)
2. ๊ทผ๋ฐ ์ฐ๋ฆฐ ๋ฌด๋ฃ ํธ์คํ
ํด์ฃผ๋ github pages์ ์ฌ๋ฆด ๊ฒ
(1) guthub.com ๋ก๊ทธ์ธ
(2) ์ฐ์ธก ์๋จ + ๋ฒํผ ๋๋ฅด๊ณ New Repository ์์ฑ
(3) Repository name์ ๊ผญ ์ผ์ชฝ์ ๋จ๋ ๋ณธ์ธ์์ด๋.github.io ๋ผ๊ณ ์
๋ ฅ, READM ํ์ผ ์์ฑ๋ ์ฒดํฌ
3. Repository์ html ํ์ผ ์ฌ๋ฆฌ๊ธฐ
- repository์ build ํด๋ ๋ด์ ํ์ผ์ ์ ๋ถ ๋๋๊ทธ ์ค ๋๋กญ
- ์ฃผ์! build ํด๋๋ฅผ ๋๋๊ทธ ์ค ๋๋กญ ์๋, build ํด๋ ์์ ๋ด์ฉ๋ฌผ์!
Q. build ํ ๋ ์์ถ ์ํค์ง ๋ง๊ณ ๋จ๊ธฐ๋ก ์ถ์ ํ์ผ์?
./ ๋ถํฐ ์์ํ๋ ๊ฒฝ๋ก๋ก ์ฒจ๋ถํ ์ด๋ฏธ์ง, .js ํ์ผ๋ค์ ์ ๋ถ ์ด๋ฆ์ ๋ณํ๋ค. ์ด๋ฆ์ด ๋ณํ์ง ์๊ฒ ํ๊ณ ์ถ์ผ๋ฉด public ํ์ผ ์์ ๋ฃ๊ณ build.
๋ณธ ํฌ์คํ ์ << React ๋ฆฌ์กํธ ๊ธฐ์ด๋ถํฐ ์ผํ๋ชฐ ํ๋ก์ ํธ๊น์ง! >> ๊ฐ์๋ฅผ ์ฐธ๊ณ ํฉ๋๋ค.