synun
๊ฐœ๋ฐœ์‹œ๋„Œ
synun
์ „์ฒด ๋ฐฉ๋ฌธ์ž
์˜ค๋Š˜
์–ด์ œ
  • ๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ (71)
    • javascript (5)
    • react (8)
    • web (1)
    • git (3)
    • aws (1)
    • project (0)
    • ๊ฐœ๋ฐœ์ผ๊ธฐ (36)
    • ํ•ญํ•ด99 (16)
    • ํšŒ๊ณ  (1)

๋ธ”๋กœ๊ทธ ๋ฉ”๋‰ด

  • ํ™ˆ
  • ํƒœ๊ทธ
  • ๋ฐฉ๋ช…๋ก

๊ณต์ง€์‚ฌํ•ญ

์ธ๊ธฐ ๊ธ€

ํƒœ๊ทธ

  • ์•Œ๊ณ ๋ฆฌ์ฆ˜ํ’€์ด
  • framer-motion
  • ํ•ฉ์„ฑ์ปดํฌ๋„ŒํŠธ
  • fout
  • apt-fast
  • sipe
  • life-cycle
  • javascript
  • GIT
  • Howler
  • Redux-toolkit
  • Algorithm
  • githubactions
  • password authentication was removed
  • Selenium
  • React
  • react-query
  • ์ธํ”„์ฝ˜
  • json-server
  • use-sound
  • Vite
  • gh-pages
  • TIL
  • SSE
  • CI/CD
  • ํ•ญํ•ด99
  • ์ธํ”„๋žฉ
  • wil
  • github actions
  • howler.js

์ตœ๊ทผ ๋Œ“๊ธ€

์ตœ๊ทผ ๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌ

hELLO ยท Designed By ์ •์ƒ์šฐ.
synun

๊ฐœ๋ฐœ์‹œ๋„Œ

[React] gh-pages ๋ฐฐํฌํ•˜๊ธฐ
react

[React] gh-pages ๋ฐฐํฌํ•˜๊ธฐ

2022. 12. 2. 01:05

๐Ÿ‘€gh-pages๋ž€?

github๋Š” ๊ณ„์ •๋‹น ํ•˜๋‚˜์”ฉ ๋ฐฐํฌ์šฉ ๋„๋ฉ”์ธ์„ ์‚ฌ์šฉ๊ฐ€๋Šฅํ•˜๋„๋ก ์ง€์›ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

๊นƒํ—ˆ๋ธŒ ์ฐฌ์–‘ํ•ด

์ด๋ ‡๊ฒŒ {username}.github.io์˜ ํ˜•ํƒœ์˜ ๋„๋ฉ”์ธ์€ ๊นƒํ—ˆ๋ธŒ์—์„œ ์ง€์›ํ•ด์ฃผ๋Š” ๋„๋ฉ”์ธ์ด๋ผ๊ณ  ์ƒ๊ฐํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

 

https://jojoldu.github.io/

 

์„œ๋ฒ„ ๋ฐฑ์—”๋“œ ์—”์ง€๋‹ˆ์–ด

์ด๋ ฅ์„œ

jojoldu.github.io

 

๋ณดํ†ต์€ ์ด๊ฑธ ์ด์šฉํ•ด์„œ ๊ฐœ๋ฐœ๋ธ”๋กœ๊ทธ๋กœ ์ด์šฉํ•˜์‹œ๋Š” ๋ถ„๋“ค์ด ๋งŽ๊ณ ,

์ฃผ์–ด์ง„ ๋„๋ฉ”์ธ ์•ˆ์—์„œ ๋ ˆํฌ์ง€ํ† ๋ฆฌ๋ณ„๋กœ ๋ฐฐํฌ๊ฐ€ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

 

ํ”„๋กœ์ ํŠธ๋ฅผ ๋ฐฐํฌํ•˜๊ฒŒ ๋˜๋ฉด ๋„๋ฉ”์ธ์€ ์ด๋Ÿฐ ํ˜•ํƒœ๊ฐ€ ๋ฉ๋‹ˆ๋‹ค.

