NEW

Bite-sized Real-world Projects - SNS Edition

Name: Bite-sized Real-world Projects - SNS Edition
Price: 35750 KRW

Now it's time to take on the real challenge 🔥 Let's develop a professional-grade SNS together using React.js + TypeScript + Supabase, creating features like authentication & authorization, infinite scroll, image upload, likes, infinite nested comments, dark mode, and more. Throughout this process, we'll also explore server and global state management techniques using Zustand and Tanstack Query.

(5.0) 9 reviews

762 learners

이론 실습 모두

실전프로젝트

한입시리즈

react.js

supabase

zustand

react-query

React

TypeScript

Reviews from Early Learners

What you will learn!

We'll create a professional-level SNS project using React.js + TypeScript + Supabase.
We'll create features such as authentication & authorization, infinite scroll, image upload, likes, infinitely nested comments, dark mode, and more.
We'll explore server and global state management techniques using Zustand and Tanstack Query.

Recommended for
these people

Who is this course right for?

Students of the One Bite series (React.js + TypeScript course completers)
Those who already have knowledge of React.js and TypeScript
Those who want to move beyond tutorial-level content and take on real-world projects
People looking for courses where Q&A responses occur at least once daily, Monday through Friday
Those looking for courses with active student communities directly managed by the instructors

Need to know before starting?

React.js Basics (One-bite React course student level)
TypeScript Basics (One Bite TypeScript Course Student Level)

Hello
This is

33,781

Learners

2,061

Reviews

1,427

Answers

4.9

Rating

Courses

웹 프론트엔드 한 입 크기로 잘라먹어 볼까요?!

안녕하세요 🙇‍♂

저는 무엇이든 쉽고 재미있게 설명할 방법이 있다고 믿는 사람이자

세상에서 가장 따뜻한 개발자 커뮤니티를 만들고자 하는 사람입니다.

📚 도서
- "한 입 크기로 잘라먹는 Next.js" 출간
- "한 입 크기로 잘라먹는 리액트" 출간
📹 강의
- 한 입 크기로 잘라먹는 Next.js
- 한 입 크기로 잘라먹는 타입스크립트
- 한 입 크기로 잘라먹는 리액트

Co-instructor

Curriculum

All

88 lectures ∙ (22hr 13min)

Course Materials:

Lecture resources

Section 1. Getting Started

7 lectures ∙ (24min)

1. (1.1) Course Introduction
08:02
2. ᄂ Student Community Participation Guide
3. ᄂ Example Code Guide
4. ᄂ Notice Regarding Q&A
5. (1.2) Course Structure and Enrollment Guide
6. (1.3) Setting Up the Practice Environment
04:03
7. (1.4) Creating a React App and Initial Setup
12:46

Section 2. Preparation - Styling and Routing

7 lectures ∙ (1hr 53min)

8. (2.1) Introducing Tailwind CSS
14:23
9. (2.2) Tailwind CSS Core Summary 1
19:24
10. (2.3) Tailwind CSS Core Summary 2
13:01
11. (2.4) Introducing Shadcn/ui
20:21
12. (2.5) Shadcn/ui Core Summary 1
12:06
13. (2.6) Shadcn/ui Core Summary 2
22:37
14. (2.7) React Router V7 Key Summary
11:12

Section 3. Preparation - Global State Management Using Zustand

7 lectures ∙ (1hr 34min)

15. (3.1) Global State Management and Zustand
06:14
16. (3.2) Zustand Basic Usage 1
15:44
17. (3.3) Zustand Basic Usage 2
15:15
18. (3.4) Zustand Middleware 1
13:41
19. (3.5) Zustand Middleware 2
16:45
20. (3.6) Implementing Todo List UI
09:30
21. (3.7) Implementing Todo List Functionality
17:13

Section 4. Preparation - Server State Management and Tanstack Query

13 lectures ∙ (3hr 14min)

Section 5. One Bite Log Implementation - Project Setup

6 lectures ∙ (59min)

Section 6. One Bite Log Implementation - Handling Authentication

