공부하는 히욤이

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의 #15-18 리액트란?/Create-React-App/npm npx/구조 설명 본문

Programming/React+Node

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의 #15-18 리액트란?/Create-React-App/npm npx/구조 설명

히욤이 2021. 8. 17. 02:38

React.js

  • Library로 페이스북이 개발
  • Components로 이루어져 있어 재사용성이 뛰어남
  • Virtual DOM을 이용
    • Real DOM은 바뀐 부분이 있으면 다시 전부 다 불러오는데 Virtual DOM은 바뀐 부분만 찾아서 DOM에서 바꾸어 줌

 

Babel

  • 최신 자바스크립트가 구형 브라우저에서도 돌 수 있게 ES6 문법으로 변형 시켜주는 역할

Webpack

  • 복잡하게 된 파일이나 모듈들을 bundle로 묶어주는 역할

 

npm

  • node package manger로 레지스트리 같은 저장소 역할
  • local은 프로젝트 안에 node_modules에서 다운이 되고, global은 컴퓨터 window 자체에 다운이 됨

 

npx

  • disk space를 낭비하지 않을 수 있다.
  • 항상 최신 버전을 사용할 수 있다.

 

Create-react-app

C:\practices\react-node\boiler-plate> cd client
C:\practices\react-node\boiler-plate>client> npx create-react-app .

 

npm run start

C:\practices\react-node\boiler-plate> cd client
C:\practices\react-node\boiler-plate>client> npm run start

 

[package.json]

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

package.json의 scripts 부분에 start로 react-scripts start가 지정되어있기 때문에 react app 실행이 가능

 

실행하면 다음과 같은 화면이 뜸

client의 src의 App.js 부분이 렌더링 되어 나온게 위 화면임

 

 

 

[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>

public 폴더의 index.html 안에 div id='root'가 있음

 

 

[index.js]

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

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

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

이 부분을 index.js에서 root id를 잡아 App 컴포넌트가 렌더링 될 것을 지정했기 때문에 react 기본 화면이 출력됨

webpack이 관리하는 부분은 src 부분임 public은 관리해 주지 않음

저작자표시 비영리 동일조건

'Programming > React+Node' 카테고리의 다른 글

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의 #21 데이터 Flow & Axios  (0) 2021.08.17
따라하며 배우는 노드, 리액트 시리즈 - 기본 강의 #20 React Router Dom  (0) 2021.08.17
따라하며 배우는 노드, 리액트 시리즈 - 기본 강의 #14 로그아웃 기능  (0) 2021.08.17
따라하며 배우는 노드, 리액트 시리즈 - 기본 강의 #13 Auth 기능 만들기  (0) 2021.08.15
따라하며 배우는 노드, 리액트 시리즈 - 기본 강의 #11-12 로그인 기능 with Bcrypt/토큰 생성 with jsonwebtoken  (0) 2021.08.14
'Programming/React+Node' Related Articles more