2026. 06. 29.
Next.js로 SEO 제대로 하기 — 빈 프로젝트에서 시작해 직접 확인까지
Next.js 16 App Router · React 19 · TypeScript 새 프로젝트를 하나 만들어 SEO에 필요한 것들을 하나씩 붙여 보고, 정말로 동작하는지 끝까지 확인한 기록입니다. 글에 나오는 코드는 전부 실제로 띄워서 검증한 것이고, 명령 출력도 그대로 가져왔습니...
#next.js#seo#app-router
15 0 0
#next.js
2026. 06. 05.
API 스펙 정의부터 구현까지 — 그리고 SQL 없이 쓰는 Supabase 쿼리 완벽 가이드
4편https://www.fullstackfamily.com/@urstory/posts/14782에서 쇼핑몰 테이블카테고리·상품·주문·주문상품을 만들었습니다. 테이블이 준비됐다면 다음 순서는 "이 데이터로 어떤 API를 제공할지" 스펙을 정하는 것입니다. 이 글은 ...
#API설계#Supabase#쿼리#Next.js#초보자
29 0 0
2026. 06. 05.
쇼핑몰로 배우는 데이터 모델링 — 논리모델링·정규화·물리모델링부터 Supabase·API·Next.js까지
초보자가 쇼핑몰을 만들 때 가장 먼저 부딪히는 벽은 화면도, 코드도 아닙니다. "데이터를 어떤 표테이블로 나눌 것인가" 입니다. 여기서 잘못 설계하면 나중에 데이터가 꼬이고 버그가 쏟아집니다. 이 글은 하나의 쇼핑몰 예제로 데이터 모델링의 전 과정을 ...
#데이터모델링#정규화#Supabase#Next.js#DB설계
29 0 0
2026. 06. 04.
Supabase RLS로 게시판 만들기 — 목록은 누구나, 작성·수정·삭제는 로그인 본인만
1편소셜 로그인https://www.fullstackfamily.com/@urstory/posts/14777과 2편세션으로 내 API 호출https://www.fullstackfamily.com/@urstory/posts/14779에 이어, 이번엔 진짜 서비스다운 기...
#Supabase#RLS#Next.js#게시판#보안
30 0 0
2026. 06. 04.
Supabase 로그인 세션으로 "내 API" 호출하기 (Next.js · Bearer 토큰)
Supabase 로그인 세션으로 "내 API" 호출하기 Next.js · Bearer 토큰 지난 글https://www.fullstackfamily.com/@urstory/posts/14777에서 Supabase + Next.js로 구글·카카오·페이스북 소셜 로그인을 구현했습니다. 그런데 로그인은 시작일 뿐입니다. 진짜 하고 싶은 건 이거죠. "로그인한 사...
#Supabase#Next.js#API#인증#JWT
47 0 0
2026. 06. 04.
Supabase + Next.js로 소셜 로그인(구글·카카오·페이스북) 완벽 구현하기
Supabase + Next.js로 소셜 로그인구글·카카오·페이스북 완벽 구현하기 이 글은 Supabase를 백엔드로, Next.js 16 · React 19 · TypeScript · Tailwind CSS를 프론트엔드로 사용해 구글 · 카카오 · 페이스북 소셜 로그인을 처음부터 끝까지 구현하는 초보자용 완전 가이드입니다. 코드 한 줄, 콘솔 설정 한 단...
#Supabase#Next.js#React#TypeScript#OAuth
78 1 0
2026. 05. 26.
실시간 채팅 처음부터 끝까지
튜토리얼 — 실시간 채팅 처음부터 끝까지 이 문서 하나로 개념부터 완성·테스트까지 끝냅니다. 위에서 아래로 순서대로 따라오면서, 나오는 코드 블록을 전부 그대로 입력하세요. 끝에는 회원가입·로그인·실시간 채팅이 동작하고 E2E 테스트까지 통과하는 앱이 나옵니다. 기술: Next.js 16 App Router · React 19 · TypeScript · T...
#채팅#next.js#react#sse
54 0 0
2026. 05. 26.
📋 알림 게시판 (JWT 인증 + SSE 실시간 알림)
튜토리얼 — 📋 알림 게시판 JWT 인증 + SSE 실시간 알림 회원가입하고, 로그인하고토큰은 안전하게 httpOnly 쿠키로, 글을 쓰고, 남의 글에 댓글을 답니다. 그리고 — 누군가 내 글에 댓글을 달면, 새로고침 없이 헤더의 🔔 에 알림이 뜹니다. 이 "실시간 알림" 이 바로 SSE가 현업에서 가장 많이 쓰이는 모습이에요. 이 튜토리얼의 원칙 — ...
#sse#jwt#next.js#react
87 0 0
2026. 05. 21.
고양이 갤러리 (종합 프로젝트)
튜토리얼 — 고양이 갤러리 종합 프로젝트 마지막 종합 프로젝트입니다. Todo 말고 — 귀여운 고양이 갤러리를 만들겠습니다. App Router · Zustand · Context · 폼 · fetch · localStorage 영속성을 한 화면에서 다 만나는 작은 앱이에요. 11단계를 순서대로 따라가면, 마지막에는 다음이 동작합니다. 🐈 갤러리에서 고양...
#react#next.js
109 1 0
2026. 05. 17.
🌗 Next.js 다크 모드 완전 정복 — 깜빡임도 없고 경고도 없게
들어가며 — 교육생이 한 두 가지 질문 Q1. "CSS에서 dark/light 값을 둘 다 정의해 두고 CSS로 필터링하는 방식바닐라처럼"과 "nextthemes 방식" 중 뭐가 제일 좋나요? Q2. hydration 이슈는 suppressHydrationWarning 로 해결해 버리고...
#next.js#다크모드
50 1 0
2026. 05. 15.
process.env 완전 정복 — Next.js 환경변수 한 단계씩
⚙️ process.env 완전 정복 — Next.js 환경변수 한 단계씩 본 튜토리얼의 app/books/page.tsx 에 이런 한 줄이 있어요: ts const baseUrl = process.env.NEXT_PUBLIC_BASE_URL ?? "http://localhost:3300"; process.env 가 뭐고, 왜 NEXT_PUBLIC_ 가 붙...
#next.js#process.env
39 1 0
2026. 05. 14.
Next.js 15 캐시 튜토리얼 — 한 단계씩 직접 만들어 보기
이 튜토리얼은 Next.js의 캐시cache를 처음 배우는 사람을 위한 안내서입니다. 작은 예제 프로젝트를 처음부터 함께 만들면서, 네 가지 캐시 동작을 눈으로 확인합니다. 대상: Next.js, Tailwind, TypeScript, React 기초를 배웠고 useState를 써 본 사람....
#next.js#캐시#cache
49 1 0
2026. 05. 11.
처음부터 만드는 next.js 게시판 튜토리얼
🌱 처음부터 만드는 Next.js 게시판 튜토리얼 읽는 분: useState 만 배운 React 입문자 만드는 것: 회원가입·로그인이 되는 게시판 글쓰기 / 목록 / 페이지 / 수정 / 삭제 / 내 글 사용 API: https://api.fullstackfamily.com/api/edu/ws283fc1 ws283fc1 는 https://www.fullst...
#next.js#react#게시판
160 2 0
2026. 02. 21.
2 vCPU 서버에서 동시접속 200명 버티기: 커넥션 풀과 쿼리 튜닝 실전기
비용을 아끼려고 2 vCPU, 메모리 16GB에 4개의 서버를 설치해서 사용하기로 했습니다. 그전엔 GCP의 Cloud RUN을 사용했죠. 그런데 지속적인 연결SSE나 WebSocket 등을 사용하면 사용하는 시간이 길어져서 비용이 생각보다 많이 나오는거에요. 그래서 1개의 VM...
#성능테스트#nginx#spring boot#mysql#next.js
37 0 0
2026. 02. 17.
sitemap.xml이 필요한 이유와 Next.js에서 동적으로 만드는 방법
사이트를 만들고 나면 아무도 안 온다 웹사이트를 열심히 만들어서 배포했습니다. 기능도 잘 돌아가고, 디자인도 나쁘지 않습니다. 그런데 구글에 검색해보면 안 나옵니다. 네이버도 마찬가지고요. 당연합니다. 검색 엔진은 우리 사이트의 존재를 모르니까요. 검색 엔진이 웹페이지를 수집하는 ...
#sitemap.xml#next.js
36 0 0
더 이상 글이 없습니다.