[tickit] Vanilla TypeScript로 React 아키텍처 구현해 보기

이 글의 목적은 바닐라 JavaScript (TypeScript)를 사용하여 React의 클래스 컴포넌트를 구현함으로써, React의 장점과 효율성을 깊이 있게 이해하는 것이다. 컴포넌트 기반 UI 구성과 생명주기 관리, 상태 관리를 직접 구현해 보겠다.

이 글의 목적은 바닐라 JavaScript (TypeScript)를 사용하여 SPA 라우팅 기능을 구현함으로써, SPA 라우팅의 기본 원리를 학습하는 것이다.

이 글의 목적은 JSX와 유사한 구문을 직접 구현하여 React의 컴포넌트 렌더링 방식과 유사한 방식으로 UI를 구성해 보고, 프레임워크에 의존하지 않고도 선언적 UI를 구현하는 방법을 이해하는 것이다.

예전에 만들다가 중간에 멈춘 프로젝트가 하나 있었다. 이번에 다시 개발을 이어가려고 보니, 바로 다음 기능을 추가하기보다 먼저 기존 코드를 정리하는 게 맞겠다는 생각이 들었다.

이 글의 목적은 Vanilla JavaScript(TypeScript)로 가상 DOM의 기본 구조를 직접 구현해 보며, diffing과 patching이 어떤 방식으로 동작하는지 학습하는 것이다.

이 글의 목적은 Vanilla JavaScript(TypeScript)로 전역 상태 관리의 기본 구조를 직접 구현해 보며, 여러 컴포넌트가 공통 상태를 공유하고 상태 변화에 따라 다시 렌더링되는 흐름을 학습하는 것이다.

최근 개인 프로젝트를 바닐라 JavaScript 구조에서 React로 마이그레이션하고 있다. 기능 자체를 옮기는 것도 일이지만, 막상 해 보면 더 골치 아픈 건 예전 방식의 흔적을 어디까지 가져갈 것인가 하는 문제다. 이번에 가장 먼저 부딪힌 건 저장 상태 관리였다.

처음에는 이벤트 핸들러가 제대로 연결되지 않은 문제라고 생각했다. 하지만 원인을 따라가 보니, 단순한 클릭 이벤트 문제가 아니라 이벤트 생명주기 관리, Virtual DOM diff 로직, Fragment 처리 방식이 함께 얽혀 있었다.

Electron 앱에 구글 로그인을 연동하면서 처음에는 일반 웹에서 하던 OAuth 흐름을 떠올렸다.백엔드에는 이미 구글 로그인 API가 구현되어 있었고, 프론트엔드에서는 Orval을 통해 인증 API 코드도 생성되어 있었다. 생성된 API 명세를 보면 구글 로그인과