[리액트] 환경설정

728x90

요약:

npx create-react-app 폴더명

npm start

싱글페이지애플리케이션인 리액트는 매 페이지를 전환하는 것이 아니라

자바스크립트로 하나의 HTML 페이지 안에서 계속 새로운 그림을 그려나가는 형식(안에 있는 내용만 계속 바꿔줌)으로,

페이지가 여러개인 것처럼 보이게끔 한다.

즉, 웹을 앱처럼 보여주게 만드는 눈속임을 가능케 한다.

1: Nodejs 설치하기

node -v 명령어를 통해 nodejs가 설치 확인

npm : Node Package Manager. NodeJS로 개발된 모듈들을 설치하고 관리해주는 패키지 매니져
nodeJS로 만들어진 유용한 모듈들을 가져다 쓰고 관리

2: 프로젝트 시작 :

리액트에 필요한 패키지를 자동으로 설치해주는 명령어 입력

프로젝트를 설치하고싶은 경로에서
npx create-react-app 폴더명 을통해 설치예를 들면,
npx create-react-app todoApp
Happy hacking 메세지가 나오면 성공

npx create-react-app first-react
Need to install the following packages:
  create-react-app
Ok to proceed? (y) y

Creating a new React app in C:\Users\User\Project\first-react.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

added 1377 packages in 2m

179 packages are looking for funding
  run `npm fund` for details

Initialized a git repository.

Installing template dependencies using npm...
npm WARN deprecated source-map-resolve@0.6.0: See https://github.com/lydell/source-map-resolve#deprecated

added 39 packages in 11s

179 packages are looking for funding
  run `npm fund` for details
Removing template package using npm...

removed 1 package, and audited 1416 packages in 5s

179 packages are looking for funding
  run `npm fund` for details

6 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Created git commit.

Success! Created first-react at C:\Users\User\progect\first-react
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd first-react
  npm start

Happy hacking!

public/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>

    <div id="root"></div>

3: SPA : 리액트 안에는 HTML 페이지도 단 하나, 태그도 단 하나이다.

Single Page Application의 준말 즉 페이지가 하나라는 뜻

하나의 페이지 안에서 자바스크립트가 필요한 페이지나 정보만 동적으로 그려준다. 즉, 새 페이지로 넘어갈때마다 서버에서 HTML CSS JS 소스를 가져올 필요가 없어 새로고침이 필요없다. 따라서 사용자에게 물흐르듯 끊김없는 웹앱 경험

단점은 처음에 필요한 리소스를 다 가져와야 해서 초기 구동 속도가 느리다.

src/index.js : HTML과 JS를 연결해주는 연결고리브릿지 즉, html 파일에 자바스크립트를 얹어주는 작업을 수행함

index.js 역할은 index.html과 App.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();

ReactDOM.render은 선택한 html 태그에 react를 그려준다(선택한 자바스크립트를 얹는다)

즉, 코드는

root가 id인 태그룰 들고 와서, 거기다 App이라는 react 컴포넌트를 얹어준다고 해석할 수 있다.

앞으로 리액트 작업은 모두 App.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'));

선택한 html 태그에 react를 그려줌

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

reportWebVitals();

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" />
        <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;

4: npm start

요 화면이 보이면 성공~~~

App.js 를 이렇게 바꾸면...

import "./App.css";

function App() {
  return (
    <div className="App">
      <header className="App-header">안녕하세요 리액트 입니다.</header>
    </div>
  );
}

export default App;

C:\Users\User\gitprogect\bokkieProject\first-react\src\App.css 속 내용은 앞으로 쓸 일이 없다면 지워주면 된다.