튜토리얼 — 실시간 채팅 처음부터 끝까지 이 문서 하나로 개념부터 완성·테스트까지 끝냅니다. 위에서 아래로 순서대로 따라오면서, 나오는 코드 블록을 전부 그대로 입력하세요. 끝에는 회원가입·로그인·실시간 채팅이 동작하고 E2E 테스트까지 통과하는 앱이 나옵니다. 기술: Next.js 16 App Router · React 19 · TypeScript · T...
튜토리얼 — 📋 알림 게시판 JWT 인증 + SSE 실시간 알림 회원가입하고, 로그인하고토큰은 안전하게 httpOnly 쿠키로, 글을 쓰고, 남의 글에 댓글을 답니다. 그리고 — 누군가 내 글에 댓글을 달면, 새로고침 없이 헤더의 🔔 에 알림이 뜹니다. 이 "실시간 알림" 이 바로 SSE가 현업에서 가장 많이 쓰이는 모습이에요. 이 튜토리얼의 원칙 — ...
튜토리얼 — 고양이 갤러리 종합 프로젝트 마지막 종합 프로젝트입니다. Todo 말고 — 귀여운 고양이 갤러리를 만들겠습니다. App Router · Zustand · Context · 폼 · fetch · localStorage 영속성을 한 화면에서 다 만나는 작은 앱이에요. 11단계를 순서대로 따라가면, 마지막에는 다음이 동작합니다. 🐈 갤러리에서 고양...
들어가며 — 교육생이 한 두 가지 질문 Q1. "CSS에서 dark/light 값을 둘 다 정의해 두고 CSS로 필터링하는 방식바닐라처럼"과 "nextthemes 방식" 중 뭐가 제일 좋나요? Q2. hydration 이슈는 suppressHydrationWarning 로 해결해 버리고...
⚙️ 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의 캐시cache를 처음 배우는 사람을 위한 안내서입니다. 작은 예제 프로젝트를 처음부터 함께 만들면서, 네 가지 캐시 동작을 눈으로 확인합니다. 대상: Next.js, Tailwind, TypeScript, React 기초를 배웠고 useState를 써 본 사람....
🌱 처음부터 만드는 Next.js 게시판 튜토리얼 읽는 분: useState 만 배운 React 입문자 만드는 것: 회원가입·로그인이 되는 게시판 글쓰기 / 목록 / 페이지 / 수정 / 삭제 / 내 글 사용 API: https://api.fullstackfamily.com/api/edu/ws283fc1 ws283fc1 는 https://www.fullst...
비용을 아끼려고 2 vCPU, 메모리 16GB에 4개의 서버를 설치해서 사용하기로 했습니다. 그전엔 GCP의 Cloud RUN을 사용했죠. 그런데 지속적인 연결SSE나 WebSocket 등을 사용하면 사용하는 시간이 길어져서 비용이 생각보다 많이 나오는거에요. 그래서 1개의 VM...
사이트를 만들고 나면 아무도 안 온다 웹사이트를 열심히 만들어서 배포했습니다. 기능도 잘 돌아가고, 디자인도 나쁘지 않습니다. 그런데 구글에 검색해보면 안 나옵니다. 네이버도 마찬가지고요. 당연합니다. 검색 엔진은 우리 사이트의 존재를 모르니까요. 검색 엔진이 웹페이지를 수집하는 ...
더 이상 글이 없습니다.
