Web (7) 썸네일형 리스트형 [Web] Observer 패턴과 Store - 직접 구현하며 이해한 상태 관리 Vanilla JS 환경에서 외부 프레임워크 없이 상태 관리를 직접 구현해보면서, Observer 패턴과 Store 구조를 먼저 접하게 되었다.이 글은 그 경험 기반으로, React 의 Context API 를 거쳐 Zustand 와 같은 전역 상태 관리 방식까지상태의 공유 범위와 구독 방식이 어떻게 확장되어 가는지를 구조적인 흐름으로 정리한 문서이다.특정 도구를 우열로 비교하기보다는, 각 단계에서 어떤 문제를 해결하려 했는지와그 과정에서 상태의 공유 범위와 구독 방식이 어떻게 달라졌는지를 회고하며 정리해보고자 한다.Observer 패턴상태 관리를 공부하면서 가장 먼저 만나게 된 개념이 Observer 패턴이었다.const subject = { observers: [], subscribe(fn) { .. [Web] React 의 useState 와 useReducer 이 글에서는 React 에서 컴포넌트 내부의 상태를 관리하는 두 가지 훅, useState 와 useReducer 의 동작 방식과 차이를 정리한다.useStateReact 에서는 보통 useState 라는 훅을 사용해 상태를 관리한다.function Dropdown({ text }) { const items = ["item-1", "item-2", "item-3"]; const [state, setState] = useState({ isOpen: false, selectedIndex: -1 }); const className = "dropdown"; const handleClick = () => setState((prev) => ({ ...prev, isOpen: !prev.isOpen })); .. [Web] 여러 방식으로 DOM 조작하기 - createElement 에서 JSX 까지 이 글은 순수 Vanilla JS 만으로 DOM 을 직접 다뤄야 했던 경험에서 시작해, 이후 React의 JSX 구조를 이해하게 되기까지의 학습 흐름을 정리한 기록이다.직접 DOM 을 조립하며 느꼈던 불편함과 시행착오, 그리고 그 과정에서 선언적인 UI 방식으로 사고가 어떻게 확장되었는지를 시간의 흐름에 따라 작성했다.따라서 특정 기술을 소개하거나 정답을 제시하려는 목적이라기보다, createElement 중심의 명령형 코드 에서 시작해 선언적 UI 방식 에 도달하기까지의 고민 과정을 순서대로 담은 글임을 먼저 알린다.JS 기본 DOM APIdocument.createElement()React 없이 순수 Vanilla JS 로 FE 개발을 할 때, 이런 코드를 작성했었다.const header = doc.. [Web] CSR (Client-Side Rendering) 클라이언트 사이드 렌더링 (CSR)1. 개요이 문서는 CSR(Client-Side Rendering) 렌더링 방식을 학습한 내용을 바탕으로,해당 개념과 내용을 정리하고 복습하기 위한 목적으로 작성되었다.2. SSR 방식의 한계전통적인 SSR(Server-Side Rendering) 은 서버에서 완성된 HTML 을 생성하여 브라우저로 전송하는 방식이었기 때문에 빠른 초기 로딩과 SEO에 유리했지만, 웹 애플리케이션이 복잡해지고 사용자 경험에 대한 요구가 높아지면서 다음과 같은 한계점들이 드러났다.SSR 의 한계모든 사용자 행동마다 전체 페이지 새로고침: 링크 클릭, 폼 제출 등 페이지 전환이 있을 때마다 서버에서 새로운 HTML 을 만들어야 함서버 부하 증가: 매 요청마다 서버가 HTML 생성을 담당해 트.. [Web] SSR (Server-Side Rendering) 1. 개요이 문서는 전통적인 SSR(Server-Side Rendering) 렌더링 방식을 학습하며, 그 과정에서 헷갈렸던 내용을 정리하고 복습하기 위한 목적으로 작성되었다.1.1. 초창기 서버에서의 HTML 생성 방식초창기에는 서버에서 직접 HTML 문자열을 만들어 브라우저로 전송하곤 했다. 서버 코드 안에서 데이터와 HTML을 문자열로 이어붙여 조립하는 식이었다.프로젝트 구조:project/└── server.js// server.jsapp.get('/products', (req, res) => { const products = getProductsFromDatabase(); let html = ''; html += '상품 목록'; products.forEach(product => { h.. [Web] 다국어 웹(i18n Web) 개발하기 1. 개요웹 애플리케이션을 다국어로 제공하는 것은 글로벌 사용자 경험을 고려할 때 필수적인 요소다.이번 프로젝트에서는 i18next 라이브러리를 기반으로 React 앱에서 다국어 전환 기능을 구현하였다. 사용자가 명시적으로 언어를 선택하지 않아도 기본 언어를 자동 인식하고, 사용자가 클릭 한 번으로 언어를 즉시 전환할 수 있도록 useLanguage 라는 사용자 정의 훅(Custom Hook) 을 설계하였다.이 포스팅에서는 지난 포스팅에 이어 해당 사용자 정의 훅의 구조와 구현 방식, 그리고 실제로 어떻게 활용했는지에 대해 정리해보려고 한다.2. 사용자 정의 훅React에는 상태 관리와 생명주기 처리를 보다 선언적으로 구현할 수 있도록 도와주는 훅(Hook) 이라는 개념이 존재한다. useState, u.. [Web] Responsive Web (반응형 웹) 개발하기 1. 개요웹 프론트를 구현함에 있어 반응형 디자인은 다양한 디바이스 환경에서도 일관된 사용자 경험을 제공하기 위해 꼭 필요한 요소라고 할 수 있다. 진행 중인 웹 프로젝트에서 PC, 태블릿, 모바일 사용자 모두에게 최적화된 화면을 제공하고자 반응형 구현에 대해 많은 고민을 하게 되었다.단순히 CSS 미디어 쿼리만으로 해결할 수 있는 영역도 있지만, 때로는 자바스크립트 로직으로 화면 크기를 동적으로 처리해야 하는 상황도 발생한다. 이에 따라 useResponsive 라는 사용자 정의 훅(Custom Hook) 을 직접 만들어 화면 정보를 추적하고, 이를 기반으로 컴포넌트의 동작을 제어할 수 있도록 구성하였다.이 포스팅에서는 해당 사용자 정의 훅의 구조와 구현 방식, 그리고 실제로 어떻게 활용했는지에 대해 .. 이전 1 다음
