웹 시스템 개발 #React 이론편

학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다.

부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다.

JavaScript 프런트엔드 개발의 짧은 역사

시장에 최초로 등장한 다양한 기술을 기반으로 정렬된 JavaScript 프런트엔드 개발의 짧은 역사는 다음과 같이 요약할 수 있습니다.

jQuery: 프런트엔드 개발 세계에서 가장 초기이자 가장 인기 있는 도구 중 하나였습니다. jQuery는 DOM, 이벤트 처리 및 Ajax 호출과의 상호 작용을 단순화하여 개발자가 순수 JavaScript의 복잡성을 몰라도 대화형 웹 애플리케이션을 더 쉽게 구축할 수 있게 해주었습니다.
Backbone.js: Backbone.js는 웹 애플리케이션 구축에 대한 보다 구조화된 접근 방식을 제공했습니다. JavaScript 웹 개발에 모델, 뷰 및 컬렉션 개념을 도입하였습다.
AngularJS(Angular1): Google이 개발한 AngularJS는 양방향 데이터 바인딩과 지시문 및 서비스를 사용하여 애플리케이션을 개발하는 새로운 방법을 도입하여 최신 단일 페이지 애플리케이션(SPA)의 기반을 마련했습니다.
React: Facebook(현 Meta)에서 개발한 React는 가상 DOM을 도입하여 개발자가 재사용 및 유지 관리가 가능한 UI 구성 요소를 구축할 수 있도록 했습니다.
Angular(Angular2): Angular2(일반적으로 Angular라고 함)는 AngularJS를 완전히 다시 작성한 것으로, TypeScript를 기본 언어로 채택하고 보다 구성 요소 기반 아키텍처를 채택하여 최신 웹 표준과 더욱 밀접하게 일치하는 더욱 강력하고 확장 가능한 프레임워크를 도입했습니다.
Vue.js: Vue.js는 Angular 및 React에 대한 대안으로 등장했습니다. Angular의 양방향 바인딩과 React의 구성 요소 기반 접근 방식과 같은 이전 버전의 최고의 기능을 결합하였습니다.
Svelte: Svelte는 브라우저에서 대부분의 작업을 수행하는 다른 프레임워크와 달리 작업을 컴파일 단계로 전환하여 최적화된 바닐라 JavaScript를 생성하여 성능을 향상시킵니다.

프레임워크의 추세

지난 10년 동안 프런트 엔드 프레임워크의 추세는 다음과 같습니다.

브라우저로 코드 마이그레이션: 전통적으로 웹 애플리케이션에서 힘든 작업의 대부분은 서버 측에서 수행되었습니다. 그러나 지난 10년 동안 클라이언트 측 처리 방식으로 상당한 변화가 있었습니다. 마이그레이션으로 인해 브라우저에서 처리되는 작업이 더 복잡해졌으며 이러한 복잡성을 관리하기 위해 더 강력하고 구조화된 프레임워크가 필요했습니다.
브라우저 성능 개선: 클라이언트측 처리로의 전환과 함께 브라우저 자체도 더욱 빠르고 효율적이 되었습니다. 최신 브라우저는 복잡한 작업을 처리하고 빠른 속도로 렌더링할 수 있으므로 보다 정교한 웹 애플리케이션과 사용자 인터페이스가 가능해졌습니다.
SPA(단일 페이지 애플리케이션)의 증가: SPA가 점점 인기를 얻고 있습니다. SPA에서 브라우저는 처음에 단일 HTML 문서를 로드합니다. 사용자는 사이트와 상호 작용할 때 새 페이지를 로드하지 않습니다. 대신 콘텐츠가 동일한 페이지에 동적으로 로드되고 렌더링됩니다. 이 접근 방식은 더욱 부드럽고 앱과 유사한 사용자 경험을 제공합니다.
- SPA에서는 애플리케이션의 여러 부분 간 탐색에 전체 페이지 새로 고침이 필요하지 않으므로 더 빠르고 유연해집니다.
- 새 페이지를 로드할 때마다 상태를 다시 빌드할 필요가 없으므로 애플리케이션 내에서 더 나은 상태 관리가 가능해집니다.
다양한 라이브러리 및 프레임워크의 출현:
- jQuery: "적게 작성하고 더 많이 수행"을 모토로 하는 이 JavaScript 라이브러리는 DOM 조작 및 AJAX 호출을 단순화하여 개발자가 대화형 기능을 더 쉽게 만들 수 있도록 하는 데 중요한 역할을 했습니다.
- 최신 JavaScript 프레임워크:
  - Angular: 대규모 고성능 SPA를 구축하는 데 적합한 포괄적인 프레임워크입니다.
  - React: Facebook(Meta)에서 개발한 React는 사용자 인터페이스 구축에 중점을 둔 라이브러리입니다. 성능을 향상시키는 가상 DOM 기능과 코드의 재사용성과 유지 관리성을 향상시키는 구성 요소 기반 아키텍처가 돋보입니다.
  - Vue.js: Vue는 적응성이 뛰어나고 다른 JavaScript 라이브러리를 사용하는 프로젝트에 통합될 수 있는 진보적인 프레임워크입니다.

