이번 교육은 어쩌면 내 인생에 있어서 마지막 부트캠프 강의일지도 모르겠습니다. 지금까지 부트캠프에서 강의를 할 때 모두 오프라인 교육이었는데요. 이번은 처음으로 온라인 교육으로 부트캠프를 진행했습니다. 온라인 교육에서 좀 더 좋은 교육을 하기 위해, 이 fullsstackfamily.com을 만들었습니다. 부트캠프 교육의 문제점 중의 하나는 강의를 듣고 나...
파이널 프로젝트 발표가 다음 주 수요일입니다. 발표 형식은 자율이지만 결과물 시연은 라이브든 동영상이든 반드시 들어가야 하고, 사실 발표에서 사람들 기억에 가장 오래 남는 게 바로 이 시연 장면입니다. 슬라이드에 적어둔 기술 스택이나 아키텍처 다이어그램은 몇 분만 지나도 흐릿해지는데, "아 저게 진짜 되네" 하...
Ollama 없이 llama.cpp + Qwen 3.6 27B를 로컬에서 돌리고, 오픈소스 코딩 에이전트 OpenCode를 붙여서 "Claude Code처럼" 쓰는 전 과정 정리. 데이터가 밖으로 안 나가고, 토큰 요금도 없다. opencode 실행 화면. 이 글에서 만드는 것 OpenC...
천하무불산적연석 우리나라 제목으로는 학사신공, 원제는 범인수선전. 여기에서 "끝나지 않는 잔치는 없다." 라는 말이 종종 나오는데, 이 한자인듯 하다. 직역하면 "천하에 흩어지지 않는 잔치는 없다." 원래 홍루몽紅樓夢에 나오는 구절이라고 한다. 거기서 화려한 가씨 집안도 결국 다 흩어지는 걸 두고 한 말이라고 한다. 사람의 인연도 그렇다. ...
Next.js 16 App Router · React 19 · TypeScript 새 프로젝트를 하나 만들어 SEO에 필요한 것들을 하나씩 붙여 보고, 정말로 동작하는지 끝까지 확인한 기록입니다. 글에 나오는 코드는 전부 실제로 띄워서 검증한 것이고, 명령 출력도 그대로 가져왔습니...
프론트엔드를 공부하다 보면 "데이터를 읽고 쓰는 것"까지는 금방 익숙해지는데, 막상 결제·재고·포인트처럼 여러 데이터를 한꺼번에 바꿔야 하는 순간부터 코드가 흔들리기 시작합니다. "재고는 줄었는데 주문은 안 생겼다", "같은 좌석이 두 명에게 팔렸다" 같은 버그가 바로 이 지점에서 나옵니다. ...
React, Next.js, TailwindCSS, JavaScript, TypeScript, CSS를 학습하고 Vercel과 Supabase로 프로젝트를 만드는 분들을 위한 면접 질문과 답변 모음입니다. 자바스크립트 핵심, 타입스크립트, CSS와 테일윈드, 리액트 기초와 훅, 성능, Next.js, 웹과 브라우저, S...
4편https://www.fullstackfamily.com/@urstory/posts/14782에서 쇼핑몰 테이블카테고리·상품·주문·주문상품을 만들었습니다. 테이블이 준비됐다면 다음 순서는 "이 데이터로 어떤 API를 제공할지" 스펙을 정하는 것입니다. 이 글은 ...
초보자가 쇼핑몰을 만들 때 가장 먼저 부딪히는 벽은 화면도, 코드도 아닙니다. "데이터를 어떤 표테이블로 나눌 것인가" 입니다. 여기서 잘못 설계하면 나중에 데이터가 꼬이고 버그가 쏟아집니다. 이 글은 하나의 쇼핑몰 예제로 데이터 모델링의 전 과정을 ...
1편소셜 로그인https://www.fullstackfamily.com/@urstory/posts/14777과 2편세션으로 내 API 호출https://www.fullstackfamily.com/@urstory/posts/14779에 이어, 이번엔 진짜 서비스다운 기...
Supabase 로그인 세션으로 "내 API" 호출하기 Next.js · Bearer 토큰 지난 글https://www.fullstackfamily.com/@urstory/posts/14777에서 Supabase + Next.js로 구글·카카오·페이스북 소셜 로그인을 구현했습니다. 그런데 로그인은 시작일 뿐입니다. 진짜 하고 싶은 건 이거죠. "로그인한 사...
Supabase + Next.js로 소셜 로그인구글·카카오·페이스북 완벽 구현하기 이 글은 Supabase를 백엔드로, Next.js 16 · React 19 · TypeScript · Tailwind CSS를 프론트엔드로 사용해 구글 · 카카오 · 페이스북 소셜 로그인을 처음부터 끝까지 구현하는 초보자용 완전 가이드입니다. 코드 한 줄, 콘솔 설정 한 단...
1. 다이어그램이 보여주는 네 개의 영역 다이어그램은 크게 네 박스로 구성되어 있습니다. 왼쪽 위는 사용자 A의 브라우저에서 동작하는 NotificationContext의 내부 구조입니다. 오른쪽 위는 서버의 SSE 엔드포인트와 알림 허브입니다. 왼쪽 아래는 댓글을 다는 사용자 B의 브라우저입니다. 오른쪽 아래는 댓글 API 서버입니다. 그리고 가장 아래에...
1. 그림의 전체 구조 이해 그림은 크게 왼쪽과 오른쪽 두 영역으로 나뉘어 있습니다. 왼쪽은 프론트엔드 영역으로 두 명의 사용자 A와 B가 각자의 브라우저에서 Context Provider를 통해 알림 상태를 관리하는 모습입니다. 오른쪽은 백엔드 영역으로 각 사용자마다 별도의 ReadableStreamRS이 만들어져 알림 허브에 등록되어 있는 모습입니다. ...
1. ReadableStream이란 무엇인가 ReadableStream은 웹 표준 API로, 데이터를 한 번에 모두 보내는 것이 아니라 조금씩 나눠서 흘려보내는 통로입니다. 일반적인 HTTP 응답은 서버가 데이터를 전부 준비한 다음 한 번에 클라이언트로 보냅니다. 반면 ReadableStream을 사용하면 서버가 데이터 일부를 만들어 보내고, 또 시간이 흐...
튜토리얼 — 실시간 채팅 처음부터 끝까지 이 문서 하나로 개념부터 완성·테스트까지 끝냅니다. 위에서 아래로 순서대로 따라오면서, 나오는 코드 블록을 전부 그대로 입력하세요. 끝에는 회원가입·로그인·실시간 채팅이 동작하고 E2E 테스트까지 통과하는 앱이 나옵니다. 기술: Next.js 16 App Router · React 19 · TypeScript · T...
튜토리얼 — 📋 알림 게시판 JWT 인증 + SSE 실시간 알림 회원가입하고, 로그인하고토큰은 안전하게 httpOnly 쿠키로, 글을 쓰고, 남의 글에 댓글을 답니다. 그리고 — 누군가 내 글에 댓글을 달면, 새로고침 없이 헤더의 🔔 에 알림이 뜹니다. 이 "실시간 알림" 이 바로 SSE가 현업에서 가장 많이 쓰이는 모습이에요. 이 튜토리얼의 원칙 — ...
튜토리얼 — 고양이 갤러리 종합 프로젝트 마지막 종합 프로젝트입니다. 귀여운 고양이 갤러리를 만들면서 App Router · Context · Zustand · 폼 · fetch · localStorage 를 한 화면에서 다 만납니다. 이 튜토리얼의 원칙 — 한 번에 다 만들지 않습니다. 기능을 더할 때마다 그때 필요한 것만 만듭니다. 목록만 보여줄 땐 Z...
튜토리얼 — Hydration 이해하기 지금까지 useHydrated라는 훅을 가끔 만났습니다. "hydration이 끝나면 true가 된다"고만 짧게 넘어갔죠. 이번 절은 그 hydration이 정확히 무엇인지, 왜 깨질 수 있는지, 어떻게 다뤄야 하는지를 처음부터 끝까지 봅니다. 시작하기 전에 — 왜 이게 어렵게 느껴질까? React만 알 때는 useS...
한 걸음 더 — selectors · Object.keys · persist 자세히 보기 useCollectionStore의 코드를 다시 펼쳐 놓고, 세 부분을 깊게 들여다봅니다. ts export const useCollectionStore = create persist // ← ③ 왜 감쌌나? set = { favorites: {}, // ... }, ...
