저장을 습관화

React - 입문 기록 2 본문

공부/React

React - 입문 기록 2

ctrs 2023. 10. 22. 17:27

1. React 웹 서버 가동 시 제일 먼저 보이는 웹 페이지는

src/index.js로 인해 실행된 것이며

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

여기서 중간

// ..
import App from "./App";

// ..

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// ..

App이 화면의 구성 내용이다

 

App은 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;

 

즉 index.js가 입구, app.js가 전역적인 설정이라고 할 수 있다.

 

 

2. create-react-app으로 react을 시작하였을때 폴더 구성은 아래와 같은데

index.js는 index.css에 의해 꾸며지고, App.js는 App.css에 의해 꾸며진다.

 

 

 

3. src/index.js에는 아래와 같은 내용이 있다.

const root = ReactDOM.createRoot(document.getElementById("root"));

여기서 엘레먼트 Id 'root'은 public/index.html에서 찾을 수 있다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- 중략 -->
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!-- 중략 -->
  </body>
</html>

 

 

4. 배포

위 내용들에 각각 변화를 주어보았다.

- src/App.js

import logo from "./logo.svg";
import "./App.css";

function App() {
  return <div className="App">Hello World!</div>;
}

export default App;

 

- src/App.css

body {
  background-color: grey;
}

 

- src/index.css

/* 전체 내용 삭제 */

 

- css/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- 중략 -->
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root" style="border: 10px solid red"></div>
    <!-- 중략 -->
  </body>
</html>

 

이러한 내용이 적용된 웹은 아래와 같이 변하였다.

 

터미널에서 컨트롤+c를 눌러 웹 서버를 닫고

빌드 명령어를 입력한다.

$ npm run build

> react-app@0.1.0 build
> react-scripts build  

Creating an optimized production build...
One of your dependencies, babel-preset-react-app, is importing the
"@babel/plugin-proposal-private-property-in-object" package without
declaring it in its dependencies. This is currently working because
"@babel/plugin-proposal-private-property-in-object" is already in your
node_modules folder for unrelated reasons, but it may break at any time.

babel-preset-react-app is part of the create-react-app project, which
is not maintianed anymore. It is thus unlikely that this bug will
ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to
your devDependencies to work around this error. This will make this message
go away.

Compiled with warnings.

[eslint] 
src\App.js
  Line 1:8:  'logo' is defined but never used  no-unused-vars

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

File sizes after gzip:

  46.43 kB  build\static\js\main.c6a28861.js
  1.78 kB   build\static\js\787.b701888c.chunk.js
  92 B      build\static\css\main.eac09ee0.css

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  npm install -g serve
  serve -s build

Find out more about deployment here:

  https://cra.link/deployment

 

빌드기 끝나면 루트 디렉토리에 'build' 폴더가 생긴다.

 

이 중 build/index.html을 확인해보면 아래와 같이 스페이스와 탭의 공간마저 절약한 내용으로 나온다.

스페이스와 탭은 작업자가 알아보기 쉽게 넣은것이지만 프로그램이 실행될때는 필요가 없기 때문이다.

 

이 빌드가 완료된 내용으로 웹 서버 서비스를 시작한다.

$ npx serve -s build

나는 첫 실행이었기 때문에 필요한 패키지를 설치하겠냐는 메세지가 나왔고,

밑에 바로 Serving! 이라며 서비스 제공 중이라는 메세지가 나온다.

로컬에서 접속 가능한 URL과 공중망에서 접속 가능한 URL이 나온다.

하지만 스마트폰이나 다른 곳에 있는 컴퓨터 등을 이용하여 내 웹서버 접속하려면

윈도우 보안 설정 3000번 포트를 열어주는 등 작업이 필요하기 때문에 지금은 접속이 불가능하다.

 

아래와 같이 localhost:3000으로는 실행이 잘 되는것이 확인되었다.

 

개발 버전이 아닌 빌드가 끝난 배포 버전으로 서비스하는 것까지 확인하였다.

'공부 > React' 카테고리의 다른 글

React - 입문 기록 6  (0) 2023.10.24
React - 입문 기록 5  (0) 2023.10.23
React - 입문 기록 4  (0) 2023.10.23
React - 입문 기록 3  (0) 2023.10.22
React - 입문 기록 1  (0) 2023.10.21
'공부/React' Related Articles more