노마드 코더 React JS: Publishing

출처 : https://nomadcoders.co/

노마드 코더 Nomad Coders

 

---

 

 

Publishing

핵심 : github 페이지에 deploy하는 방법에 대해 배운다.

 

 

cmd에 npm i gh-pages를 입력해준다.

. gh-pages는 결과물을 github pages에 업로드 할 수 있게 해준다.

 

1. pacage.json 파일에서 scripts를 build 시켜준다.

scripts를 실행하게 되면, 우리 웹사이트의 production ready code를 생성해주는데, production ready란

코드가 압축되고 모든게 최적화 되는 것을 의미한다.

 

2. pacage.json 파일 맨 아래에 아래와 코드를 입력해준다.

  },
  "homepage": "https://yardyard.github.io/https://github.com/yardyard/nomadcoderReactJS"
  
}

https://github아이디.github.io/repository이름

 

 

3. script안에 deploy를 추가해준다.

deploy가 하는 일은 우리가 방금 설치한 gh-pages를 실행시키고 "build"라는 디렉토리를 가져가는 것이다.

predeploy가 하는일은 deploy가 실행되기전에 먼저 실행되어서 명령문을 실행시키는 것이다.

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "deploy":"gh-pages -d build",
    "predeploy":"npm run build"
  },

 

 

그럼 끝!

 

+ 빈화면 오류 수정!!!!

function App() {
  return (
  <Router basename={process.env.PUBLIC_URL}>
    <Switch>
       {/* 유저가 해당 경로에 있다면, Detail컴포넌트를 렌더링 해준다는 뜻*/}
      <Route path="/movie/:id">
        <Detail />
      </Route>
      {/* 유저가 해당 경로에 있다면, Home Route컴포넌트를 렌더링 해준다는 뜻*/}
      <Route path="/">
        <Home />
      </Route>
    </Switch>
  </Router>);
};

basename을 설정해주니 저는 빈화면 해결되었습니다!!!

 

 

+ 추가로 뭔가 수정하고 웹사이트에 업데이트를 하고 싶다면 cmd에 npm run deploy를 입력하면 된다!!!