강의

멘토링

커뮤니티

BEST
개발 · 프로그래밍

/

웹 개발

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

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

(5.0) 수강평 52개

수강생 1,122명

이론 실습 모두
실전프로젝트
한입시리즈
react.js
supabasezustandreact-queryReactTypeScript

먼저 경험한 수강생들의 후기

수강 후 이런걸 얻을 수 있어요

  • React.js + TypeScript + Supabase를 이용해 실무급 SNS 프로젝트를 만들어 봅니다.

  • 인증&인가, 무한스크롤, 이미지 업로드, 좋아요, 무한 중첩 댓글, 다크모드 등의 기능을 만들어 봅니다

  • Zustand와 Tanstack Query를 이용한 서버 및 전역 상태 관리 기법을 살펴봅니다.

React.js + TypeScript를 통해

실무급 SNS 서비스를 만들어봅니다.

튜토리얼만 반복하고 계신다면, 이제는 실전 프로젝트에 도전할 차례입니다.

본 강의에서는 React.js + TypeScript + Supabase를 활용하여

실제 사용자들에게 제공 가능한 수준의 실무급 SNS 서비스를 처음부터 끝까지 만들어 봅니다.

데모 사이트 : https://demo-onebite-log.vercel.app/

> 테스트 계정 이메일 : test@onebitefe.com

> 테스트 계정 비밀번호 : 123456


단순한 UI 구현이 아닌,

실제 서비스를 구성하는 핵심 기능들을 직접 만들어봅니다.

이 강의는 단순한 UI나 CURD 구현만을 알려드리는 튜토리얼 강의가 아닙니다.

인증/인가, 이미지 업로드, 무한 스크롤, 좋아요, 무한 중첩 댓글, 다크모드 등

오늘날의 실제 서비스들에서 사용되는 핵심적인 기능들을 직접 설계하고 구현해 봅니다.


⚙️ 사용자 인증 & 인가

  • 이메일 회원가입/로그인

  • 소셜 로그인(GitHub)

  • 비밀번호 찾기

  • 세션 관리

  • RLS를 이용한 인가

⚙️ 피드 무한 스크롤

  • useInfiniteQuery를 이용한 피드 무한 스크롤 관리

  • 캐시 데이터 관리


⚙️ 이미지 첨부

  • Supabase Storage를 이용한 이미지 업로드 및 관리

  • 포스트, 프로필 이미지 업로드 기능 구현


⚙️ 좋아요

  • 동시성 이슈 해결 (RPC)

  • 캐시 조작을 통한 빠른 결과 반영


⚙️ 무한 중첩 댓글

  • 무한 중첩되는 댓글 기능 구현

  • 재귀적 컴포넌트 렌더링


⚙️ 테마 변경 기능

  • 시스템, 다크, 라이트 테마 제공

  • Persist를 이용한 테마 유지 및 깜빡임 방지 기능 구현




더 강력한 리액트 앱을 위한 도구들을 소개합니다

TailwindCSS + Zustand + Tanstack Query

복잡한 기능을 잘 다루기 위해서는, 우리의 도구도 함께 업그레이드 되어야 합니다.

본 강의에서는 아래에 안내된 강력한 도구들을 하나씩 익히고

실제 프로젝트에 적극적으로 활용해볼 예정입니다.


Tailwind CSS


  • CSS 스타일링을 보다 편리하게 도와주는 도구

  • 스타일링을 위한 별도의 CSS 파일이 필요하지 않음

  • https://tailwindcss.com/


Shadcn/ui


  • Tailwind CSS 기반의 디자인 라이브러리

  • 고품질 컴포넌트를 제공함 (ex. Input, Button, Dialog 등)

  • https://ui.shadcn.com/

Zustand


Tanstack Query



따라만 치는 클론 코딩이 아닙니다.

기능의 배경과 구조까지, 개념 설명도 완벽하게 담았습니다.

이 강의는 절대 단순히 코드만 따라 치고 끝나는 강의가 아닙니다.

