~☆~ 우하하!!~ 개발블로그

React 프로젝트 분석 본문

React

React 프로젝트 분석

iwoohaha 2024. 11. 11. 14:28
728x90
반응형

https://iwoohaha.tistory.com/312 에서 생성해본 React 프로젝트를 분석해보자.

IntelliJ IDEA 나 Visual Studio Code 를 이용해서 myreactapp 프로젝트를 연다.

Visual Studio Code 에서 프로젝트 폴더 열기
IntelliJ IDEA CE 에서 프로젝트 열기

IntelliJ IDEA 도구를 사용해서 프로젝트를 열고 나면 프로젝트 디렉토리 하위에 .idea 이름의 디렉토리가 생성되는데(프로젝트를 오픈하고 나서 생기므로 위 스크린샷에는 잡히지 않았다) 오직 IntelliJ IDEA 를 위한 디렉토리이므로 신경쓰지 않아도 된다.

 

public 디렉토리와 src 디렉토리를 펼쳐서 하위에 어떤 파일들이 구성되어 있는지를 볼 수 있게 해봤다.

우선 public 디렉토리를 구성하고 있는 파일들을 살펴보자.

 

public 디렉토리에는 정적 파일들이 포함되어 있는데, 웹브라우저의 요청에 따라 어떤 변환 작업이 없이 그대로 제공되는 파일을 정적 파일이라고 한다.

웹브라우저를 이용해서 특정 사이트에 접속하면 그 안에 있는 index.html, index.htm 등의 파일을 가장 먼저 찾아서 보여주게 되는데, 여기에 있는 index.html 파일이 초기 페이지의 역할을 하고 있다.

index.html 파일의 내용을 보면 다음과 같다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

 

일반적인 html 문서의 구조인데, <head> 와 </head> 사이에 %PUBLIC_URL% 로 표시되고 있는 부분이 있다.

이 값은 React 프로젝트가 빌드되는 시점에 미리 정의된 값으로 대체가 된다. 미리 정의된 값이 없을 경우에는 빈 값으로 대체되므로 

href="%PUBLIC_URL%/favicon.ico" 은 href="/favicon.ico" 로
href="%PUBLIC_URL%/logo192.png" 은 href="/logo192.png" 로
href="%PUBLIC_URL%/manifest.json" 은 href="/manifest.json" 으로 각각 빌드된다.

 

%PUBLIC_URL% 보다 더 중요한 것은 <body> 태그 사이의 내용이다.

<noscript> 태그는 브라우저에서 JavaScript 가 비활성화된 경우에만 표시되는 요소로서 "이 앱을 실행시키려면 JavaScript 를 활성화해야 한다"라고 표시되게 하고 있다.

다음의 <div> 태그 내용은 비어 있지만, id 가 root 로 지정되어 있는 것을 볼 수 있다.

잠시 src 디렉토리 아래의 index.js 소스를 살펴보면 root 가 어떻게 이용될 수 있는지를 알 수 있다.

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();

 

root ID 를 가진 엘리먼트를 구해서 무언가를 작업하는 코드가 구현되어 있다. 즉 id 가 root 로 선언된 div 태그 영역이 React 앱이 표시되는 장소가 된다.

 

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

에서 App 은 src 디렉토리 아래의 App.js 와 묘하게 일치한다. 대충 느껴지는 감으로는 App.js 에 구현되어 있는 내용이 <App /> 영역에 표시될 것 같다.

 

실제로 이 프로젝트가 실행된 결과를 보면 App.js 에 구현되어 있는 내용이 표시되고 있는 것을 확인할 수 있다.

이 프로젝트를 실행시키는 방법은 다음과 같다.

cd myreactapp
npm start

 

 

실행된 웹 화면의 문구를 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;

 

이로써 App.js 소스코드를 수정하면 React 앱 내용을 변경할 수 있다는 사실을 파악했다.

 

이번에는 React 앱을 빌드해서 서버에 올리는 방법을 알아본다.

터미널에서 아래 명령을 실행한다.

npm run build

 

위 명령을 실행하고나면 React 앱 프로젝트 디렉토리에 build 디렉토리가 생성되고, 그 안에 파일들이 생성된 것을 볼 수가 있다.

build 디렉토리에 생성된 파일을 웹서버에 전송하면 index.html 파일을 진입점으로 하는 웹 프론트엔드 앱이 동작하게 된다.

생성된 index.html 파일의 내용을 보면 개발도구에서 보던 index.html 과는 다르게 모든 소스가 1라인으로 작성되어 있고, 앞서 설명했던 %PUBLIC_URL% 이 빈 값으로 대체된 것을 확인할 수가 있다.

 

App.js 소스파일에 기록되어 있던 텍스트를 static 디렉토리 아래의 js 디렉토리의 파일에서 찾아보면 main.5429e89e.js 에서 찾을 수가 있다.

이 파일은 index.html 파일에서 <script defer="defer" src="/static/js/main.5429e89e.js"></script> 로 사용되고 있다.

 

결국, React 프로젝트의 App.js 파일은 npm run build 라는 작업으로 js 파일로 빌드되어 static 디렉토리 아래에 생성되는 과정이 수행된다.

 

반응형

'React' 카테고리의 다른 글

React - 컴포넌트에 값 저장하기  (0) 2024.11.12
React - 컴포넌트 이벤트 핸들러 함수 추가하기  (0) 2024.11.12
React 프로젝트 수정 (처음)  (0) 2024.11.11
'React' Related Articles more