잡다한 프로그래밍

1. 사전준비

#1) Nodejs 설치하기

https://nodejs.org/ko/에서 LTS버전을 다운받아 설치한다.

#2) yarn 설치하기

다음과 같이 yarn을 설치한다.

npm install --global yarn

#3) react app 생성하기

다음과 같이 리엑트 앱을 생성한다.

npx create-react-app 이름

2. 앱 실행하기

cd를 이용하여 폴더를 이동 후 다음과 같이 프로젝트를 실행한다.

yarn start

#1) 결과

다음과 같은 결과를 확인할 수 있다.

#2) App.js 수정

app.js 의 <p> 태그를 수정하고 저장하면 자동으로 compile되고 자동으로 페이지가 수정된다.

import React from 'react';
import logo from './logo.svg';
import './App.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> 안녕
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

3. 결론

create react-app를 사용하게 되면 다른 server와 함께 사용할 때 처럼 webpack같은 부분이 모두 이미 포함되어있다.