React 환경 수정 배포

React란?

SPA를 전제로 하고있으며, Dirty checking과 Virtual DOM을 활용하여 업데이트 해야하는 DOM요소를 찾아서 해당 부분만 업데이트하기 때문에, 리렌더링이 잦은 동적인 모던 웹에서 빠른 퍼포먼스를 내는게 가능하다. 다른 프레임워크에 간편하게 붙여서 사용하는 것이 가능하며, React Hooks라는 강력한 메소드들을 지원하면서 사실상 웹 포른트엔드 개발의 표준으로 자리잡았다.

수정

• index.js의 의 코드는 상단의 import App from './App';을 의미한다.
• import App from './App';의 App은 App.js
• 오른쪽에 보이는 웹페이지의 디자인은 App.css, index.css를 통한 수정이 가능하다.

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

App()의 함수가 return하는 코드와 오른쪽의 class="App-header"의 코드가 같은것을 볼 수 있다.

<div idv="root">의 태그는 index.js의 파일을 보면

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

• getElementById('root')를 볼 수 있다.

• id값이 root인 태그는 public폴더 안의 index.html에서 확인 가능하다.
  

  배포

• 터미널에서 npm run build 입력하면 build명령이 실행됨.
• build라는 폴더가 생성되고 index.html이외에 파일들이 자동 생성됨.
• index.html파일을 열어보면 파일의 용량을 최소화 하기 위해 공백 없이 태그가 생성됨.

build명령을 실행하게 되면 build한 결과를 service할 때 serve라는 앱을 쓰는것을 추천함
serve는 web-server (-s라는 옵션을 주게 되면 사용자가 어떤 경로로 들어오든 index.html의 파일을 서비스하게 된다.)

npx serve -s build

• node.js로 만들어진 애플리케이션이기 때문에 간편하게 실행시킬 때 npx사용
  
  링크를 클릭하면 개발 환경을 위한 버전이 아닌 서비스에서 사용할 수 있는 버전의 파일이 만들어지고 서비스된 것을 보여준다.