오늘의 기분에 따른 차 추천 앱 만들기 (1)
PRISME 프로젝트 이후 심미적이고 사용성이 좋으면서도 성능도 괜찮은 그런 프로그램을 만들고 싶어졌다. 그래서 생각한 게 오늘의 기분에 따른 차 추천 앱이다. 작은 토이 프로젝트 정도겠지만. 선택한 언어는 C이다. 전혀 모른다. Electron으로 만들면 훨씬 쉬울 걸 왜 C으로 만드느냐고 하면.. 네이티브 앱을 만드는 걸 통해서만 배울 수 있는 뭔가가 ...
내 인생의 마지막일지도 모르는 부트캠프 강사일을 끝마치며......
이번 교육은 어쩌면 내 인생에 있어서 마지막 부트캠프 강의일지도 모르겠습니다. 지금까지 부트캠프에서 강의를 할 때 모두 오프라인 교육이었는데요. 이번은 처음으로 온라인 교육으로 부트캠프를 진행했습니다. 온라인 교육에서 좀 더 좋은 교육을 하기 위해, 이 fullsstackfamily.com을 만들었습니다. 부트캠프 교육의 문제점 중의 하나는 강의를 듣고 나...
발표 시연, 어떻게 해야 보는 사람이 감동할까
파이널 프로젝트 발표가 다음 주 수요일입니다. 발표 형식은 자율이지만 결과물 시연은 라이브든 동영상이든 반드시 들어가야 하고, 사실 발표에서 사람들 기억에 가장 오래 남는 게 바로 이 시연 장면입니다. 슬라이드에 적어둔 기술 스택이나 아키텍처 다이어그램은 몇 분만 지나도 흐릿해지는데, "아 저게 진짜 되네" 하...
맥에서 로컬 LLM으로 OpenCode 코딩하기 — 설치부터 실행까지
opencode 실행 화면. 이 글에서 만드는 것 - 클라이언트: OpenCode (오픈소스 터미널 코딩 에이전트) - 추론 엔진: llama.cpp (Ollama보다 저수준이지만 제어가 확실) - 모델: Qwen 3.6 27B, 8비트 양자화(Q80) — 로컬 코딩의 "스위트 스폿"으로...
天下無不散的筵席
(천하무불산적연석) 우리나라 제목으로는 학사신공, 원제는 범인수선전. 여기에서 "끝나지 않는 잔치는 없다." 라는 말이 종종 나오는데, 이 한자인듯 하다. 직역하면 "천하에 흩어지지 않는 잔치는 없다." 원래 홍루몽(紅樓夢)에 나오는 구절이라고 한다. 거기서 화려한 가씨 집안도 결국 다 흩어지는 걸 두고 한 말이라고 한다. 사람의 인연도 그...
CLAUDE 설치 및 사용
Claude Code 설치 튜토리얼 (Mac & Windows) Claude Code는 Anthropic이 만든 공식 CLI(명령줄) 코딩 에이전트입니다. 터미널에서 자연어로 명령을 내리면 코드를 읽고, 수정하고, 테스트를 실행하고, Git 작업까지 대신 해줍니다. --- 1. 설치 전 준비 (시스템 요구사항) 설치하기 전에 내 컴퓨터가 아래 조건을 만족하...
Next.js로 SEO 제대로 하기 — 빈 프로젝트에서 시작해 직접 확인까지
검색에 잘 걸리게 만드는 일을 흔히 SEO라고 부르는데, "기능은 다 됐는데 구글에 검색하면 우리 페이지가 안 나온다"는 이야기를 종종 듣습니다. Next.js를 쓰고 있다면 SEO의 큰 부분은 이미 깔려 있고, 나머지는 메타데이터 몇 개를 제대로 채워 넣는 일에 가깝습니다. 그 ...
Supabase에서 RPC 제대로 쓰기 — 트랜잭션부터 호출까지
프론트엔드를 공부하다 보면 "데이터를 읽고 쓰는 것"까지는 금방 익숙해지는데, 막상 결제·재고·포인트처럼 여러 데이터를 한꺼번에 바꿔야 하는 순간부터 코드가 흔들리기 시작합니다. "재고는 줄었는데 주문은 안 생겼다", "같은 좌석이 두 명에게 팔렸다" 같은 버그가 바로 이 지점에서 나옵니다. ...
프론트엔드 개발자 면접 질문 100선
React, Next.js, TailwindCSS, JavaScript, TypeScript, CSS를 학습하고 Vercel과 Supabase로 프로젝트를 만드는 분들을 위한 면접 질문과 답변 모음입니다. 자바스크립트 핵심, 타입스크립트, CSS와 테일윈드, 리액트 기초와 훅, 성능, Next.js, 웹과 브라우저, S...
API 스펙 정의부터 구현까지 — 그리고 SQL 없이 쓰는 Supabase 쿼리 완벽 가이드
에서 쇼핑몰 테이블(카테고리·상품·주문·주문상품)을 만들었습니다. 테이블이 준비됐다면 다음 순서는 "이 데이터로 어떤 API를 제공할지" 스펙을 정하는 것입니다. 이 글은 두 부분입니다. 1. API 스펙 정의 → Next.js 구현 : 기획자·비전공자도 회의에서 ...
쇼핑몰로 배우는 데이터 모델링 — 논리모델링·정규화·물리모델링부터 Supabase·API·Next.js까지
초보자가 쇼핑몰을 만들 때 가장 먼저 부딪히는 벽은 화면도, 코드도 아닙니다. "데이터를 어떤 표(테이블)로 나눌 것인가" 입니다. 여기서 잘못 설계하면 나중에 데이터가 꼬이고 버그가 쏟아집니다. 이 글은 하나의 쇼핑몰 예제로 데이터 모델링의 전 과정...
Supabase RLS로 게시판 만들기 — 목록은 누구나, 작성·수정·삭제는 로그인 본인만
과 에 이어, 이번엔 진짜 서비스다운 기능 — 게시판을 만듭니다. 요구사항은 명확합니다. - 목록 보기 / 상세 보기 : 로그인 없이 누구나 - 글쓰기 / 수정 / 삭제 : 로그인한 사용자만, 그리고 본인 글만 이 규칙을 어디서 강제할까요? API 코드에서 로 일일이...
Supabase 로그인 세션으로 "내 API" 호출하기 (Next.js · Bearer 토큰)
에서 Supabase + Next.js로 구글·카카오·페이스북 소셜 로그인을 구현했습니다. 그런데 로그인은 시작일 뿐입니다. 진짜 하고 싶은 건 이거죠. 이 글은 그 방법을 두 가지 시나리오로, 실제로 E2E 테스트까지 통과한 코드로 보여줍니다. 1. 같은 사이트...
Supabase + Next.js로 소셜 로그인(구글·카카오·페이스북) 완벽 구현하기
이 글은 Supabase를 백엔드로, Next.js 16 · React 19 · TypeScript · Tailwind CSS를 프론트엔드로 사용해 구글 · 카카오 · 페이스북 소셜 로그인을 처음부터 끝까지 구현하는 초보자용 완전 가이드입니다. 코드 한 줄, 콘솔 설정 한...
사용자들이 진짜 어떻게 쓰는지 보고 싶다면
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가 현업에서 가장 많이 쓰이는 모습이에요. 완성하면 이렇게 ...