사용자들이 진짜 어떻게 쓰는지 보고 싶다면
1. 서비스 이용 분석 도구 (Session Recording / Heatmap / UX Analytics) 사용자가 서비스 안에서 실제로 어떻게 행동하는지 이해하는 것은 UX 개선의 출발점이다. 전통적인 웹 분석 도구(Google Analytics, GA4)가 "무엇이 일어났는가"를 알려준다면, Session Recording과 Heatmap 도구는 "왜...
SSE 동작흐름 #2
1. 다이어그램이 보여주는 네 개의 영역 다이어그램은 크게 네 박스로 구성되어 있습니다. 왼쪽 위는 사용자 A의 브라우저에서 동작하는 NotificationContext의 내부 구조입니다. 오른쪽 위는 서버의 SSE 엔드포인트와 알림 허브입니다. 왼쪽 아래는 댓글을 다는 사용자 B의 브라우저입니다. 오른쪽 아래는 댓글 API 서버입니다. 그리고 가장 아래에...
SSE 동작흐름 1
1. 그림의 전체 구조 이해 그림은 크게 왼쪽과 오른쪽 두 영역으로 나뉘어 있습니다. 왼쪽은 프론트엔드 영역으로 두 명의 사용자 A와 B가 각자의 브라우저에서 Context Provider를 통해 알림 상태를 관리하는 모습입니다. 오른쪽은 백엔드 영역으로 각 사용자마다 별도의 ReadableStream(RS)이 만들어져 알림 허브에 등록되어 있는 모습입니다...
SSE의 ReadableStream
1. ReadableStream이란 무엇인가 ReadableStream은 웹 표준 API로, 데이터를 한 번에 모두 보내는 것이 아니라 조금씩 나눠서 흘려보내는 통로입니다. 일반적인 HTTP 응답은 서버가 데이터를 전부 준비한 다음 한 번에 클라이언트로 보냅니다. 반면 ReadableStream을 사용하면 서버가 데이터 일부를 만들어 보내고, 또 시간이 흐...
실시간 채팅 처음부터 끝까지
튜토리얼 — 실시간 채팅 처음부터 끝까지 이 문서 하나로 개념부터 완성·테스트까지 끝냅니다. 위에서 아래로 순서대로 따라오면서, 나오는 코드 블록을 전부 그대로 입력하세요. 끝에는 회원가입·로그인·실시간 채팅이 동작하고 E2E 테스트까지 통과하는 앱이 나옵니다. - 기술: Next.js 16 (App Router) · React 19 · TypeScript...
📋 알림 게시판 (JWT 인증 + SSE 실시간 알림)
튜토리얼 — 📋 알림 게시판 (JWT 인증 + SSE 실시간 알림) 회원가입하고, 로그인하고(토큰은 안전하게 httpOnly 쿠키로), 글을 쓰고, 남의 글에 댓글을 답니다. 그리고 — 누군가 내 글에 댓글을 달면, 새로고침 없이 헤더의 🔔 에 알림이 뜹니다. 이 "실시간 알림" 이 바로 SSE가 현업에서 가장 많이 쓰이는 모습이에요. 완성하면 이렇게 ...
고양이 갤러리 (종합 프로젝트) - 미들웨어제거버전
튜토리얼 — 고양이 갤러리 (종합 프로젝트) 마지막 종합 프로젝트입니다. 귀여운 고양이 갤러리를 만들면서 App Router · Context · Zustand · 폼 · fetch · localStorage 를 한 화면에서 다 만납니다. 완성하면 이렇게 동작합니다. - 🐈 갤러리에서 고양이들을 둘러본다 (그리드 ↔ 리스트) - 💖 마음에 드는 아이를 ...
Hydration 이해하기
튜토리얼 — Hydration 이해하기 지금까지 라는 훅을 가끔 만났습니다. "hydration이 끝나면 true가 된다"고만 짧게 넘어갔죠. 이번 절은 그 hydration이 정확히 무엇인지, 왜 깨질 수 있는지, 어떻게 다뤄야 하는지를 처음부터 끝까지 봅니다. --- 시작하기 전에 — 왜 이게 어렵게 느껴질까? React만 알 때는 , , 컴포넌트만 있...
한 걸음 더 — selectors · `Object.keys` · `persist()` 자세히 보기
한 걸음 더 — selectors · · 자세히 보기 의 코드를 다시 펼쳐 놓고, 세 부분을 깊게 들여다봅니다. --- ① Selector — 정확히 뭐고, 왜 쓰는가 Selector 는 단순히 "store 상태에서 필요한 값을 꺼내는(또는 계산하는) 함수" 입니다. 모양은 한결같이 이렇습니다. 는 store 의 현재 상태 전체이고, 반환값이 우리가 꺼낸 ...
고양이 갤러리 (종합 프로젝트)
튜토리얼 — 고양이 갤러리 (종합 프로젝트) 마지막 종합 프로젝트입니다. Todo 말고 — 귀여운 고양이 갤러리를 만들겠습니다. App Router · Zustand · Context · 폼 · fetch · localStorage 영속성을 한 화면에서 다 만나는 작은 앱이에요. 11단계를 순서대로 따라가면, 마지막에는 다음이 동작합니다. - 🐈 갤러리에...
Zustand `create((set) => ({...}))` 완전 분해
Zustand 완전 분해 들어가기 전에 Zustand는 React에서 전역 상태(global state)를 다룰 수 있게 해 주는 라이브러리입니다. "전역 상태"란 여러 컴포넌트가 공유하는 데이터를 말합니다. 예를 들어 할 일 목록()을 여러 화면에서 함께 보고 수정해야 한다면, 그 목록은 한 곳에 모아두고 모두가 그 한 곳을 바라보게 해야 합니다. Zus...
쇼핑 카트 (Zustand · 현업 패턴)
튜토리얼 — 쇼핑 카트 (Zustand · 현업 패턴) 카운트 은 Zustand 맛만 본 거였죠. 진짜 카트는 다릅니다. - 어떤 상품이 몇 개 들어 있고 - 수량을 늘리거나 줄이거나 통째로 비우고 - 새로고침해도 살아남고 - 화면 곳곳(헤더의 배지·상세 패널)이 같은 데이터로 늘 일치합니다 이걸 컴포넌트가 복잡해지지 않게 다루는 게 Zustand가 잘하는...
비밀번호 보기/숨기기 (useToggle 커스텀 훅)
튜토리얼 — 비밀번호 보기/숨기기 (useToggle 커스텀 훅) 는 상태 + 동기화 로직을 한 묶음으로 숨겼습니다. 커스텀 훅이 잘하는 건 그게 다가 아니에요. 훨씬 단순한 묶음 도 훅으로 빼면 깔끔합니다 — "불리언 한 개와 그걸 뒤집는 함수"가 그 자리에 자주 등장합니다. 이번엔 그 묶음을 이라는 훅으로 만들고, 비밀번호 보기/숨기기 토글에 써 봅니다...
Gemini Pro 무료로 이용할 수 있는 방법이 있다고?! 🆓
Gemini Pro 4개월 무료로 이용하는 방법 공유합니다! ▶️ 본인이 무료인지 잘 모르겠다면 밑에 사진을 참고해주세요! 1. 여기 링크에 들어가서 무료 혜택을 받습니다. ➡️ "4개월 동안 ₩0 ~~₩29,000~~(특별 초대 혜택)" 이렇게 가격이 0원 떠야 무료‼️ ➡️ 만약 0원이 아니고 가격이 뜰 경우, 선착순이 끝난 것이고 링크 만료이므로 사용...
Context로 사용자 정보 공유하기
튜토리얼 — Context로 사용자 정보 공유하기 책의 는 마지막 화면에서 "현재 테마: ???" 로 멈췄습니다. 를 채우는 방법()이 다음 절에 있다 보니, "Context가 결국 뭘 해 주는지"가 손에 잡히지 않으셨을 거예요. 이 튜토리얼은 Context의 세 부분을 한 번에 끝까지 봅니다 — 로 통로를 만들고, 로 값을 공급하고, 로 그 값을 꺼내 씁...
문의 폼 만들기 (제어 컴포넌트 · 제출 상태 · 결과 · 리셋)
튜토리얼 — 문의 폼 만들기 (제어 컴포넌트 · 제출 상태 · 결과 · 리셋) 에서 배운 흐름은 그대로입니다 — 입력 → 검증 → 제출 중 → 결과 화면 → 다시 작성. 이번엔 입력 종류를 둘 더 다뤄 봅니다: 드롭다운() 과 여러 줄 입력(). 폼은 입력 종류가 무엇이든 다루는 방법이 같다는 걸 손으로 확인합니다. --- 개념 은 두 개였습니다. 모든 입...
문의 폼 만들기 (제어 컴포넌트 · 제출 상태 · 결과 · 리셋)
튜토리얼 — 문의 폼 만들기 (제어 컴포넌트 · 제출 상태 · 결과 · 리셋) 에서 배운 흐름은 그대로입니다 — 입력 → 검증 → 제출 중 → 결과 화면 → 다시 작성. 이번엔 입력 종류를 둘 더 다뤄 봅니다: 드롭다운() 과 여러 줄 입력(). 폼은 입력 종류가 무엇이든 다루는 방법이 같다는 걸 손으로 확인합니다. --- 개념 은 두 개였습니다. 모든 입...
명함 입력 폼 만들기
튜토리얼 — 명함 입력 폼 만들기 은 과 두 칸이었습니다. 입력이 세 칸으로 늘면 객체 상태와 펼침 연산자가 더 가치를 합니다. 같은 패턴을 다른 모양에 그대로 옮겨 봅니다 — 이름·회사·직책 세 칸을 받아, 아래에 명함 미리보기를 띄우는 화면입니다. --- 개념 입력칸이 늘어도 패턴은 똑같습니다. - 관련된 입력값들은 객체 하나로 묶고 — - 한 칸만 바...
동작 줄이기 설정 존중하기 (matchMedia)
튜토리얼 — 동작 줄이기 설정 존중하기 (matchMedia) 는 다크 모드 여부를 글자로 보여 주기만 했습니다. 이번엔 로 알아낸 조건에 따라 실제로 다른 화면을 그립니다 — 8.1절 개념에서 말한 "다른 컴포넌트를 보여 준다"가 이거예요. 검사할 조건은 입니다. 어지럼증 등으로 화면 움직임이 불편한 사용자는 운영체제에서 "동작 줄이기"를 켭니다. 우리는...
낡은 응답 막기 (useEffect의 ignore 패턴)
튜토리얼 — 낡은 응답 막기 (useEffect의 ignore 패턴) 책에서 본 는 의존성이 라서 패턴을 넣어도 겉보기 변화가 없었습니다. 패턴은 배웠지만 "왜 필요한지"는 눈으로 못 봤죠. 이번 튜토리얼은 race condition(요청 경쟁)을 일부러 재현해서, 패턴이 없을 때 깨지고 있을 때 고쳐지는 것을 직접 봅니다. --- 개념 문제를 다시 그려 ...