강의

멘토링

로드맵

NEW
개발 · 프로그래밍

/

웹 개발

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

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

(5.0) 수강평 3개

수강생 541명

이론 실습 모두
실전프로젝트
한입시리즈
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 기초 (한입 타입스크립트 강의 수강자 수준)

안녕하세요
입니다.

33,213

수강생

2,017

수강평

1,406

답변

4.9

강의 평점

7

강의

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

안녕하세요 🙇‍♂

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

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

 

커리큘럼

전체

88개 ∙ (22시간 13분)

해당 강의에서 제공:

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

수강평

전체

3개

5.0

3개의 수강평

  • kaeuhy님의 프로필 이미지
    kaeuhy

    수강평 1

    평균 평점 5.0

    수정됨

    5

    10% 수강 후 작성

    강의 커리큘럼을 보며, 참 알차다고 생각했습니다. 이보다 더 완벽한 프론트엔드를 위한 강의는 존재하지 않습니다. 프론트엔드 = 이정환

    • mandoo님의 프로필 이미지
      mandoo

      수강평 4

      평균 평점 5.0

      5

      11% 수강 후 작성

      good!

      • 피카님의 프로필 이미지
        피카

        수강평 14

        평균 평점 4.9

        5

        6% 수강 후 작성

        다른 강의도 모두 수강 하였는데 이번 강의도 너무 기대됩니다 ! 강의 구성만 봐도 너무 알찬 구성이네요 ! 강의 듣고 나서 다시 수강평 작성하도록 하겠습니다.

        얼리버드 할인 중

        ₩35,750

        35%

        ₩55,000

        이정환 Winterlood님의 다른 강의

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

        비슷한 강의

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