11 lectures ∙ (3hr 36min)

Section 7. One Bite Log Implementation - Implementing Post Functionality

15 lectures ∙ (4hr 55min)

Section 8. One Bite Log Implementation - Implementing Like Functionality

5 lectures ∙ (1hr 6min)

Section 9. One Bite Log Implementation - Implementing Profile

5 lectures ∙ (1hr 24min)

Section 10. One Bite Log Implementation - Implementing Comments

8 lectures ∙ (2hr 9min)

Section 11. One Bite Log Implementation - Implementing Theme Change Feature

2 lectures ∙ (31min)

Section 12. One Bite Log Implementation - Deployment and Wrap-up

2 lectures ∙ (25min)

Published:

Last updated:

Reviews

All

9 reviews

5.0

9 reviews

kaeuhy
Reviews 1
∙
Average Rating 5.0
Edited
5
10% enrolled
강의 커리큘럼을 보며, 참 알차다고 생각했습니다. 이보다 더 완벽한 프론트엔드를 위한 강의는 존재하지 않습니다. 프론트엔드 = 이정환
ywc0008
Reviews 3
∙
Average Rating 5.0
5
60% enrolled
오래 기다린 보람이 있네요 알찹니다 현업에서 supabase를 썼었는데 한번 돌아보는 계기가 됐네요
이헨
Reviews 3
∙
Average Rating 5.0
5
31% enrolled
그동안 프로젝트에서 zustand와 tanstack query를 그냥 사용하고 있었는데, 강의를 들으면서 왜 써야하는지 이해했습니다. 또한 몰라서 사용하지 못했던 부분, 잘못 사용하고 있었던 것을 다시 배워갈 수 있어서 유익했습니다. 자세하게 설명해주셔서 감사합니다. 이해하면서 차근차근 진행하니 재밌어요 !!
프론트엔드마스터
Reviews 2
∙
Average Rating 5.0
5
31% enrolled
정환님 항상 감사합니다. 강의 들을떄마다 쉽게쉽게 알려주셔서 정말 공부에 도움이 많이됩니다. 강의를 들으면서 제 실력이 한층 더 향상 된다는게 느껴집니다. 항상 건강 조심하시고 훌륭한 강의 만들어주셔서 너무 감사드립니다.
피카
Reviews 14
∙
Average Rating 4.9
5
6% enrolled
다른 강의도 모두 수강 하였는데 이번 강의도 너무 기대됩니다 ! 강의 구성만 봐도 너무 알찬 구성이네요 ! 강의 듣고 나서 다시 수강평 작성하도록 하겠습니다.

Limited time deal

$35,750.00

35%

$42.90

winterlood's other courses

Check out other courses by the instructor!

한 입 크기로 잘라먹는 Next.js(v15)

이정환 Winterlood

한입 시리즈의 3번째 작품! 세상에서 가장 친절하고 디테일 한 Next.js(15+)강의 입니다. App Router 뿐만 아니라 Page Router까지 프로젝트를 통해 살펴봅니다.

Basic

Next.js, React, TypeScript

한 입 크기로 잘라먹는 Next.js(v15)

이정환 Winterlood

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

이정환 Winterlood

개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응용은 길게 17시간 분량의 All-in-one 강의!

Basic

JavaScript, React, Node.js

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

이정환 Winterlood

한 입 크기로 잘라먹는 타입스크립트(TypeScript)

이정환 Winterlood

문법을 넘어 동작 원리와 개념 이해까지 배워도 배워도 헷갈리는 타입스크립트 이제 제대로 배워보세요! 여러분을 타입스크립트 마법사🧙🏻‍♀️로 만들어드립니다.

Basic

TypeScript

한 입 크기로 잘라먹는 타입스크립트(TypeScript)

이정환 Winterlood

Similar courses

Explore other courses in the same field!

스프링 부트와 리액트로 구현하는 소셜 로그인

온코딩

