React 샘플 코드 생성 및 실행 (react_no_002)

React 설치(react_no_001)후 터미널에 아래와 같이 입력한다 (생성할 경로로 이동후 실행)

npx create-react-app my-app

 

src 폴더 내에 있는 App.js 파일을 열어 기본 코드를 샘플 코드로 대체합니다. 아래의 샘플 코드를 App.js에 복사해 넣으세요.

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Welcome to React</h1>
        <p>
          This is a simple React application.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

 

추가로 App.css 파일을 열고 다음 스타일을 추가하여 페이지의 스타일을 개선할 수 있습니다.

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

 

작성내역을  실행하기 위해 웹브라우저에서 호출합니다.

npm start

 

이 명령어는 개발 서버를 시작하고, 브라우저가 자동으로 열리면서 http://localhost:3000에서 기본 React 애플리케이션을 확인할 수 있습니다.

 

명령어 실행시 수행되는 세부내역

1. 개발 서버 시작:
   • create-react-app으로 생성된 프로젝트의 경우, npm start 명령어는 react-scripts start를 실행합니다. react-scripts는 개발 서버를 시작하는 데 필요한 여러 도구를 포함한 패키지입니다.
   • 개발 서버는 소스 코드를 모니터링하고, 파일이 변경될 때마다 자동으로 애플리케이션을 다시 빌드하여 브라우저를 업데이트합니다. 이는 개발자가 실시간으로 변경 사항을 확인할 수 있게 합니다.
2. 애플리케이션 빌드 및 실행:
   • 개발 서버는 Webpack과 같은 모듈 번들러를 사용하여 애플리케이션을 빌드합니다. 이 과정에서 JavaScript, CSS, 이미지 등 다양한 리소스가 번들로 묶여 브라우저에서 실행할 수 있는 형태로 변환됩니다.
   • 빌드된 애플리케이션은 로컬 서버(기본적으로 http://localhost:3000)에서 실행됩니다.
3. 라이브 리로딩 (Live Reloading):
   • 개발 서버는 코드의 변경 사항을 감지하여, 변경된 부분만을 다시 빌드하고 브라우저를 자동으로 새로 고침하여 최신 상태를 반영합니다. 이는 개발 속도를 크게 향상시키며, 코드 수정 시마다 수동으로 브라우저를 새로 고침할 필요를 없앱니다.

 

명령어 수행을 종료하고자 할 경우 명령어를 실행한 터미널에서 'Ctrl + C'를 누르면 됩니다.