{username}.github.io.{repo}

 

๋‹ค๋งŒ ์ •์  ์›นํŽ˜์ด์ง€๋งŒ ๋ฐฐํฌํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์—

๋™์ ์ธ ๊ธฐ๋Šฅ์ด ๋“ค์–ด๊ฐ”๋‹ค๋ฉด ๋ฐฐํฌ๊ฐ€ ์ œํ•œ์ ์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 

์ด์ œ ํ”„๋กœ์ ํŠธ๋ฅผ ๋ฐฐํฌํ•˜๋Ÿฌ ๊ฐ€๋ด…์‹œ๋‹ค

๐Ÿ“คgithub repo ๋งŒ๋“ค๊ณ  ์—…๋กœ๋“œํ•˜๊ธฐ

git์œผ๋กœ ํ”„๋กœ์ ํŠธ๋ฅผ pushํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด์„œ๋Š” ๋”ฐ๋กœ ๋‹ค๋ฃจ์ง€ ์•Š๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

git์ด ์–ด๋ ต๋‹ค๋ฉด ์ƒ์„ฑํ•œ github repo์— ํด๋”๋ฅผ ๋“œ๋ž˜๊ทธ ์•ค ๋“œ๋กญํ•ด๋„ ์—…๋กœ๋“œ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

 

๊นƒํ—ˆ๋ธŒ ๋ ˆํฌ์ง€ํ† ๋ฆฌ๋ฅผ ์ƒ์„ฑํ•œ ๋‹ค์Œ์—

$ git remote add origin [github repo]

remote ์—ฐ๋™๊นŒ์ง€ ๋งˆ์ณ์ค๋‹ˆ๋‹ค.

โš™ํ”„๋กœ์ ํŠธ์— gh-pages ์„ค์น˜ & ์„ธํŒ…

// npm
$ npm install gh-pages --save-dev

//yarn
$ yarn add -D gh-pages

gh-pages๋ฅผ devDependency๋กœ ์„ค์น˜ํ•ฉ๋‹ˆ๋‹ค.

package.json์— "homepage": "http://{username}.github.io/{repo}" ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค.

package.jsonํŒŒ์ผ์˜ scripts์— predeploy์™€ deploy ๋ช…๋ น์–ด ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค.

"predeploy": "npm run build",
"deploy": "gh-pages -d build",

 

์ด๋ ‡๊ฒŒํ•˜๋ฉด ํ™˜๊ฒฝ์„ค์ •์€ ๋ชจ๋‘ ๋๋‚ฌ์Šต๋‹ˆ๋‹ค.

 

ํŒŒ์ผ๋“ค์„ ๋ชจ๋‘ main ๋ธŒ๋žœ์น˜์— pushํ•ด์ฃผ์„ธ์š”.

$ git push origin main

๐Ÿš€gh-pages ๋ฐฐํฌํ•˜๊ธฐ

// ๋ฐฐํฌํ•˜๊ธฐ
$ npm run deploy

// ๋ฉ”์‹œ์ง€์™€ ํ•จ๊ป˜ ๋ฐฐํฌํ•˜๊ธฐ
$ npm run deploy -- -m "Deploy React app to GitHub Pages"

 

scripts์— ์ถ”๊ฐ€ํ•ด์ค€ deploy ๋ช…๋ น์–ด๋ฅผ ์‹คํ–‰ํ•ด์„œ ๋ฐฐํฌ๋ฅผ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค.

๊นƒํ—ˆ๋ธŒ์— ๋ฉ”์‹œ์ง€๊ฐ€ default๋กœ ์˜ฌ๋ผ๊ฐ€๋Š” ๊ฒŒ ์‹ซ๋‹ค๋ฉด -m ์˜ต์…˜์œผ๋กœ ๋ฉ”์‹œ์ง€๋ฅผ ์ž‘์„ฑํ•ด์ฃผ์–ด๋„ ๋ฉ๋‹ˆ๋‹ค.

 