스프링 부트와 리액트를 활용해 일반 로그인과 소셜 로그인을 통합 구현하는 방법을 배웁니다. MPA와 SPA 환경 모두에서 로그인 시스템을 구축하고, JWT와 OAuth2 인증을 실습합니다. 실무에 바로 적용 가능한 예제 프로젝트를 통해 전체 로그인 흐름을 이해하고 구현할 수 있습니다.

Intermediate

Java, Spring Boot, JPA

스프링 부트와 리액트로 구현하는 소셜 로그인

온코딩

찍어먹는 Next.js 풀코스 (한국어 더빙)

ludgi

찍어먹는 Next.js 풀코스! GraphQL, Redis, RabbitMQ, Prisma, TailwindCSS, Docker Compose, Cypress, Prometheus, grafana 등 최신 기술로 실전 프로젝트를 완성하며, App Router와 Page Router까지 모두 경험합니다.

Intermediate

React, AWS, GraphQL

찍어먹는 Next.js 풀코스 (한국어 더빙)

ludgi

너네 백엔드 하고 싶은 거 있으면 얼마든지 해 난 괜찮어 왜냐면 나는 파이어베이스가 있어

제주코딩베이스캠프

프론트엔드 개발자인데 로그인 기능을 구현하지 못해 아쉬웠던 적 있으신가요? DB를 이용해 데이터를 저장하고 불러오는 기능을 구현하고 싶지만 쿼리를 공부하기는 부담스러우셨나요? 파이어베이스라면 쉽게 가능합니다! 리액트와 파이어베이스의 힘으로 유저 인증, 데이터 저장, 호스팅 등 웹 개발에 필수적인 기능들을 같이 구현해봅시다! (해당 강의는 22년 8월 녹화로 파이어베이스의 메이저 업데이트를 반영한 강의입니다.)

Basic

Firebase, React

너네 백엔드 하고 싶은 거 있으면 얼마든지 해 난 괜찮어 왜냐면 나는 파이어베이스가 있어

제주코딩베이스캠프

실전 프로젝트로 배우는 타입스크립트

장기효(캡틴판교)

"타입스크립트 입문 - 기초부터 실전까지"의 실전 활용편입니다. 입문 편을 수강하지 않으신 분들은 입문 편부터 수강해주세요 😄

Intermediate

TypeScript, ES6

실전 프로젝트로 배우는 타입스크립트

장기효(캡틴판교)

한 입 크기로 잘라먹는 타입스크립트(TypeScript)

이정환 Winterlood

Basic

TypeScript

한 입 크기로 잘라먹는 타입스크립트(TypeScript)

이정환 Winterlood

따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]

John Ahn

이 강의를 통해서 쇼핑몰 웹사이트를 처음부터 하나하나 만들어 보실 수 있습니다.

Intermediate

React, Redux, Node.js

따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]

John Ahn

제로베이스부터 배우는 웹개발의 개념과 바이브 코딩

신제용

빠른 실행과 검증의 시대, 바이브 코딩으로 누구보다 빠르게 실행하세요! 광고, 결제 등 수익화까지 빼놓지 않고 내 손으로 이루어 보세요.

Beginner

React, 웹앱, Next.js

제로베이스부터 배우는 웹개발의 개념과 바이브 코딩

신제용

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

이정환 Winterlood

Basic

JavaScript, React, Node.js

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

이정환 Winterlood

인프런 클론코딩으로 배우는 올인원 LMS 솔루션: Next.js·Flutter·AWS·Supabase·prisma로 구현하는 다국어 HLS 스트리밍 기반 MVP 프로젝트

ludgi

