튜토리얼 — 실시간 채팅 처음부터 끝까지 이 문서 하나로 개념부터 완성·테스트까지 끝냅니다. 위에서 아래로 순서대로 따라오면서, 나오는 코드 블록을 전부 그대로 입력하세요. 끝에는 회원가입·로그인·실시간 채팅이 동작하고 E2E 테스트까지 통과하는 앱이 나옵니다. 기술: Next.js 16 App Router · React 19 · TypeScript · T...
튜토리얼 — 📋 알림 게시판 JWT 인증 + SSE 실시간 알림 회원가입하고, 로그인하고토큰은 안전하게 httpOnly 쿠키로, 글을 쓰고, 남의 글에 댓글을 답니다. 그리고 — 누군가 내 글에 댓글을 달면, 새로고침 없이 헤더의 🔔 에 알림이 뜹니다. 이 "실시간 알림" 이 바로 SSE가 현업에서 가장 많이 쓰이는 모습이에요. 이 튜토리얼의 원칙 — ...
튜토리얼 — Hydration 이해하기 지금까지 useHydrated라는 훅을 가끔 만났습니다. "hydration이 끝나면 true가 된다"고만 짧게 넘어갔죠. 이번 절은 그 hydration이 정확히 무엇인지, 왜 깨질 수 있는지, 어떻게 다뤄야 하는지를 처음부터 끝까지 봅니다. 시작하기 전에 — 왜 이게 어렵게 느껴질까? React만 알 때는 useS...
튜토리얼 — 고양이 갤러리 종합 프로젝트 마지막 종합 프로젝트입니다. Todo 말고 — 귀여운 고양이 갤러리를 만들겠습니다. App Router · Zustand · Context · 폼 · fetch · localStorage 영속성을 한 화면에서 다 만나는 작은 앱이에요. 11단계를 순서대로 따라가면, 마지막에는 다음이 동작합니다. 🐈 갤러리에서 고양...
Zustand createset = {...} 완전 분해 들어가기 전에 Zustand는 React에서 전역 상태global state를 다룰 수 있게 해 주는 라이브러리입니다. "전역 상태"란 여러 컴포넌트가 공유하는 데이터를 말합니다. 예를 들어 할 일 목록todos을 여러 화면에서 함께 보고 수정해야 한다면, 그 목록은 한 곳에 모아두고 모두가 그 한 ...
튜토리얼 — Context로 사용자 정보 공유하기 책의 ThemeContext는 마지막 화면에서 "현재 테마: ???" 로 멈췄습니다. ???를 채우는 방법useContext이 다음 절에 있다 보니, "Context가 결국 뭘 해 주는지"가 손에 잡히지 않으셨을 거예요. 이 튜토리얼은 Context의 세 부분을 한 번에 끝까지 봅니다 — createCont...
튜토리얼 — 문의 폼 만들기 제어 컴포넌트 · 제출 상태 · 결과 · 리셋 SignupForm에서 배운 흐름은 그대로입니다 — 입력 → 검증 → 제출 중 → 결과 화면 → 다시 작성. 이번엔 입력 종류를 둘 더 다뤄 봅니다: 드롭다운 과 여러 줄 입력. 폼은 입력 종류가 무엇이든 다루는 방법이 같다는 걸 손으로 확인합니다. 개념 SignupForm은 두 개...
튜토리얼 — 명함 입력 폼 만들기 SignupForm은 name과 email 두 칸이었습니다. 입력이 세 칸으로 늘면 객체 상태와 펼침 연산자가 더 가치를 합니다. 같은 패턴을 다른 모양에 그대로 옮겨 봅니다 — 이름·회사·직책 세 칸을 받아, 아래에 명함 미리보기를 띄우는 화면입니다. 개념 입력칸이 늘어도 패턴은 똑같습니다. 관련된 입력값들은 객체 하나로...
튜토리얼 — 동작 줄이기 설정 존중하기 matchMedia DarkModeBadge는 다크 모드 여부를 글자로 보여 주기만 했습니다. 이번엔 matchMedia로 알아낸 조건에 따라 실제로 다른 화면을 그립니다 — 8.1절 개념에서 말한 "다른 컴포넌트를 보여 준다"가 이거예요. 검사할 조건은 prefersreducedmotion 입니다. 어지럼증 등으로 ...
튜토리얼 — 낡은 응답 막기 useEffect의 ignore 패턴 책에서 본 UserCard는 의존성이 라서 ignore 패턴을 넣어도 겉보기 변화가 없었습니다. 패턴은 배웠지만 "왜 필요한지"는 눈으로 못 봤죠. 이번 튜토리얼은 race condition요청 경쟁을 일부러 재현해서, ignore 패턴이 없을 때 깨지고 있을 때 고쳐지는 것을 직접 봅니다....
튜토리얼 — 할 일 목록 만들기 useReducer ReducerCounter의 상태는 숫자 하나, 지시는 문자열 하나"increment"였습니다. 이번엔 한 걸음 더 갑니다 — 상태가 할 일 목록배열 이고, 지시가 데이터를 함께 싣는 경우입니다. "어떤 할 일을 추가할지", "어떤 할 일을 지울지" 같은 정보를 지시에 담아 보내야 하니까요. 개념 카운터의...
RefDemo에서 본 useRef는 숫자를 기억하는 상자였습니다. useRef에는 더 자주 쓰는 용도가 있어요 — DOM 요소를 가리키는 손잡이입니다. 이번엔 페이지가 열리면 검색창에 커서가 저절로 들어가고, 버튼을 누르면 다시 검색창으로 커서가 돌아오는 화면을 만듭니다. 개념 같은 화면 요소를 자바스크립트로 직접 만...
카운트는 버튼을 눌러야 바뀌었죠. 이번엔 버튼 없이 저절로 바뀌는 걸 만들어 봅니다. 1초마다 똑딱이는 시계입니다. useState로 시각을 담고, useEffect로 타이머를 켜고, 앞 절에서 배운 정리 함수로 타이머를 끕니다. 개념 시계가 움직이려면 두 가지가 필요합니다. 지금 몇 시인지 기억할 곳 → useState 1...
🌱 처음부터 만드는 Next.js 게시판 튜토리얼 읽는 분: useState 만 배운 React 입문자 만드는 것: 회원가입·로그인이 되는 게시판 글쓰기 / 목록 / 페이지 / 수정 / 삭제 / 내 글 사용 API: https://api.fullstackfamily.com/api/edu/ws283fc1 ws283fc1 는 https://www.fullst...
React를 막 시작한 분을 위해 쓴 튜토리얼입니다. 한 단계씩 따라오시면 돼요. 이미 알 만한 내용도 한 번씩 짚고 넘어가니 부담 없이 읽으셔도 됩니다. 들어가며 다 따라하시면 이런 Todo 앱이 만들어집니다. 1. 로그인 화면이 보입니다. 2. 로그인하면 Todo 등록 ...
useState의 함수형 업데이트와 직접 값 전달의 동작 원리 1. 들어가며 리액트의 useState로 만든 setter 함수는 두 가지 형태의 인자를 받습니다. 숫자나 문자열 같은 값을 직접 넘길 수도 있고, 이전 값을 받아 새 값을 반환하는 함수를 넘길 수도 있습니다. 같은 setter인데 어떻게 두 종류의 인자를 모두 처리할 수 있는지, 그리고 두 방...
프론트엔드 개발자에게 디자인 구현은 늘 병목이었습니다. 디자이너가 Figma에 그려둔 화면을 보고, 색상 코드를 하나하나 확인하고, 간격을 픽셀 단위로 맞추고, "이거 좌우 패딩이 16인가요 20인가요?" 같은 슬랙 메시지를 주고받는 일 말이죠. ...
더 이상 글이 없습니다.
