[React Exam 13] create-react-app를 이용한 Application 작성하기

1단계 : node.js를 설치합니다.

https://101developer.tistory.com/16

Node.js 설치하기

 

2단계 :create-react-app를 설치합니다.

npm버전 확인하기 C:\>npm -v npm 최신버전으로 업데이트 하기 C:\> npm install -g npm@latest create-react-app  설치하기 C:\> npm install -g create-react-app 전역에 설치된 모듈 확인하기 C:\> npm -g list

 

 

3단계 : React Application을 만듭니다.

프롬프트> npx create-react-app 애플리케이션이름

 

 

4단계 : React  Application을 실행합니다.

D:\React>cd my-app D:\React\my-app>npm start

 

 

다음은 실행 화면 입니다.

 

5단계 : React  Application을 수정하고 실행해 봅니다.

 

작성된 애플리케이션의 폴더 구조를 확인해보면 다음과 같습니다.

JavaScript 모듈들이 들어 있는 node_modules폴더는 빼고 표시합니다.  

.gitignore package-lock.json package.json README.md            public     favicon.ico     index.html     logo192.png     logo512.png     manifest.json     robots.txt src     App.css     App.js     App.test.js     index.css     index.js     logo.svg     reportWebVitals.js     setupTests.js

 

node_modules

현재 프로젝트에 포함된 라이브러리들이 설치되어 있는 폴더로 보통 깃과 같은 저장소에 올릴 때는 이 폴더를 함께 올리지 않습니다.

 

public
index.html과 같은 정적 파일이 포함되는 곳으로 컴파일이 필요 없는 파일들이 위치하는 폴더입니다.

 

src
리액트 내부에서 작성하는 거의 모든 파일들이 이 폴더 내부에서 작성되며 이 폴더에 있는 파일들은 명령어에 따라 JS로 컴파일이 진행됩니다.

 

.gitignore
깃에 포함하고 싶지 않은 파일의 이름 혹은 폴더등을 입력하는 파일입니다.

 

package.json
프로젝트에 관련된 기본적인 내용(프로젝트의 이름, 버전 등)과 라이브러리들의 목록이 포함되어 있습니다.
라이브러리가 설치된 node_modules 대신에 이 package.json을 깃에 포함하여 올리게 되며 후에 누군가가 프로젝트를 클론할 때 이 package.json에 적혀있는 라이브러리의 목록을 기준으로 npm에서 설치하게 됩니다.

 

package.json

package-lock.json은 이 파일(package-lock.json)이 생성되는 시점의 의존성 트리(node_modules)에 대한 정보를 가지고 있는 파일입니다. 의존성 트리는 package.json에 등록된 모듈과 그 모듈들이 의존하고 있는 모든 모듈을 포함하고 있기 때문에, 결국 package-lock.json도 이 모든 모듈들의 정보를 가지고 있습니다. npm을 사용해서 modules이나 package.json을 수정하게 되면, package-lock.json도 자동으로 업데이트 됩니다.

 

README.md
보통 깃과 같은 저장소에 올릴 때 프로젝트에 대한 설명을 작성하는곳으로 해당 저장소에 진입하면 가장 먼저 띄워집니다.

 

 

여기서 여러분이 수정해 볼 파일은 src 폴더 밑에 있는 App.js파일입니다.

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> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}
 
export default App;
 

 

다음과 같이 수정해 봅니다.

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" />
        <h2>내가 만든 React Application</h2>
      </header>
    </div>
  );
}
 
export default App;

 

그럼 실행 화면이 다음과 같이 변경 됩니다.

 

 

이번에는 App.css파일을 수정해 보도록 하겠습니다.

다른 부분은 빼고 다음 부분만 변경해 보도록 하겠습니다.

.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-logo {
  height: 20vmin;  /*여기*/
  pointer-events: none;
}
 
.App-header {
  background-color: white; /*여기*/
  min-height: 50vh;  /*여기*/
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: green;  /*여기*/
}

 

실행 화면이 다음과 같이 변경 되었습니다.

 

이렇게 첫번째 리액트 애플이 케이션을 만들어 보았습니다.

처음에는 너무 장황하게 만들어져 힘들겠지만 알고 보면 별거 없습니다. 

여러분들이 처리해야 할 파일들은 모두 public 폴더와 src폴더에 있습니다. 이 부분만 여러분들이 변경하면 됩니다.

나머지 부분은 중요한 부분이지만 아직은 건드리지 않고 리액트를 배워 보도록 하겠습니다.