이 강의는 단순한 클론코딩이나 기초 강의가 아닙니다. 인프런(Inflearn) 같은 LMS(Learning Management System) 플랫폼을 MVP(엠 브이 피) 수준으로 처음부터 끝까지 구현하면서, 프리랜서·1인 개발자·스타트업 초기 멤버가 실무에서 바로 활용할 수 있는 올인원 솔루션을 제공합니다. Next.js, Flutter, Supabase, Firebase(FCM), AWS, Vercel, Xcode, Android Studio, ElevenLabs, 토스페이먼츠까지 실제 실무에서 사용하는 스택을 한 번에 다룹니다. 웹과 앱을 동시에 개발하고, 소셜 로그인, 다국어 자동 더빙, HLS 스트리밍 기반 강의 재생, 결제 연동, 앱스토어·플레이스토어 배포까지 전 과정을 직접 경험할 수 있습니다. 이 강의는 세세한 코드 한 줄보다는, 실무에서 중요한 흐름, 설정, 배포 과정에 중점을 두었습니다. 따라서 프리랜서로 독립하려는 개발자, 스타트업에서 빠르게 MVP를 검증해야 하는 팀, 그리고 실무 전반을 경험하고 싶은 주니어 개발자에게 적합합니다.

Intermediate

Flutter, AWS, supabase

인프런 클론코딩으로 배우는 올인원 LMS 솔루션: Next.js·Flutter·AWS·Supabase·prisma로 구현하는 다국어 HLS 스트리밍 기반 MVP 프로젝트

ludgi

[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)

Kyo

리액트 네이티브를 이용해서 나만의 맛집 기록앱을 개발하고 출시하는 과정을 배우게 됩니다. 디자인부터 프론트 및 백엔드 개발, 배포까지 전 과정을 준비했어요.

Intermediate

React Native, TypeScript, NestJS

[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)

Kyo

따라하며 배우는 타입스크립트 A-Z

John Ahn

이 강의를 통해 타입스크립트에 대해서 배울 수 있습니다.

Basic

TypeScript, JavaScript

따라하며 배우는 타입스크립트 A-Z

John Ahn

찍어먹는 Next.js 풀코스 (영어 음성 & 한글 자막)

ludgi

Intermediate

Next.js, React, GraphQL

찍어먹는 Next.js 풀코스 (영어 음성 & 한글 자막)

ludgi

SpringBoot & React 포트폴리오 프로젝트: AWS 서비스로 실전 배포 입문

코딩도니

React 프론트엔드와 SpringBoot 백엔드를 AWS 클라우드에 직접 배포하는 포트폴리오 중심 강의! 빠르게 자신의 포트폴리오에 프론트, 백앤드 프로젝트를 배포하고 싶은 분들에게 도움이 되는 강의입니다! 배포하는 데 필요한 지식들을, 서버 설정부터 Docker, Domain 연결, Nginx, HTTPS 적용까지 단계별로 단기간 실습할 수 있게 됩니다!

Basic

React, Java, AWS

SpringBoot & React 포트폴리오 프로젝트: AWS 서비스로 실전 배포 입문

코딩도니

멀티패러다임 프로그래밍 1편: 반복자 패턴 & LISP (with TypeScript, Clojure, Kotlin)

MDU 유인동

중고급 개발자로 성장하기 위한 고급 프로그래밍 언어 활용 능력과, 함수형, 객체 지향, LISP 패러다임이 결합된 소프트웨어 설계 및 구현 능력을 기릅니다.

Intermediate

멀티 패러다임 프로그래밍, TypeScript, 함수형 프로그래밍

멀티패러다임 프로그래밍 1편: 반복자 패턴 & LISP (with TypeScript, Clojure, Kotlin)

MDU 유인동

[VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)

코드캠프

10분만에 바이브코딩으로 만들 수 있는 단순한 서비스는 이제 버리세요! '진짜' 실무적용 바이브코딩을 배울 수 있습니다. 기획과 디자인대로 실서비스 수준의 고도화된 서비스를 커서AI NCOP로 만들어보시죠. No Code, Only Prompt

Intermediate

React, Next.js, cursor

[VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)

코드캠프

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의

John Ahn

이 강의를 통해서 리액트와 노드를 어떻게 사용하는지 기본적인 내용들을 배울 수 있습니다.

Basic

React, Node.js

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의

John Ahn

iOS/Android 앱 개발을 위한 실전 React Native - Basic

Wintho

Mobile App Front-End 개발을 위한 React Native의 기초 지식 습득을 목표로 하고 있습니다. 진입장벽이 낮은 언어/API의 활용을 통해 비전문가도 쉽게 Native Mobile App을 개발할 수 있도록 제작된 강의입니다.