Ajax

Ajax(Asynchronous JavaScript And XML)는 웹 애플리케이션 개발의 주요 과제를 해결하는 데 중추적인 기술이였습니다.

Ajax를 사용하여 웹 앱의 주요 문제 해결

대략적인(부분 페이지) 업데이트:
- Ajax는 전체 페이지를 다시 로드하지 않고 웹 페이지의 일부만 비동기적으로 업데이트할 수 있는 세분화된 업데이트를 허용합니다.
비동기 작동:
- Ajax는 비동기 작업을 도입하여 서버 응답을 기다리는 동안 웹 페이지가 대화형 상태를 유지할 수 있도록 합니다.
스크립트 처리:
- JavaScript 스크립트에 의해 처리되며 그에 따라 페이지의 DOM(Document Object Model)이 업데이트됩니다.

왼쪽 상단 다이어그램의 경우 서버에 대한 HTTP 요청을 트리거하는 브라우저의 사용자 활동으로 시작되며, 서버가 요청을 처리하는데 시간이 걸림을 보여줍니다. 서버는 일반적으로 전체 웹페이지인 응답을 클라이언트에게 다시 보내며, 이러한 프로세스를 사용자가 서버 응답이 필요할 때마다 반복됩니다.

왼쪽 하단 다이어그램의 경우 왼쪽 상단 다이어그램과 비슷한 프로세스이지만, 전체 페이지에 대한 요청을 서버에 보내는 대신 Ajax엔진은 요청을 비동기식으로 보내, 필요한 데이터만 다시 전송하여, 전체 페이지를 다시 로드하지 않고 웹 페이지의 특정 부분을 업데이트하게 됩니다.

React overview

React는 사용자 인터페이스 구축을 효율적으로 도와주는 JavaScript 라이브러리입니다. 개발자는 페이지를 다시 로드하지 않고도 데이터를 업데이트할 수 있는 대규모 웹 애플리케이션을 만들 수 있습니다.

배경 및 제작

React는 Facebook의 소프트웨어 엔지니어인 Jordan Walke가 만들었습니다. 2011년에 Facebook의 뉴스피드에 처음 배포되었고 이후에는 Instagram에 배포되었습니다.
2013년 5월 JSConf US에서 오픈소스로 공개되었습니다.
처음에 React는 "MVC의 V"(Model-View-Controller)로 설명되었습니다. 이는 애플리케이션의 뷰 계층으로 설계되었음을 의미합니다.

Model-View-Controller(MVC) 패턴에서 사용

React는 MVC 패턴의 View 레이어와 연결되는 경우가 많지만 특정 아키텍처를 적용하지는 않습니다. React 구성 요소는 뷰를 캡슐화하고 상태를 관리하며 이 상태를 기반으로 UI를 렌더링합니다.
개발자는 React로 대규모 애플리케이션을 구축할 때 모델 및 컨트롤러 레이어에 추가 라이브러리를 사용하는 경우가 많습니다.
React는 HTML을 JavaScript 내에서 작성할 수 있게 해주는 구문 확장인 JSX를 사용할 수 있으므로 선택 사항이지만 일반적으로 사용되는 템플릿 언어입니다.

대규모 및 단일 페이지 애플리케이션(SPA)에 중점

React의 디자인은 단일 페이지 애플리케이션(SPA) 및 대규모 프로젝트 개발에 적합합니다.
데이터가 변경될 때 구성 요소를 효율적으로 업데이트하고 렌더링하는 방법을 제공합니다.

리액트 설치 및 실행방법

React 새로 설치하는 방법 및 기존 프로젝트에 설치하는 방법!

이번 포스팅에는 React를 사용하기 위해 설치해야 하는 (환경)요소들을 준비하는 방법에 대해 공유하고자 합니다. 준비물 Node.js nodejs.org LTS 버전을 다운받으시면 됩니다. Visual Studio Code - Code Editing

wlsdn629.tistory.com

React 프로젝트의 파일