default ๋ฉ”์‹œ์ง€๋Š” Updates๊ฐ€ ๋.

 

ํ„ฐ๋ฏธ๋„์—์„œ ์ž‘์—…์ด ๋๋‚˜๋ฉด

๊นƒํ—ˆ๋ธŒ ๋ ˆํฌ์ง€ํ† ๋ฆฌ๋กœ ํ™•์ธํ•˜๋Ÿฌ ๊ฐ€๋ด…์‹œ๋‹ค.

๐Ÿ”ฎgh-pages ๋ฐฐํฌ ํ™•์ธํ•˜๊ธฐ

gh-pages ๋ธŒ๋žœ์น˜๊ฐ€ ์ƒ๊ฒจ์žˆ๋Š” ๊ฑธ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

gh-pages ๋ธŒ๋žœ์น˜๋Š” ๋ฐฐํฌ์šฉ ๋ธŒ๋žœ์น˜์ด๊ธฐ ๋•Œ๋ฌธ์— ๋”ฐ๋กœ ๊ฑด๋“œ๋ฆฌ์‹œ๋ฉด ์•ˆ๋ฉ๋‹ˆ๋‹ค!

 

์˜ค๋ฅธ์ชฝ ๋ฉ”๋‰ด์— Environments์— github-pages๋ผ๋Š” ๊ฒŒ ์ถ”๊ฐ€๋˜์–ด ์žˆ๋Š” ๊ฑธ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

View deployment๋ฅผ ํด๋ฆญํ•˜๋ฉด ์„ค์ •ํ•  ๋•Œ homepage์— ์ž…๋ ฅํ–ˆ๋˜ url๋กœ ๋ฐฐํฌ๊ฐ€ ๋˜์–ด ์žˆ๋Š” ๊ฑธ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

โ–ถReference

react-gh-pages ๊นƒํ—ˆ๋ธŒ 

 

GitHub - gitname/react-gh-pages: Deploying a React App (created using create-react-app) to GitHub Pages

Deploying a React App (created using create-react-app) to GitHub Pages - GitHub - gitname/react-gh-pages: Deploying a React App (created using create-react-app) to GitHub Pages

github.com

์‚ฌ์‹ค ์—ฌ๊ธฐ ๋ฆฌ๋“œ๋ฏธ์— ๋‹ค ๋‚˜์™€์žˆ์Œ 

'react' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[Vite] vite๋กœ ์ด์œ  ๋ชจ๋ฅด๊ฒŒ ์›น์†Œ์ผ“ ํ†ต์‹ ์ด ์•ˆ๋˜๋Š” ๊ฒฝ์šฐ(ws, sockjs)  (1) 2023.01.05
json-server ์ปค์Šคํ…€ํ•˜๊ธฐ  (0) 2022.12.19
[React] Lifecycle๊ณผ ๋ฉ”์†Œ๋“œ ๊ทธ๋ฆฌ๊ณ  Hook  (0) 2022.12.12
[React] Redux-toolkit ์ž…๋ฌธํ•˜๊ธฐ  (0) 2022.12.10
[React] ์นด์šดํ„ฐ๋กœ ์‹œ์ž‘ํ•˜๋Š” Redux  (0) 2022.12.04
    'react' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
    • json-server ์ปค์Šคํ…€ํ•˜๊ธฐ
    • [React] Lifecycle๊ณผ ๋ฉ”์†Œ๋“œ ๊ทธ๋ฆฌ๊ณ  Hook
    • [React] Redux-toolkit ์ž…๋ฌธํ•˜๊ธฐ
    • [React] ์นด์šดํ„ฐ๋กœ ์‹œ์ž‘ํ•˜๋Š” Redux
    synun
    synun

    ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”