2026. 05. 27.
SSE 동작흐름 #2
1. 다이어그램이 보여주는 네 개의 영역 다이어그램은 크게 네 박스로 구성되어 있습니다. 왼쪽 위는 사용자 A의 브라우저에서 동작하는 NotificationContext의 내부 구조입니다. 오른쪽 위는 서버의 SSE 엔드포인트와 알림 허브입니다. 왼쪽 아래는 댓글을 다는 사용자 B의 브라우저입니다. 오른쪽 아래는 댓글 API 서버입니다. 그리고 가장 아래에...
13 0 0
2026. 05. 27.
SSE 동작흐름 1
1. 그림의 전체 구조 이해 그림은 크게 왼쪽과 오른쪽 두 영역으로 나뉘어 있습니다. 왼쪽은 프론트엔드 영역으로 두 명의 사용자 A와 B가 각자의 브라우저에서 Context Provider를 통해 알림 상태를 관리하는 모습입니다. 오른쪽은 백엔드 영역으로 각 사용자마다 별도의 ReadableStreamRS이 만들어져 알림 허브에 등록되어 있는 모습입니다. ...
22 0 0
2026. 05. 27.
SSE의 ReadableStream
1. ReadableStream이란 무엇인가 ReadableStream은 웹 표준 API로, 데이터를 한 번에 모두 보내는 것이 아니라 조금씩 나눠서 흘려보내는 통로입니다. 일반적인 HTTP 응답은 서버가 데이터를 전부 준비한 다음 한 번에 클라이언트로 보냅니다. 반면 ReadableStream을 사용하면 서버가 데이터 일부를 만들어 보내고, 또 시간이 흐...
#readablestream#javascript#sse
22 0 0
2026. 05. 26.
실시간 채팅 처음부터 끝까지
튜토리얼 — 실시간 채팅 처음부터 끝까지 이 문서 하나로 개념부터 완성·테스트까지 끝냅니다. 위에서 아래로 순서대로 따라오면서, 나오는 코드 블록을 전부 그대로 입력하세요. 끝에는 회원가입·로그인·실시간 채팅이 동작하고 E2E 테스트까지 통과하는 앱이 나옵니다. 기술: Next.js 16 App Router · React 19 · TypeScript · T...
#채팅#next.js#react#sse
24 0 0
2026. 05. 26.
📋 알림 게시판 (JWT 인증 + SSE 실시간 알림)
튜토리얼 — 📋 알림 게시판 JWT 인증 + SSE 실시간 알림 회원가입하고, 로그인하고토큰은 안전하게 httpOnly 쿠키로, 글을 쓰고, 남의 글에 댓글을 답니다. 그리고 — 누군가 내 글에 댓글을 달면, 새로고침 없이 헤더의 🔔 에 알림이 뜹니다. 이 "실시간 알림" 이 바로 SSE가 현업에서 가장 많이 쓰이는 모습이에요. 이 튜토리얼의 원칙 — ...
#sse#jwt#next.js#react
63 0 0
2026. 05. 22.
고양이 갤러리 (종합 프로젝트) - 미들웨어제거버전
튜토리얼 — 고양이 갤러리 종합 프로젝트 마지막 종합 프로젝트입니다. 귀여운 고양이 갤러리를 만들면서 App Router · Context · Zustand · 폼 · fetch · localStorage 를 한 화면에서 다 만납니다. 이 튜토리얼의 원칙 — 한 번에 다 만들지 않습니다. 기능을 더할 때마다 그때 필요한 것만 만듭니다. 목록만 보여줄 땐 Z...
34 0 0
2026. 05. 21.
Hydration 이해하기
튜토리얼 — Hydration 이해하기 지금까지 useHydrated라는 훅을 가끔 만났습니다. "hydration이 끝나면 true가 된다"고만 짧게 넘어갔죠. 이번 절은 그 hydration이 정확히 무엇인지, 왜 깨질 수 있는지, 어떻게 다뤄야 하는지를 처음부터 끝까지 봅니다. 시작하기 전에 — 왜 이게 어렵게 느껴질까? React만 알 때는 useS...
#hydration#react
46 0 0
2026. 05. 21.
한 걸음 더 — selectors · `Object.keys` · `persist()` 자세히 보기
한 걸음 더 — selectors · Object.keys · persist 자세히 보기 useCollectionStore의 코드를 다시 펼쳐 놓고, 세 부분을 깊게 들여다봅니다. ts export const useCollectionStore = create persist // ← ③ 왜 감쌌나? set = { favorites: {}, // ... }, ...
22 0 0
2026. 05. 21.
고양이 갤러리 (종합 프로젝트)
튜토리얼 — 고양이 갤러리 종합 프로젝트 마지막 종합 프로젝트입니다. Todo 말고 — 귀여운 고양이 갤러리를 만들겠습니다. App Router · Zustand · Context · 폼 · fetch · localStorage 영속성을 한 화면에서 다 만나는 작은 앱이에요. 11단계를 순서대로 따라가면, 마지막에는 다음이 동작합니다. 🐈 갤러리에서 고양...
#react#next.js
86 1 0
2026. 05. 21.
Zustand `create((set) => ({...}))` 완전 분해
Zustand createset = {...} 완전 분해 들어가기 전에 Zustand는 React에서 전역 상태global state를 다룰 수 있게 해 주는 라이브러리입니다. "전역 상태"란 여러 컴포넌트가 공유하는 데이터를 말합니다. 예를 들어 할 일 목록todos을 여러 화면에서 함께 보고 수정해야 한다면, 그 목록은 한 곳에 모아두고 모두가 그 한 ...
#zustand#react
19 0 0
2026. 05. 21.
쇼핑 카트 (Zustand · 현업 패턴)
튜토리얼 — 쇼핑 카트 Zustand · 현업 패턴 카운트 +1은 Zustand 맛만 본 거였죠. 진짜 카트는 다릅니다. 어떤 상품이 몇 개 들어 있고 수량을 늘리거나 줄이거나 통째로 비우고 새로고침해도 살아남고 화면 곳곳헤더의 배지·상세 패널이 같은 데이터로 늘 일치합니다 이걸 컴포넌트가 복잡해지지 않게 다루는 게 Zustand가 잘하는 일이에요. 이 튜...
28 1 0
2026. 05. 21.
비밀번호 보기/숨기기 (useToggle 커스텀 훅)
튜토리얼 — 비밀번호 보기/숨기기 useToggle 커스텀 훅 useLocalStorage는 상태 + 동기화 로직을 한 묶음으로 숨겼습니다. 커스텀 훅이 잘하는 건 그게 다가 아니에요. 훨씬 단순한 묶음 도 훅으로 빼면 깔끔합니다 — "불리언 한 개와 그걸 뒤집는 함수"가 그 자리에 자주 등장합니다. 이번엔 그 묶음을 useToggle이라는 훅으로 만들고,...
24 0 0
2026. 05. 20.
Context로 사용자 정보 공유하기
튜토리얼 — Context로 사용자 정보 공유하기 책의 ThemeContext는 마지막 화면에서 "현재 테마: ???" 로 멈췄습니다. ???를 채우는 방법useContext이 다음 절에 있다 보니, "Context가 결국 뭘 해 주는지"가 손에 잡히지 않으셨을 거예요. 이 튜토리얼은 Context의 세 부분을 한 번에 끝까지 봅니다 — createCont...
#react#context
16 0 0
2026. 05. 20.
문의 폼 만들기 (제어 컴포넌트 · 제출 상태 · 결과 · 리셋)
튜토리얼 — 문의 폼 만들기 제어 컴포넌트 · 제출 상태 · 결과 · 리셋 SignupForm에서 배운 흐름은 그대로입니다 — 입력 → 검증 → 제출 중 → 결과 화면 → 다시 작성. 이번엔 입력 종류를 둘 더 다뤄 봅니다: 드롭다운 과 여러 줄 입력. 폼은 입력 종류가 무엇이든 다루는 방법이 같다는 걸 손으로 확인합니다. 개념 SignupForm은 두 개...
26 0 0
2026. 05. 20.
문의 폼 만들기 (제어 컴포넌트 · 제출 상태 · 결과 · 리셋)
튜토리얼 — 문의 폼 만들기 제어 컴포넌트 · 제출 상태 · 결과 · 리셋 SignupForm에서 배운 흐름은 그대로입니다 — 입력 → 검증 → 제출 중 → 결과 화면 → 다시 작성. 이번엔 입력 종류를 둘 더 다뤄 봅니다: 드롭다운 과 여러 줄 입력. 폼은 입력 종류가 무엇이든 다루는 방법이 같다는 걸 손으로 확인합니다. 개념 SignupForm은 두 개...
#제어컴포넌트#react
22 1 0
2026. 05. 20.
명함 입력 폼 만들기
튜토리얼 — 명함 입력 폼 만들기 SignupForm은 name과 email 두 칸이었습니다. 입력이 세 칸으로 늘면 객체 상태와 펼침 연산자가 더 가치를 합니다. 같은 패턴을 다른 모양에 그대로 옮겨 봅니다 — 이름·회사·직책 세 칸을 받아, 아래에 명함 미리보기를 띄우는 화면입니다. 개념 입력칸이 늘어도 패턴은 똑같습니다. 관련된 입력값들은 객체 하나로...
#제어폼#react
43 1 0
2026. 05. 19.
동작 줄이기 설정 존중하기 (matchMedia)
튜토리얼 — 동작 줄이기 설정 존중하기 matchMedia DarkModeBadge는 다크 모드 여부를 글자로 보여 주기만 했습니다. 이번엔 matchMedia로 알아낸 조건에 따라 실제로 다른 화면을 그립니다 — 8.1절 개념에서 말한 "다른 컴포넌트를 보여 준다"가 이거예요. 검사할 조건은 prefersreducedmotion 입니다. 어지럼증 등으로 ...
#darkmode#react
27 0 1
2026. 05. 19.
낡은 응답 막기 (useEffect의 ignore 패턴)
튜토리얼 — 낡은 응답 막기 useEffect의 ignore 패턴 책에서 본 UserCard는 의존성이 라서 ignore 패턴을 넣어도 겉보기 변화가 없었습니다. 패턴은 배웠지만 "왜 필요한지"는 눈으로 못 봤죠. 이번 튜토리얼은 race condition요청 경쟁을 일부러 재현해서, ignore 패턴이 없을 때 깨지고 있을 때 고쳐지는 것을 직접 봅니다....
#ignore-패턴#react
26 0 1
2026. 05. 19.
할 일 목록 만들기 (useReducer)
튜토리얼 — 할 일 목록 만들기 useReducer ReducerCounter의 상태는 숫자 하나, 지시는 문자열 하나"increment"였습니다. 이번엔 한 걸음 더 갑니다 — 상태가 할 일 목록배열 이고, 지시가 데이터를 함께 싣는 경우입니다. "어떤 할 일을 추가할지", "어떤 할 일을 지울지" 같은 정보를 지시에 담아 보내야 하니까요. 개념 카운터의...
#usereducer#react
32 0 1
2026. 05. 19.
튜토리얼 — 입력창 자동 포커스 만들기
RefDemo에서 본 useRef는 숫자를 기억하는 상자였습니다. useRef에는 더 자주 쓰는 용도가 있어요 — DOM 요소를 가리키는 손잡이입니다. 이번엔 페이지가 열리면 검색창에 커서가 저절로 들어가고, 버튼을 누르면 다시 검색창으로 커서가 돌아오는 화면을 만듭니다. 개념 같은 화면 요소를 자바스크립트로 직접 만...
#react#useref
23 0 1