Dev

바닐라JS(TS)로 리액트 SPA 구현하기 | (6) JSX 구현해보기

1. 기본 세팅 2. 클래스로 컴포넌트 구현 3. 클래스로 HashRouter 구현 4. 클래스로 BrowserRouter 구현 5. 간단한 웹 구현해보기 6. JSX 구현해보기 JSX란? React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 마크업과 로직을 모두 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. JSX도 결국엔 표현식입니다. 컴파일이 끝나면, JSX는 JavaScript 객체로 인식됩니다. 이전 글에서, 우리는 마크업과 해당 엘리먼트 내의 로직을 따로 분리하여 코드를 작성했었습니다. JSX를 구현하여 이를 함께 포함할 수 있도록 해봅시다! JSX를 구현한 후, 우리는 컴포넌트 내 렌더함수에서 다음과 같은 형태로 컴포넌트를 작성하게..

바닐라JS(TS)로 리액트 SPA 구현하기 | (5) 간단한 웹 구현해보기

1. 기본 세팅 2. 클래스로 컴포넌트 구현 3. 클래스로 HashRouter 구현 4. 클래스로 BrowserRouter 구현 5. 간단한 웹 구현해보기 6. JSX 구현해보기 컴포넌트와 라우터가 만들어졌으니, 한번 애플리케이션을 띄워봅시다! src/index.ts import { initRouter, Route } from "./core/BrowserRouter"; // 또는 HashRouter import Main from "./pages/Main"; import Component from "@/core/Component"; import "./scss/index.scss"; import Sub from "./pages/Sub"; const routes: Route[] = [ { path: "/", ..

바닐라JS(TS)로 리액트 SPA 구현하기 | (4) 클래스로 BrowserRouter 구현

1. 기본 세팅 2. 클래스로 컴포넌트 구현 3. 클래스로 HashRouter 구현 4. 클래스로 BrowserRouter 구현 5. 간단한 웹 구현해보기 6. JSX 구현해보기 이번 글에서는 BrowserRouter를 구현해보도록 하겠습니다! 1. Route 타입 정의 export type Route = { path: string; page: typeof Component; }; 이는 HashRouter와 동일합니다. 2. Router 구조 class Router { $app: HTMLElement; routes: { [key: string]: typeof Component; } = {}; fallback: string = "/"; constructor() {} // 생성자 initEvent() {} ..

바닐라JS(TS)로 리액트 SPA 구현하기 | (3) 클래스로 HashRouter 구현

1. 기본 세팅 2. 클래스로 컴포넌트 구현 3. 클래스로 HashRouter 구현 4. 클래스로 BrowserRouter 구현 5. 간단한 웹 구현해보기 6. JSX 구현해보기 라우터를 구현하는 대표적인 방법에는 두 가지가 있습니다. 바로 BrowserRouter와 HashRouter인데요, 이 둘의 차이에 대해 잘 모르신다면 아래의 글을 먼저 읽어주세요 :) [BrowserRouter와 HashRouter, 뭐가 다를까? (feat. React Router)] HashRouter와 BrowserRouter를 모두 구현해 볼 텐데요, 이번 글에서는 HashRouter에 대해 먼저 다루어보도록 하겠습니다. 1. Route 타입 정의 export type Route = { path: string; page..

BrowserRouter와 HashRouter, 뭐가 다를까? (feat. React Router)

CRA로 리액트 프로젝트를 생성하면, 기본적으로 react-router-dom을 사용하게 됩니다. 이 react-router-dom은 두 가지 라우터를 제공합니다. 바로 BrowserRouter와 HashRouter죠. 이 두 개념은 react-router-dom에만 해당되는 이야기는 아닙니다. BrowserRouter는 HTML5의 history API를 사용한 방식이고, HashRouter는 URL의 hash를 사용한 방식입니다. 리액트를 사용하지 않고 직접 라우터를 직접 구현한다 하더라도, 우리는 이 방식 중 하나를 선택할 수 있습니다. react-router 우선은 리액트 라우터에 대해 잠깐 살펴봅시다. SPA가 등장하기 전에는 어떻게 페이지를 이동시켰을까요? 를 사용해서 직접 url을 변경시켰습..

바닐라JS(TS)로 리액트 SPA 구현하기 | (2) 클래스로 컴포넌트 구현

1. 기본 세팅 2. 클래스로 컴포넌트 구현 3. 클래스로 HashRouter 구현 4. 클래스로 BrowserRouter 구현 5. 간단한 웹 구현해보기 6. JSX 구현해보기 리액트 컴포넌트와 유사한 구조를 class로 만들어 봅시다! 1. Component 구조 export interface PropsType {} export interface StateType {} export default class Component { target: Element; props: P; state: S; constructor() {} // 생성자 setup() {} // 기본적인 선언 및 할당 template() { // element 반환 return "" } render() {} mount() {} updat..

바닐라JS(TS)로 리액트 SPA 구현하기 | (1) 기본 세팅

1. 기본 세팅 2. 클래스로 컴포넌트 구현 3. 클래스로 HashRouter 구현 4. 클래스로 BrowserRouter 구현 5. 간단한 웹 구현해보기 6. JSX 구현해보기 별도의 SPA 라이브러리 없이 Single page application을 만들어봅시다! 언어는 타입스크립트, 번들러는 웹팩을 사용하도록 하겠습니다. html과 css 웹팩 플러그인도 함께 설치하고, 바벨 트랜스파일러도 설치합시다. 저는 sass를 사용하기 위한 추가적인 설치를 함께 해주었습니다. devDependencies @babel/cli @babel/core @babel/preset-env @babel/preset-typescript babel-loader css-loader html-loader html-webpack-..

SPA의 가상돔(virtual DOM)이란? 리액트의 휴리스틱 디핑 알고리즘

DOM이란? DOM(Document Object Model)이란, 웹 페이지를 이루는 태그들을 브라우저가 트리 구조로 만든 객체 모델입니다. HTML과 자바스크립트를 이어주는 역할로 볼 수 있습니다. 자바스크립트로는 Document라는 전역 객체를 통해 HTML 태그들을 조종할 수 있습니다. 기존의 웹 애플리케이션은 자바스크립트로 직접 DOM을 제어했습니다. 이렇게 돔을 직접 제어하는 방식이 아닌, 리얼 돔을 추상화한 자바스크립트 객체를 구성하여 사용하는 방식이 가상 돔의 개념입니다. SPA의 등장 전통적인 웹 사이트는 인터렉션이 발생할 때마다 완전히 새로운 페이지를 서버에서 전송해 주었습니다. 그러나 점차 웹 사이트가 고도화됨에 따라 한 페이지에 해당하는 페이지 용량이 커져갔고, 매번 새로운 페이지를 ..