왜 그렇게 구현하는지, 어떤 흐름으로 구성되는지

직접 이해하고 소화할 수 있도록 이론 설명도 듬뿍 담았습니다.

강의 수강 대상 안내

본 강의는 React.js와 TypeScript에 대한 기초가 있는 분들을 대상으로 제작되었습니다

만약 위 기술에 익숙하지 않으시다면 아래의 선수 강의를 먼저 수강 하시길 권장드립니다.

한입 시리즈의 5가지 원칙

⚖ 원칙 1. 직관적이고 풍부한 시각자료

같은 음식이더라도 보기 좋은것이 더 맛있게 느껴지는 것 처럼
같은 개념 설명이더라도 더 직관적이고 매력적인 시각자료가 더 이해하기 쉬울거라 생각합니다.

따라서 애니메이션을 포함한 직관적인 시각자료를 만들기 위해 부단히 노력했습니다.

⚖ 원칙 2. 친절함

새로운 용어나 개념이 등장할 때 대충 설명하고 넘어가거나, 이미 알고 계실거라고 속단하지 않았습니다. 강의를 들으시면서 별도로 구글링 하실 일 없도록 최대한 노력했습니다.

⚖ 원칙 3. 개연성

수강생 여러분들의 흥미 유지를 위해 강의 중 새로운 내용이 등장할 때 항상 앞의 내용과 연관이 있는지, 갑자기 흐름이 끊키는 느낌을 받지는 않으실지 항상 개연성을 생각하면서 강의를 만들었습니다.

⚖ 원칙 4. 좋은 발성과 딕션

오랜 시간 제 목소리를 들으셔야 하는 만큼 좋은 발성과 딕션을 위해 항상 노력하고 있습니다.
이를 위해 2배속으로 재생해도 다 알아들으실 수 있게끔 강의를 제작했습니다.

한번 들어보세요! 2배속 재생 링크

⚖ 원칙 5. 소통

수강생 전용 커뮤니티에 모여 서로 지식과 소식을 공유하며 성장합니다.

지식 공유자 소개


이정환 | Winterlood

무엇이든 쉽고 재미있게 설명할 방법이 있다고 믿는
프론트엔드 개발자 & 교육자

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • 한입 시리즈의 수강생 여러분 (React.js + TypeScript 수강 완료자)

  • React.js 와 TypeScript에 대한 지식이 이미 있으신 분들

  • 튜토리얼 수준에서 벗어나 실전 프로젝트에 도전해 보고 싶으신 분들

  • 질문 답변이 월-금 최소 1회 이상 매일 이뤄지는 강의를 찾으시는 분들

  • 지식공유자가 직접 운영하는 수강생 커뮤니티가 활발한 강의를 찾으시는 분들

선수 지식,
필요할까요?

  • React.js 기초 (한입 리액트 강의 수강자 수준)

  • TypeScript 기초 (한입 타입스크립트 강의 수강자 수준)

안녕하세요
입니다.

35,576

수강생

2,304

수강평

1,516

답변

4.9

강의 평점

13

강의

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

안녕하세요 🙇‍♂

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

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

 

커리큘럼

전체

88개 ∙ (22시간 9분)

해당 강의에서 제공:

수업자료
강의 게시일: 
마지막 업데이트일: 

수강평

전체

52개

5.0

