さすが、信じて見て聴ける「ひとくちシリーズ」ですね👍

cheddar

いよいよ実践に挑戦する番です 🔥 React.js + TypeScript + Supabaseで実務レベルのSNSを一緒に開発しながら、認証・認可、無限スクロール、画像アップロード、いいね、無限ネストコメント、ダークモードなどの機能を実装します。この過程で、ZustandとTanstack Queryを利用したサーバーおよびグローバル状態管理の手法も学んでいく予定です。

winterlood

2026 새해 복 마🐴니 할인

一口サイズで切って食べるReact.js実践プロジェクト - SNS編

이론과 실습 한 번에

이론 실습 모두

real projects

실전프로젝트

한입시리즈

react.js

supabase

이제는 실전에 도전할 차례입니다 🔥 React.js + TypeScript + Supabase로 실무급 SNS를 함께 개발해보며 인증&인가, 무한스크롤, 이미지 업로드, 좋아요, 무한 중첩 댓글, 다크모드 등의 기능을 만들어 봅니다. 이 과정에서 Zustand와 Tanstack Query를 이용한 서버 및 전역 상태 관리 기법도 살펴볼 예정입니다.

이정환 Winterlood

효빈 Hyobin

입문

초급

중급이상

리액트

React

타입스크립트

TypeScript

react-query

zustand

한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편

들어가며

사전준비 - 스타일링과 라우팅

사전준비 - Zustand를 이용한 전역 상태관리

사전준비 - 서버 상태관리와 Tanstack Query

한입 로그 구현 - 프로젝트 준비하기

한입 로그 구현 - 인증 처리하기

한입 로그 구현 - 포스트 기능 구현하기

한입 로그 구현 - 좋아요 기능 구현하기

한입 로그 구현 - 프로필 구현하기

한입 로그 구현 - 댓글 구현하기

한입 로그 구현 - 테마 변경 기능 구현하기

한입 로그 구현 - 배포 및 마무리