[React.js, 스트링부트, AWS로 배우는 웹개발 101] 3장 프론트엔드 개발 -1

웹개발 101 - 3장 프론트엔드 개발

[React.js, 스트링부트, AWS로 배우는 웹개발 101] 3장 프론트엔드 개발 -1

[React.js, 스트링부트, AWS로 배우는 웹개발 101] 3장 프론트엔드 개발 -2

[React.js, 스트링부트, AWS로 배우는 웹개발 101] 3장 프론트엔드 개발 -3

3.1 프론트엔드 개발 환경 설정

이 책에서는 자바스크립트 라이브러리인 react.js를 이용해 프론트엔드를 개발한다. 이를 위해 node.js라는 자바스크립트 런타임 환경을 이용한다.

 

NPM, Node Package Manager

npm은 node.js의 패키지 관리 시스템이다. 이를 이용해 npmjs(https://www.npmjs.com)에서 node.js 라이브러리를 설치한다.

 

httpps://nodejs.org/en/에서 node.js를 다운로드 후 설치하자.

www.nodejs.or/en/에서 node.js를 설치

설치 후 커맨드라인에서 npm version 명령어로 버전 정보를 확인 가능하다.

 

npm init

- 이를 이용해서 Node.js 프로젝트를 초기화한다. 이 책에선 npm이 아닌 npx라는 툴로 react 애플리케이션을 초기화한다. npm으로 초기화할 경우, 일일이 설정해야 하는 부분이 많기 때문이다.

 

npm install react

- dependencies에 react 라이브러리가 추가된다.

 

npm install

- 필요한 모든 패키지를 설치한다.

 

 

material-ui 패키지 설치

프론트엔드 애플리케이션을 개발하기 위해 material-ui이라는 UI 패키지를 사용한다. 이를 이용하면 우리가 따로 UI를 위한 컴포넌트나 CSS 작성을 하지 않아도 된다.material-ui에 대한 자세한 정보는 https://material-ui.com 에서 확인할 수 있다.

 

 

브라우저의 작동 원리

 

index.html

 

HTML을 받은 브라우저는 두 단계를 거쳐 텍스트로 된 HTML을 브라우저에 보여준다.

1. 파싱

• 쉽게 말하자면 렌더링을 하기 위한 전처리 단계이다.
• 이 단계에서 브라우저가 하는 일에는 크게 3 가지가 있다.
  
  1. 브라우저는 HTML을 트리 자료구조의 형태인 DOM(Document Object Model) 트리로 변환한다.
  2. image, css, script 등 다운로드해야 하는 리소스를 다운로드한다. 이때, CSS의 경우, 다운로드하고 CSS를 CSSOM(CSS Object Model) 트리로 변환한다.
  3. 다운로드한 자바스크립트를 인터프리트, 컴파일, 파싱, 실행한다.

index.html DOM 트리

 

2. 렌더링

1. DOM 트리(내용)와 CSSOM 트리(디자인)를 합쳐 렌더 트리를 만든다.
2. 레이아웃을 정한다. 이는 트리의 각 노드가 브라우저의 어디에 배치될지, 어떤 크기로 배치될지를 정하는 것이다.
3. 브라우저 스크린에 렌더 트리의 각 노드를 그려준다.

이러한 과정을 지나면 사용자는 브라우저 상에서 시각화된 HTML 파일을 볼 수 있게 된다.

 

React.js

다음은 이 프로젝트를 진행하기 위해 반드시 필요한 개념과 가장 기본적인 빌딩 블록 설명이다. 더 자세히 알고 싶으면 공식 튜토리얼 사이트(https://ko.reactjs.org/docs/getting-started.html)를 참고할 수 있다.

 

SPA, Single Page Application

React.js는 대중적인 SPA 라이브러리/프레임워크이다. SPA란 말 그대로 한번 웹 페이지를 로딩하면 유저가 임의로 새로고침하지 않는 이상 페이지를 새로 로딩하지 않는 애플리케이션을 의미한다.

서버에게 새 HTML 페이지를 요청하지 않고 자바스크립트가 동적으로 HTML을 재구성해 만드는 클라이언트 애플리케이션이다.

 

React.js로 알아보는 SPA 작동 원리

1. 페이지를 로딩했을 때, 보이는 것은 1처럼 화면에 아무것도 보이지 않는 브라우저일 것이다. 이때는 index.html을 로딩하고 있는 것이다.
2. index.js의 일부로 ReactDom.render() 함수가 실행된다. 이 함수가 동적으로 HTML 요소를 우리 눈에 보이는 리액트 첫 화면으로 바꿔주는 것이다. 이 함수의 매개변수로 <App />을 주면 ReactDom App 컴포넌트를 렌더링한다.

다시 말해 ReactDOM은 매개변수로 넘겨받은 <App /> 컴포넌트를 이용해 DOM 트리를 만드는데, 이때 컴포넌트의 render 함수가 반환한 JSX를 렌더링한다.

 

이러한 렌더링 과정을 클라이언트-사이드 렌더링 (Client-Side Rendering)이라고 한다.

 

 

React 컴포넌트

리액트 컴포넌트가 무엇인지 리액트 애플리케이션을 생성하면서 만들어진 App.js를 통해 알아보자.

 

// 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이라는 컴포넌트를 
                    //다른 컴포넌트에서 사용하도록 명시할 수 있다.

 

이 App.js를 클래스로 구현하면 다음과 같이 render() 함수를 작성해야 한다.

import React from 'react';
import logo from '/logo.svg';
import '/App.css';

class App extends React.Component {
	render() {
    	return {
        <div className="App">
        	... //JSX code
        </div>
    );
    }
}

export default App;

 

두 코드 모두 자바스크립트 파일 내에서 HTML 코드를 사용하고 있다. 이는 React가 한 파일에서 HTML과 자바스크립트를 함께 사용하기 위해 확장한 자바스크립트 문법임을 알 수 있다. 이 문법을 JSX라고 부른다.

 

App 컴포넌트는 이처럼 렌더링 부분인 HTML과 로직 부분인 자바스크립트를 포함하는 JSX를 리턴한다. 이 JSX 문법은 Babel 이라는 라이브러리가 빌드 시간에 자바스크립트로 번역해준다.

 

JSX 코드 번역 예

 

// index.js
import React from 'react';                // 리액트를 사용하기 위해 import
import ReactDOM from 'react-dom/client';  // 리액트 DOM을 사용하기 위해 import
import './index.css';                     // css import
import App from './App';                  // App 컴포넌트 import
import reportWebVitals from './reportWebVitals';

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

1. import 를 이용해 App 컴포넌트를 불러온다.
2. <컴포넌트이름 />을 이용해 컴포넌트를 사용한다.

 

ReactDOM.render는 첫번째 매개변수로 리액트 컴포넌트를 받는다. 두번째 매개변수로는 root 엘리먼트를 받는다. 이는 root 엘리먼트에 첫번째 매개변수로 넘겨진 리액트 컴포넌트를 root 엘리먼트 아래에 추가하라는 뜻이다. root 엘리먼트는 index.html에 정의되어져 있다. React로 만든 모든 컴포넌트는 이 root 엘리먼트 하위에 추가된다.