52개의 수강평

  • nataek2159님의 프로필 이미지
    nataek2159

    수강평 15

    평균 평점 3.3

    5

    31% 수강 후 작성

    I've taken quite a few paid courses on Inflearn, and in every aspect, Lee Jeong-hwan's courses are the best. That's why I've taken all of Lee Jeong-hwan's courses. This React SNS course is great too. Lee Jeong-hwan's courses... 1. You can feel the preparation that went into the course while watching. => When you watch videos from other instructors, almost none of them prepare scripts. Most seem to only prepare content at the title level. As a result, when you watch their videos, they stumble, repeat what they've already said... Examples turn out differently from the results... In some cases, they swallow their saliva so much that it was disgusting, so I didn't continue watching afterward. However, with Lee Jeong-hwan's courses, you can feel that scripts are thoroughly prepared before filming. So there's no redundancy, and the progression is smooth. It's very satisfying, and it really feels worth paying for. 2. The course environment is well prepared. => Unlike videos from other instructors, the audio is consistent from start to finish. When you watch Lee Jeong-hwan's courses, he films almost without moving. This seems to be because moving prevents the voice from being recorded at an even pitch. 3. The course content quality is excellent. => When you watch videos from other instructors, most just type on PPT and show it. It doesn't feel very thoughtful. From the perspective of paying to watch, it sometimes feels like a waste of money. Lee Jeong-hwan's courses don't have screens shown through PPT. Everything is explained with animated screens. This allows for faster understanding. However, watching Lee Jeong-hwan's courses... there's a problem. When I watch preview videos of other instructors' paid content, the quality doesn't satisfy me, so I'm reluctant to purchase... Other instructors should watch Lee Jeong-hwan's courses and benchmark them. Inflearn should also benchmark Lee Jeong-hwan's courses, set them as the standard, and request instructors who want to operate paid courses to follow suit. Isn't it natural that better quality should be provided for paid content? So... I only call Lee Jeong-hwan's courses "courses." I just call other instructors' content "videos"... they're insufficient to be called courses.

    • cjswodmsgus5064님의 프로필 이미지
      cjswodmsgus5064

      수강평 1

      평균 평점 5.0

      수정됨

      5

      10% 수강 후 작성

      Looking at the course curriculum, I thought it was truly comprehensive. There is no more perfect course for frontend development than this. Frontend = Lee Jeong-hwan

      • jjmullan님의 프로필 이미지
        jjmullan

        수강평 9

        평균 평점 5.0

        5

        100% 수강 후 작성

        I got great inspiration from the Live Session I attended before starting the course, and I think I was able to get a better feel for things by following along with the project. I was able to think more deeply about the usefulness of server state management using Tanstack Query, and I think I was able to learn broadly about TypeScript and React, which are my main frameworks, as well as Zustand and Supabase. When anyone has concerns about side projects, encountering this course would be a really good start. I highly recommend it!

        • hyezzm1200님의 프로필 이미지
          hyezzm1200

          수강평 8

          평균 평점 5.0

          5

          67% 수강 후 작성

          I was wondering if I could actually create something like this, but as I follow along with the easy and detailed explanations step by step, it's amazing to see it gradually being implemented 😊😊 I think if I just listen to this one lecture repeatedly, I'll be able to properly understand the flow and ecosystem of both frontend and backend. I've watched all the previous lectures too, so please continue to provide great lectures in the future~

          • dudals010126님의 프로필 이미지
            dudals010126

            수강평 4

            평균 평점 5.0

            5

            56% 수강 후 작성

            I haven't completed the course yet, but I'm leaving a review. Rather than thinking "I need to create a portfolio through this course," I think it would be better to take this course with the mindset of "How does the overall flow of a project using Supabase and React work?" - focusing on understanding the big picture. The quality of the course is excellent. I took a Supabase course before this one, but unlike that course, this one explains things in incredibly detailed depth - it's on a completely different level. Of course, rather than just taking this course and thinking "Oh, so this is how Supabase works," it's better to use this course to establish a very basic conceptual framework, then study further through Supabase's official documentation - you'll understand much better than before. This is possible because Lee Jung-hwan explains things so well and makes it easier to understand with visual materials. That's why I really recommend taking this course. Also, Zustand and React Query lectures are included in this course, and they're amazing... They're very easy to understand. This course seems to be very helpful when studying on your own later.

            ₩55,000

            이정환 Winterlood님의 다른 강의

            지식공유자님의 다른 강의를 만나보세요!

            비슷한 강의

            같은 분야의 다른 강의를 만나보세요!