07. JS코딩하는 법

 

 

 

 

 

 

Create react app이 우리에게 제공하는 샘플 어플리케이션을 수정하는걸 출발점으로 해서 개발을 시작하게 될 것이다.

 

어떤 디렉터리 구조를 가지고 있고 어디를 수정하면 우리가 코딩을 할 수 있는지 알아보자.

 

크게 src와 pubilc이라는 디렉토리가 있다.

 

그 중 public은 index.html이 있다.

 

 

<index.html>실행결과

 

 

지금 우리가 보고있는 리액트로 만든 어플리케이션이 웹브라우저 상에서는 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" />
 
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>  <!--이 부분을 주목하자!-->

  </body>
</html>

 

 

우리가 index.html에서 신경 쓸 부분은 <div id=“root”></div>이다.

 

컴퍼넌트들은 저 안에 들어간다.

 

그러면 아이디가 root인 태그 안쪽에 들어가는 컴퍼넌트들은 어떤 파일을  수정해서 만들 수 있을까?

 

바로 src디렉토리안에 있는 파일들이다.

 

그래서 우리가 앞으로 개발 작업을 하게 되면 대부분의 파일은 src라는 디렉토리 안에 넣게 될 것이다.

 

src에서 index.js로 들어가면 

 

 

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

 

document.getElementById('root’)가 있는데  이것은 <div id=“root”>를 말하는 것이다.

 

 

그리고 

<App />이  리액트를 통해 만든 사용자 정의태그 즉 컴퍼넌트이다.

 

그리고 저 컴퍼넌트의 실제 구현은  App.js의 App에 있다.(import App from './App’;)

 

 

 

<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로 들어가면 App클래스가 있는걸 볼 수 있다.

 

 

개발자 도구로 확인하면 해당내용이 실제로 <div id=“root”>에 들어가 있다.

 

Class App의 내용을 바꾸면 브라우저에 나오는 내용도 바꿀 수 있다.

 

 

내용을 바꿀 때 주의할 점은 반드시 리액트는 하나의 태그 안쪽에 나머지 태그들이 있어야 한다.

 

가장 바깥쪽에는 태그 하나가 있어야 한다. 없으면 에러가 난다.

 

 

 

 

 

 

08. CSS코딩 하는 법

 

 

 

 

리액트에서의 방법이라기 보다는 create react app의 지배 하에서 css를 어떻게 하면 되는가를 살펴보는 것이다.

 

Index.js에 import './index.css’;라는 것이 있다. Index.css로 들어가자

 

<index.js>

 

<index.css>

 

그 다음 위 사진과 같이 바꿔주면 화면에 css가 적용되어 나타난다.

 

 

이번엔 App.js로 들어가면 import './App.css’;가 있다

 

<App.js>

 

이건 App.js안에 들어있는 리액트의 컴퍼넌트가 로드 됐을 때 app.css도 같이 로드가 될 것이고 그러면 이제 디자인도 같이

할 수 있게 되는 것이다.

 

즉, App이라고 하는 컴퍼넌트에 디자인을 안에 넣는다.  이렇게 생각하면 된다.

 

 

 

 

 

 

09 배포하는 법

 

 

 

 

이번엔 deploy하는 법을 알아보자 

 

지금까지 우리가 만든 간단한 리액트 앱을 살펴보자

 

 

 

개발자 도구의 network탭을 들어가고 리로드하면 resources의 크기가 1.7mb나 된다.

 

기능이 하나도 없는데 이러는 이유는 리액트가 개발의 편의성을 위해서 여러가지 기능을 지금 추가해 놓은 상태이기 때문이다. 

그래서 create react app의 개발 환경은 상당히 파일의 무게가 무겁다.

 

이걸 개발자 자신만 쓰면 문제가 없는데 다른 사용자들이 1.7mb 짜리를 쓰게 하면 안된다!

 

게다가 이렇게 주면 보안적인 문제도 생길 수 있다.

 

 

 

그래서 프로덕션 모드의 어플리케이션을 만들 때는  빌드를 해야한다.

 

npm run build

 

를 하면 build디렉토리가 생긴다.

 

 

Build 디렉토리에서 index.html로 들어가면 공백이 하나도 없고 읽을 수가 없다. 

왜냐하면 create react app이 실제 프로덕션 환경에서 사용되는 앱을 만들기 위해서

 

우리가 이미 가지고 있는 index.html파일에서 공백과 같이 불필요하게 용량을 차지하는 정보를 모두 살균시킨 것이다.

 

그 결과가 이것인 것이다. 그래서 용량이 훨씬 작다

 

그리고 src에서 작업했던 파일들도 create react app이 용량을 줄인다든지 보안쪽으로든지 심미적으로 좋지 않은 내용들도

없앤다든지 해서 빌드에 있는 index.html이 그것을 로드할 수 있도록 우리 대신에 알아서 처리해주는 것이다.

(여기서 심미적인 것은 디자인을 말하는 것이 아니다.)

 

 

결론적으로 우리가 실제로 서비스할 때는 빌드 안에 있는 파일들을 쓰면 된다라는 것이고

 

웹서버에서 문서를 찾는 최상위 디렉토리에다가(document route) 빌드 디렉토리 안쪽에 있는 파일을 위치시키면 된다.

 

 

그러면 실서버 환경이 완성 된 것이다.

 

npm install -g server 

 

npm을 통해 설치할 수 있는 간단한 웹서버이다.

이렇게 하면 우리는 이 컴퓨터 어디에서나 serve 라는 명령어를 통해서 웹 서버를 설치할 수 있다.

 

 

npx serve

 

npx로 한번만 실행 시킬 웹서버를 다운로드 받아 실행시킬 수 있다.

 

여기에 -s build를 붙이면 serve라는 웹 서버를 다운받아서 실행 시킬 때 빌드(build)라는 디렉토리를 document route로 하겠다

라는 것이 -s이다.

 

 

 

 

Npx serve -s build를 치면 위와같이  Local:  http://localhost:5000 를 알려주는데 들어가면 

똑같이 동작을 한다.

 

 

여기서 다시 개발자 도구를 들어가고 Network에 들어가면 리소스가 147kb로 줄어있다.

동작하는 모습은 똑같지만 엄청나게 리소스가 줄어들었다!

 

 

참고)Public디렉토리는 우리가 create react app에 서 npm run start를 했을 때 파일을 찾는 document route이다.

 

 

 

지금까지 01~09강의를 통해서 설치 - 코딩 - 실행-배포하는 방법을 알아보았다.

 

 

 

 

 

 

 

 

 

'React > Today I learned' 카테고리의 다른 글

[React] why react?, JSX, Node.js, CRA  (0) 2021.06.27
[React] key값을 써야하는 이유  (0) 2021.06.26
Class 컴포넌트 Constructor에서 super(props)를 써야하는 이유  (0) 2021.06.23
생활코딩 React 11. 컴포넌트 만들기  (0) 2021.06.22
생활코딩 React(리액트) 01~06 개발환경 세팅  (0) 2021.06.18

+ Recent posts

티스토리툴바