기업 교육

평생교육이용권

AI 교육 90% 환급

inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유
채널톡 아이콘
Challenge
종료
개발 · 프로그래밍

/

웹 개발

한입 챌린지 8기 - SNS Project

약 4주동안 "한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS편" 강의를 완강하는 완강챌린지입니다. (진도표만 제공, 미션 없음) 이제는 실전에 도전할 차례입니다 🔥 React.js + TypeScript + Supabase로 실무급 SNS를 함께 개발해보며 인증&인가, 무한스크롤, 이미지 업로드, 좋아요, 무한 중첩 댓글, 다크모드 등의 기능을 만들어 봅니다. 이 과정에서 Zustand와 Tanstack Query를 이용한 서버 및 전역 상태 관리 기법도 살펴볼 예정입니다.

ReactTypeScriptreact-querysupabasezustand

30개 수업 학습

5회 미션 수행

성취의 증표, 수료증을 발급해요.

완주 시 쿠폰을 제공해요.

같은 기수와 교류하고 함께 성장해요.

이정환 Winterlood님과 함께해요!

인프런인증

커리어인증

43,455

명

수강생

3,347

개

수강평

1,765

개

답변

5.0

점

강의 평점

33

개

강의

무엇이든 쉽게 설명할 방법은 있다!

더보기

공동 지식공유자

한입 챌린지 8기 - 실전프로젝트 SNS편

본 챌린지는 아래의 한 입 크기로 잘라먹는 실전 프로젝트 SNS편 강의를 수강하시는 분들을 위한 프로그램입니다.

[한입 챌린지 8기 - SNS Project]를 신청하는 챌린지 페이지입니다.
(본 챌린지는 무료이며 다른 챌린지와 달리, 미션 없이 진도표만 제공됩니다)

[ 한입 챌린지 8기 ] 다른 강의로 신청하기

한입 챌린지 8기의 다른 강의들도 살펴보세요!!

[ 한입 챌린지 8기 OT ] 무료 세미나 신청하기

한입 챌린지 8기가 궁금하다면? 무료로 진행되는 세미나를 신청해주세요!!
한입 챌린지에 대한 소개와 진행 방식, 그리고 참가자분들의 QA로 구성된 무료 세미나입니다.
(* 라이브 종료 후 3시간 내로, 모든 챌린지 참가자 분들께 녹화본이 제공됩니다)


Live OT 신청하기

챌린지 8기

문의 사항은 onebite.fe@gmail.com 으로 전달해주세요 :)

2월

22일

챌린지 시작일

2026년 2월 22일 오후 03:00

챌린지 종료일

2026년 3월 30일 오후 02:30

챌린지 커리큘럼

전체

35개 ∙ (30분)

해당 강의에서 제공:

챌린지에서 배워요

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

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

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

이런 분들께
추천드려요

학습 대상은
누구일까요?

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

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

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

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

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

선수 지식,
필요할까요?

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

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

수강평

전체

4개

4.8