Basic

React Native, React, ES6

iOS/Android 앱 개발을 위한 실전 React Native - Basic

Wintho

[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지

제로초(조현영)

노드가 무엇인지부터, 자바스크립트 최신 문법, 노드의 API, npm, 모듈 시스템, 데이터베이스, 테스팅 등을 배우고 5가지 실전 예제로 프로젝트를 만들어 나갑니다. 클라우드에 서비스를 배포해보기도 하고 노드 프로젝트를 타입스크립트로 전환해도 봅니다.

Basic

Node.js, Express, MySQL

[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지

제로초(조현영)

[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core

코드팩토리

자바스크립트, 타입스크립트 다음은 백엔드 개발! NestJS를 이용한 REST API 백엔드 개발, Socket IO 개발 및 배포를 할 수 있게 됩니다.

Basic

NestJS, REST API, backend

[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core

코드팩토리

비개발자 4주만에 수익화 서비스 만들기: AI 바이브코딩 웹 + 앱 ALL IN ONE

딩코딩코

코딩 몰라도 OK! 당신의 아이디어를 단 4주 만에 실제 수익으로 바꿔보세요. AI와 최신 도구를 활용해, 웹사이트와 앱을 동시에 만들고 바로 서비스까지 연결합니다.

Beginner

Flutter, Next.js, cursor

비개발자 4주만에 수익화 서비스 만들기: AI 바이브코딩 웹 + 앱 ALL IN ONE

딩코딩코

Bite-sized Real-world Projects - SNS Edition

Reviews from Early Learners

What you will learn!

React.js + TypeScript through

Let's build a professional-grade SNS service.

Not just simple UI implementation,

Build the core featuresthat make up real services yourself.

⚙️ User Authentication & Authorization

⚙️ Feed Infinite Scroll

⚙️ Attach Image

⚙️ Like

⚙️ Infinite Nested Comments

⚙️ Theme Change Feature

Introducing tools for more powerful React apps

TailwindCSS + Zustand + Tanstack Query

This is not just follow-along clone coding.

It perfectly covers the background and structure of the features, along with complete conceptual explanations.

Course Enrollment Target Audience Guide

5 Principles of the One Bite Series

⚖ Principle 1. Intuitive and Rich Visual Materials

⚖ Principle 2. Kindness

⚖ Principle 3. Plausibility

⚖ Principle 4. Good Vocalization and Diction

⚖ Principle 5. Communication

Knowledge Sharer Introduction

Lee Jeong-hwan | Winterlood

Recommended for
these people

Hello
This is

Curriculum

Reviews

winterlood's other courses

Similar courses

Bite-sized Real-world Projects - SNS Edition

Reviews from Early Learners

What you will learn!

React.js + TypeScript through

Let's build a professional-grade SNS service.

Not just simple UI implementation,

Build the core featuresthat make up real services yourself.

⚙️ User Authentication & Authorization

⚙️ Feed Infinite Scroll

⚙️ Attach Image

⚙️ Like

⚙️ Infinite Nested Comments

⚙️ Theme Change Feature

Introducing tools for more powerful React apps

TailwindCSS + Zustand + Tanstack Query

This is not just follow-along clone coding.

It perfectly covers the background and structure of the features, along with complete conceptual explanations.

Course Enrollment Target Audience Guide

5 Principles of the One Bite Series

⚖ Principle 1. Intuitive and Rich Visual Materials

⚖ Principle 2. Kindness

⚖ Principle 3. Plausibility

⚖ Principle 4. Good Vocalization and Diction

⚖ Principle 5. Communication

Knowledge Sharer Introduction

Lee Jeong-hwan | Winterlood

Recommended for these people

HelloThis is .css-1q3zd4q{text-decoration-line:underline;text-underline-position:under;text-underline-offset:1px;}

Curriculum

Reviews

winterlood's other courses

Similar courses

Recommended for
these people

Hello
This is