Supabase Postgres 관계형 데이터 모델링: 외래키와 TaskFlow 스키마 설계
Supabase Auth 사용자와 profiles·tasks를 외래키로 연결하고 CHECK, 인덱스, 기본 차단 RLS로 TaskFlow 관계형 스키마를 설계합니다.
책상 정리 용품 · 제휴
모아 보기이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
웹 화면과 서비스를 만드는
해비의 개발 기록
웹사이트 제작·운영과 개인 서비스, 자동화·AI 도구를 만들며 배운 내용과 문제 해결 과정을 정리합니다.
전체 글
Supabase Auth 이메일·비밀번호 회원가입·로그인·세션 기초
Supabase Auth로 이메일·비밀번호 회원가입, 로그인, 로그아웃을 구현하고 세션 확인과 인증 상태에 따른 화면 동기화를 익힙니다.
웹 요청 장애 진단: DNS·HTTP·CORS·인증·캐시 문제를 계층별로 찾기
웹 요청 장애를 URL·DNS·연결·TLS·HTTP·인증·CORS·쿠키·캐시·프론트엔드 실행 계층으로 나눠 진단합니다. 증거 기록과 재검증 절차로 CS 기초 분석 노트를 완성합니다.
프로세스·스레드·메모리 기초: 브라우저 탭과 서버 실행 구분하기
프로그램·프로세스·스레드와 메모리의 기본 개념을 배웁니다. 브라우저·서버 실행 위치, 새로고침·재시작에 따른 상태 변화, 영속 저장소와 메모리 누수를 구분합니다.
HTTP 캐시 기초: Cache-Control·ETag·304로 브라우저 캐시 읽기
Cache-Control의 max-age·no-cache·no-store와 ETag·304 재검증을 배웁니다. DevTools Network에서 캐시를 관찰하고 브라우저 캐시와 프레임워크 캐시를 구분합니다.
URL을 입력하면 무슨 일이 일어날까: DNS·TCP·TLS 연결 흐름
URL 입력 뒤 DNS 조회, TCP 연결, TLS 협상과 HTTP 요청이 이어지는 흐름을 정리합니다. DevTools와 기본 명령으로 연결 실패 계층을 구분하는 CS 기초 2회차입니다.
JavaScript 시작 가이드: DevTools와 Node.js로 첫 코드 실행하기
브라우저 Console과 Node.js에서 JavaScript를 실행하고, 실행 환경에 따라 사용할 수 있는 API가 달라지는 이유를 확인합니다.
Next.js 캐시와 TanStack Query 캐시 차이: 서버·클라이언트 경계 설계
TanStack Query · 15 / 15 · 최종 설계 · Next.js와 Query 캐시 경계 Next.js App Router와 TanStack Query를 함께 사용하면 "둘 다 캐시를 제공하는데 무엇을 어디에 맡겨야…
TanStack Query HydrationBoundary 사용법: 서버 데이터와 클라이언트 캐시 연결
TanStack Query · 13 / 15 · 고급 학습 · HydrationBoundary 서버와 브라우저는 별도 QueryClient를 사용합니다. 준비한 상태를 dehydrate하고 HydrationBoundary로 전…
TanStack Query SSR prefetchQuery: Server Component에서 초기 데이터 준비하기
TanStack Query · 12 / 15 · 고급 학습 · Server Component prefetch 서버 데이터는 요청마다 만든 QueryClient에 미리 준비합니다. 이 준비만으로 브라우저 QueryClient에…
TypeScript 7 전환 기준 TS6 차이와 deprecated tsconfig 정리
TypeScript 7은 기존 JavaScript 기반 TypeScript compiler를 Go로 포팅한 네이티브 toolchain으로 전환한 큰 버전입니다.
TypeScript 공개 타입 설계 export type과 라이브러리 경계
프로젝트가 커지면 타입을 잘 만드는 것만큼 "어떤 타입을 외부에 공개할 것인지"가 중요해집니다.