4개의 수강평

  • Son minsuck님의 프로필 이미지
    Son minsuck

    수강평 5

    ∙

    평균 평점 5.0

    5

    100% 수강 후 작성

    분량을 따라가다 보니 자연스럽게 학습 루틴이 잡혔고, 꾸준히 공부하는 습관을 만들 수 있었습니다. 특히 강의를 듣고 바로 실무 패턴과 자주 사용되는 라이브러리를 활용해 SNS 프로젝트의 주요 기능을 구현해보는 과정이 큰 도움이 되었습니다. 단순히 이론에 그치지 않고, 직접 구현하면서 이해도를 높일 수 있었고 개발에 대한 자신감도 많이 얻었습니다. 혼자였다면 흐트러지기 쉬웠을 텐데, 챌린지 방식 덕분에 끝까지 완주할 수 있었고 성장했다는 걸 체감할 수 있는 경험이었습니다. 추천합니다!

    • 든든한꼬마님의 프로필 이미지
      든든한꼬마

      수강평 270

      ∙

      평균 평점 4.9

      5

      10% 수강 후 작성

      • 꼬기님의 프로필 이미지
        꼬기

        수강평 1

        ∙

        평균 평점 5.0

        5

        100% 수강 후 작성

        • madwolves98님의 프로필 이미지
          madwolves98

          수강평 8

          ∙

          평균 평점 4.6

          4

          62% 수강 후 작성

          실제 SNS의 뼈대를 갖춰가고 있는데요 프로젝트할 때 감을 살릴 수 있었던것 같습니다.

          취소 및 환불 규정
          챌린지는 지식공유자가 설정한 수업 최소 정원이 충족되지 않을 경우, 폐강 안내가 고지되며 결제 내역이 자동취소됩니다.

          이정환 Winterlood님의 다른 강의

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

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

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

          이정환 Winterlood

          ₩48,400

          초급 / JavaScript, React, Node.js

          4.9

          (1,525)

          15,300+
          답변 활발
          답변 활발

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

          초급

          초급

          JavaScript, React, Node.js

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

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

          이정환 Winterlood

          ₩48,400

          초급 / JavaScript, React, Node.js

          4.9

          (1,525)

          15,300+
          답변 활발
          답변 활발
          한 입 크기로 잘라먹는 Next.js강의 썸네일

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

          이정환 Winterlood

          ₩48,400

          초급 / React, TypeScript, Next.js

          5.0

          (626)

          5,800+
          답변 활발
          답변 활발

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

          초급

          초급

          React, TypeScript, Next.js

          한 입 크기로 잘라먹는 Next.js강의 썸네일

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

          이정환 Winterlood

          ₩48,400

          초급 / React, TypeScript, Next.js

          5.0

          (626)

          5,800+
          답변 활발
          답변 활발
          한 입 크기로 잘라먹는 타입스크립트(TypeScript)강의 썸네일

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

          이정환 Winterlood

          ₩48,400

          초급 / TypeScript

          5.0

          (758)

          14,300+
          답변 활발
          답변 활발

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

          초급

          초급

          TypeScript

          한 입 크기로 잘라먹는 타입스크립트(TypeScript)강의 썸네일

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

          이정환 Winterlood

          ₩48,400

          초급 / TypeScript

          5.0

          (758)

          14,300+
          답변 활발
          답변 활발
          한 입 크기로 잘라먹는 바이브코딩 - 기초부터 실전 배포까지 (클로드 & 코덱스)강의 썸네일

          한 입 크기로 잘라먹는 바이브코딩 - 기초부터 실전 배포까지 (클로드 & 코덱스)

          이정환 Winterlood

          ₩99,000

          입문 / 웹앱, 네트워크, 보안 교육, claude, 바이브코딩

          5.0

          (90)

          700+
          Update
          Update
          답변 활발
          답변 활발
          미션
          미션

          AI는 딱 당신만큼만 훌륭합니다. AI 활용법 → 기초 핵심 지식 → 프로젝트 개발 3단계로 완성하는 완벽한 바이브 코딩. 바이브 코딩을 제대로 배워보고 싶은 분들을 위해, 어떤 AI를 사용하더라도 변하지 않는 핵심 개념들을 한 입 크기로 잘라 전달해 드립니다.

          입문

          입문

          웹앱, 네트워크, 보안 교육

          한 입 크기로 잘라먹는 바이브코딩 - 기초부터 실전 배포까지 (클로드 & 코덱스)강의 썸네일

          한 입 크기로 잘라먹는 바이브코딩 - 기초부터 실전 배포까지 (클로드 & 코덱스)

          이정환 Winterlood

          ₩99,000

          입문 / 웹앱, 네트워크, 보안 교육, claude, 바이브코딩

          5.0

          (90)

          700+
          Update
          Update
          답변 활발
          답변 활발
          미션
          미션

          [VOD] AI가 다 해준다는데, 왜 나만 막힐까? - 바이브코딩 기초 개념 7가지

          이정환 Winterlood

          무료

          입문 / codex, 인공지능(AI), AI Agent, claude, 바이브코딩

          4.7

          (18)

          400+
          Update
          Update
          답변 활발
          답변 활발

          AI에게 시켰는데 에러만 반복된다면, 문제는 AI가 아니라 방향을 줄 기초가 없어서입니다. 이 영상에서는 바이브코딩을 하다 막히는 사람들에게 빠짐없이 비어 있던 기초 개념 7가지가 각각 무엇이고 왜 필요한지 짚어드립니다. 👾 코딩 0일차, 터미널을 한 번도 안 열어본 분을 기준으로 설명합니다.

          입문

          입문

          codex, 인공지능(AI), AI Agent

          [VOD] AI가 다 해준다는데, 왜 나만 막힐까? - 바이브코딩 기초 개념 7가지

          이정환 Winterlood

          무료

          입문 / codex, 인공지능(AI), AI Agent, claude, 바이브코딩

          4.7

          (18)

          400+
          Update
          Update
          답변 활발
          답변 활발
          한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편강의 썸네일

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

          이정환 Winterlood

          ₩55,000

          중급이상 / React, TypeScript, react-query, supabase, zustand

          5.0

          (148)

          1,600+
          답변 활발
          답변 활발

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

          중급이상

          중급이상

          React, TypeScript, react-query

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

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

          이정환 Winterlood

          ₩55,000

          중급이상 / React, TypeScript, react-query, supabase, zustand

          5.0

          (148)

          1,600+
          답변 활발
          답변 활발

          한입 리액트 실전 라이브러리 키트 - Zustand, Tanstack Query, TailwindCSS

          이정환 Winterlood

          ₩19,800

          초급 / React, 웹앱, TailwindCSS, react-query, zustand

          5.0

          (12)

          300+
          답변 활발
          답변 활발

          Zustand, Tanstack Query, Tailwind CSS로 여러분의 리액트 앱을 업그레이드 하세요! 복잡한 프로젝트에도 도전하실 수 있도록 다양한 도구들의 핵심 개념과 사용 방법을 안내해 드립니다.

          초급

          초급

          React, 웹앱, TailwindCSS

          한입 리액트 실전 라이브러리 키트 - Zustand, Tanstack Query, TailwindCSS

          이정환 Winterlood

          ₩19,800

          초급 / React, 웹앱, TailwindCSS, react-query, zustand

          5.0

          (12)

          300+
          답변 활발
          답변 활발

          무료