public/index.html
- React 애플리케이션의 기본 HTML 파일입니다. 애플리케이션의 진입점이며 브라우저에 의해 로드됩니다.
- 파일 안에는 일반적으로 React 구성 요소의 탑재 지점인 root 또는 app과 같은 ID를 가진 <div> 요소가 있습니다.
src/index.js
- React 애플리케이션의 JavaScript 진입점입니다.
- React 환경 설정, 필요한 라이브러리 가져오기, 최상위 React 구성요소(보통 'App.js')를 DOM에 렌더링하는 역할을 담당합니다.
- ReactDOM.createRoot(React 18 기준)를 사용하여 React 구성 요소 트리의 루트 컨테이너를 만듭니다.
src/App.js:
- 일반적으로 애플리케이션의 루트 구성 요소인 React 구성 요소를 정의합니다.
- HTML과 유사한 JavaScript 구문 확장인 JSX가 포함되어 있습니다. 이 JSX는 구성 요소가 표시할 UI의 구조를 정의합니다.

React 및 React-DOM

React는 원하는 UI 모양을 알려주면 데이터가 변경될 때 DOM이 업데이트됩니다.

React 요소는 구성 요소 인스턴스 또는 DOM 노드와 원하는 속성을 설명하는 일반 개체입니다.

JSX 구문을 예를 들면 아래와 같습니다.

React.createElement("h1", {id: "recipe-0"}, "Baked Salmon");

이는 더 일반적으로 사용되는 다음 JSX와 동일합니다.

<h1 id="recipe-0">Baked Salmon</h1>

React 18에서 ReactDOM.createRoot는 DOM에서 React 구성 요소 트리를 초기화하는 데 사용되는 새로운 API입니다. ReactDOM.render 메서드는 React 18에서 더 이상 지원되지 않는다고 합니다.

import { createRoot } from 'react-dom/client';

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

간단한 App.js 코드

// App.js
import React from 'react';
import ToDo from './components/ToDo';

function App() {
  const todo = [
    { item: 'Send notification', urgent: 'Yes' },
    { item: 'Submit revision', urgent: 'No' }
  ];

  return (
    <div>
      <h2>What a wonderful world!</h2>
      <ToDo item={todo[0].item} urgent={todo[0].urgent} />
      <ToDo item={todo[1].item} urgent={todo[1].urgent} />
    </div>
  );
}

export default App;

Simple ToDo.js

// components/ToDo.js
import React from 'react';
import './ToDo.css';

export default function ToDo(props) {
  return (
    <div className="todo-container">
      <div className="todoItems">
        {props.item}
      </div>
      <div className="todoUrgency">
        {props.urgent}
      </div>
    </div>
  );
}

구성 확인

Express 백엔드를 사용하여 React 애플리케이션을 배포하려면 프런트엔드와 백엔드가 올바르게 통신하고 웹 트래픽을 처리하도록 올바르게 구성되었는지 확인하는 여러 단계가 필요합니다.

프런트엔드 및 백엔드 코드 준비

일반적으로 Postman 또는 단위 테스트와 같은 도구를 사용하여 Express의 백엔드 API 엔드포인트가 올바르게 정의되고 테스트되었는지 확인해야 합니다.

CORS 구성을 사용하여 백엔드 배포

React 프런트엔드와 Express 백엔드가 서로 다른 원본(도메인, 포트 또는 프로토콜)에서 제공되는 경우 프런트엔드의 원본 간 요청을 허용하도록 Express 앱에서 CORS를 구성해야 합니다.

const cors = require('cors');
app.use(cors());

Express를 사용하여 React 빌드 제공

프로덕션에 최적화된 빌드를 생성하려면 npm run build를 사용하여 React 애플리케이션을 빌드하면 됩니다.

Model View Controller (MVC)

문제를 분리하여 관리 및 발전을 더 쉽게 만드는 방법입니다.

MVC 개요

Model: 데이터 및 비즈니스 로직을 관리합니다. 데이터베이스의 데이터 검색, 삽입 및 업데이트와 관련이 있습니다.
View: 사용자에게 데이터를 표시합니다. 모델의 데이터를 사용자에게 표시하는 UI입니다.
Controller: 사용자 입력 및 상호 작용을 처리합니다. 뷰와 모델 사이의 중개자 역할을 하며 사용자 입력에 따라 필요에 따라 모델을 업데이트하고 사용자에게 표시할 뷰를 선택합니다..

MVC 아키텍처 분석

디커플링: 사용자 인터페이스 코드에서 데이터 액세스와 비즈니스 로직을 분리하여 개발 및 유지 관리를 단순화하는 것을 목표로 합니다.
통신: 각각 고유한 책임이 있는 객체(모델, 뷰 및 컨트롤러) 간의 명확한 통신 채널을 정의합니다.

3계층 아키텍처의 MVC

계층 1(View): 애플리케이션과 상호 작용하는 클라이언트 측입니다.
계층 2(Controller): 사용자 상호 작용에 응답하고, 입력을 처리하고, 모델과 통신하는 서버 측 로직입니다.
계층 3(Model): 일반적으로 애플리케이션이 데이터를 저장하고 검색하는 데 사용하는 데이터베이스 또는 데이터 스토리지 계층입니다.

저작자표시 동일조건