채널톡 아이콘

Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)

Firebase의 SQL버전! Supabase를 통해 Next.js 풀 스택 기초를 마스터 할 수 있어요.!

(4.9) 수강평 29개

수강생 445명

난이도 초급

수강기한 무제한

실습 중심
실습 중심
포트폴리오
포트폴리오
실습 중심
실습 중심
포트폴리오
포트폴리오

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

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

4.9

5.0

Malik KIM

100% 수강 후 작성

supabase와 nextjs를 함께 사용하는 한국어 강의를 찾기가 힘들었는데 덕분에 풀스택 웹앱을 빠르게 만들 수 있게 되어 너무 좋습니다. 좋은 강의 감사드립니다!

5.0

Han Lee

46% 수강 후 작성

안녕하세요, 코딩루팡님, 유튜브 구독자 입니다 :) 먼저 저에게 너무 필요한 강의를 올려주셔서 감사합니다. 특히 다음 2가지 부분에 대해 깊은 감사 드립니다. (1) Next.js + Supabase - Udemy 에서 Next.js 강의는 많지만 Next.js와 함께 Supabase 대해 다루는 강의는 찾아보지 못했습니다. - 한국어로 되어 있는 강의는 더욱 없기 때문에 다시 한번 감사 드립니다. (2) 학습방법 - 코딩 아바타가 되어, 일시정지하고 코드를 아무생각 없이 따라치면서 학습 했습니다. - 알려주신 학습법 ( 추상화 -> 구체화 ) 부분을 적용해 지식을 습득 및 체화 하겠습니다. 유튜브 커뮤니티에 인프런 해당 강의가 출시 되었음을 공지해 주셨으면 좋을 것 같습니다. [ 해당 강의가 심사 중에 있다는 소식만 있어서 혹시 몰라 전달 드립니다. ] 감사합니다.

5.0

권빵

31% 수강 후 작성

next로 서버까지 다뤄보고 싶었는데, 마침 감사합니다.!! 👩🏿‍🦰

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

  • Supabase ( RLS, Table 생성, API 연동 )

  • Next.js App Router

  • Vercel CI/CD 및 최적화

  • MVC 패턴으로 ToDoList 공유하기 기능

  • Next.js 서버를 위한 최소 지식

  • TypeScript 타이핑 기초

  • OAuth, Google Login, GitHub Login

요즘 FE개발자가 가장 쉽게 서버를 다룰 수 있는 Supabase !
Supabase + NextJS 14 FullStack 기본기

실무에 필요한 부분만 딱 담았어요 🍭

Firebase 대신 Supabase를 선택해야 하는 이유! 😮🌲

Firebase 의 SQL 버전, Supabase (슈바베이스)를 들어 보셨나요?

Supabase 는 다음과 같은 장점이 있어요.

  • PostgreSQL 기반의 SQL DB 기능

  • 강력한 RLS ( 행 수준의 보안 ) 으로 Application Level의 권한체크 위임.

  • DB Schema를 바탕으로 자동으로 만들어주는 REST API

  • RealTime DataBase

  • OAuth 2.1 지원 ( 구글, 깃허브, 카카오, 페이스북 로그인 등 )

  • AI assistant 및 최상의 개발자 경험을 가진 Admin 페이지 및 공식문서


강의를 통해 만들 수 있는 Supabase 프로젝트!

이 강의의 특징

📌 강의 필기 노트 안내 : 각 챕터별 Goal, 복습 포인트, 더 알아보기 (공식문서, 개념 등)

📌 강의 체크포인트 제공 : 코드를 따라 치지 않아도 괜찮아요! 챕터 별 Branch가 있습니다.

📌 이론 10% 실습 90% : Supabase RLS 등 중요한 이론도 같이 설명해요.

📌 포트폴리오 : 클론 코딩을 통해서 결과물을 얻어가실 수 있어요

이런 분들께 추천해요


Supabase 하루만에 적용 해요.

Supabase를 이용해서 로그인 가능한 웹을 하루만에 만들어보고 싶은 개발자 / 학생


Next.js 14 with supabase
최소한의 Next.js 서버지식으로

SSR, CSR 에 Supabase를 적용하는 방법


OAuth 소셜 로그인
어렵다는 소셜로그인

한방에 해결하는 방법

💡 Supbase + Next.js 의 조합은 그 누구보다 빠르게 풀스택 MVP 프로젝트 만들 수 있는 조합입니다.!

수강 후에는

  • 📌 Supabase를 이용해서 사이드 프로젝트를단 하루만에 만들 수 있어요.

  • 📌 PostgreSQL DB의 Table 생성, 조작, RLS, Trigger, Functions에 대해서 알게되요.

  • 📌 Next.js의 ServerActions, Middleware, RSC, RouterHandler (API) 를 만들 수 있어요.

  • 📌 TailwindCSS 으로 누구보다 빠르게 UI 개발 방법을 배워요.

  • 📌 Supabase Authentication 이용해서 소셜 로그인을 구현해요.

  • 📌 공유 기능이 있는 TodoApp 프로젝트를 만들어요.

이런 내용을 배워요.

Supabase SQL, RLS 이론

  • PostgreSQL의 강력한 DB 기능들

  • 테이블 생성, 조회, 수정, 삭제, 읽기 SQL 구문

  • REST API로 테이블 정보 가져오기

  • 쉬운 RLS 설명


Shared TodoApp ( with Next.js 14 )

  • App Router 이용한 클론코딩 웹

  • 브라우저 랜더링 Level의 Todo App

  • 서버 액션을 활용한 Todo App

  • 소셜 로그인 기능 및 공유 가능한 Todo App

Supabase Editor with AI Assistant

  • Table Editor : 테이블 만들기

  • SQL Editor : 데이터 조회하기

  • Authentication : 사용자 관리

Next.js 14 서버를 위한 최소 지식

  • Router Handler

  • Middleware

  • RSC (React Server Component)

  • ServerActions

수강 전 참고 사항

실습 환경

  • Node.js, VS Code, GitHub 를 사용합니다.

학습 자료

  • GitHub 및 챕터별 CheckPoint : Link

  • 필기 노트 및 워크북 제공 ! : Link

  • LiveDemo : Link

선수 지식 및 유의사항

  • 기본적인 HTML, CSS, React 지식

  • TailwindCSS로 스타일링 하고 있습니다. (+ 요약 강의가 있어요. 😀)

  • (*처음에 저는 TailwindCSS를 싫어했습니다. 하지만 처음에 러닝커브(1시간 정도) 개발 경험 향상 및 개발 속도가 압도적으로 빨라졌습니다.! 정말 후회 없으실 겁니다. )


이런 분들께
추천드려요

학습 대상은
누구일까요?

  • Next.js 로 프로젝트를 시작하시려는 분

  • Supabase를 도입하려는 FE 개발자 분

  • Next.js 로 서버 풀스택을 개발하려는 분

선수 지식,
필요할까요?

  • 기초수준의 HTML, CSS, React

안녕하세요
도도(코딩루팡)입니다.

4,166

수강생

176

수강평

94

답변

4.8

강의 평점

5

강의

  • 프론트 개발자로 네카라쿠배 중 하나의 IT서비스 기업에 재직하고 있습니다. 😀

  • 🚀 SW마에스트로 Expert 취업 멘토링

  • 🚀 Naver Boostcamp BE 멘토 경험

  • 🚀 FE 7Code 로드맵 강의 제작

더보기

커리큘럼

전체

68개 ∙ (7시간 12분)

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

수강평

전체

29개

4.9

29개의 수강평

  • Malik KIM님의 프로필 이미지
    Malik KIM

    수강평 4

    평균 평점 4.0

    5

    100% 수강 후 작성

    supabase와 nextjs를 함께 사용하는 한국어 강의를 찾기가 힘들었는데 덕분에 풀스택 웹앱을 빠르게 만들 수 있게 되어 너무 좋습니다. 좋은 강의 감사드립니다!

    • 도도(코딩루팡)
      지식공유자

      수강해주셔서 진심으로 감사드립니다! Next.js와 Supabase를 함께 사용한다는 것은 결코 쉬운 일이 아닙니다. 이 두 가지를 제대로 활용하려면 서버 사이드 렌더링과 풀스택 개발에 대한 깊은 이해가 필요하죠. 이번 강의가 여러분의 프로젝트 진행에 있어 큰 도움이 되었기를 바랍니다. 이 조합을 잘 활용하면, 강력하고 효율적인 웹 애플리케이션을 만들 수 있는 기반이 될 것입니다. 앞으로도 여러분의 개발 여정에 좋은 길잡이가 되었기를 바라며, 더 나은 성장을 이루시길 응원합니다!

  • Han Lee님의 프로필 이미지
    Han Lee

    수강평 2

    평균 평점 5.0

    5

    46% 수강 후 작성

    안녕하세요, 코딩루팡님, 유튜브 구독자 입니다 :) 먼저 저에게 너무 필요한 강의를 올려주셔서 감사합니다. 특히 다음 2가지 부분에 대해 깊은 감사 드립니다. (1) Next.js + Supabase - Udemy 에서 Next.js 강의는 많지만 Next.js와 함께 Supabase 대해 다루는 강의는 찾아보지 못했습니다. - 한국어로 되어 있는 강의는 더욱 없기 때문에 다시 한번 감사 드립니다. (2) 학습방법 - 코딩 아바타가 되어, 일시정지하고 코드를 아무생각 없이 따라치면서 학습 했습니다. - 알려주신 학습법 ( 추상화 -> 구체화 ) 부분을 적용해 지식을 습득 및 체화 하겠습니다. 유튜브 커뮤니티에 인프런 해당 강의가 출시 되었음을 공지해 주셨으면 좋을 것 같습니다. [ 해당 강의가 심사 중에 있다는 소식만 있어서 혹시 몰라 전달 드립니다. ] 감사합니다.

    • 도도(코딩루팡)
      지식공유자

      안녕하세요. ㅎㅎㅎ 구독자셨군요.! 항상 부족한 유튭채널에 구독해주셔서 감사드리옵니다. 강의 출시 소식 전달이 좀 늦었네요 ㅠㅠ, 부족할 수 있는 강의 수강신청해주셔서 정말 감사드려요. HanLee님 기억하고 있다가 강의 뿐 아니라 진로, 취업 등 질문주시면 더 정성스럽게 답변드리도록 하겠습니다. ~ 👍

  • 권빵님의 프로필 이미지
    권빵

    수강평 2

    평균 평점 5.0

    5

    31% 수강 후 작성

    next로 서버까지 다뤄보고 싶었는데, 마침 감사합니다.!! 👩🏿‍🦰

  • 노용석님의 프로필 이미지
    노용석

    수강평 4

    평균 평점 4.8

    5

    31% 수강 후 작성

    • 코드DOS님의 프로필 이미지
      코드DOS

      수강평 4

      평균 평점 5.0

      5

      31% 수강 후 작성

      supabase를 배워보고 싶었는데 좋네요. 아주 좋은 기반이 될 수 있는 강의 같아요. 이를 바탕으로 열심히 프로젝트 만들어볼께요.! next + supa 풀스택 파워풀 합니다.

      • 도도(코딩루팡)
        지식공유자

        화이팅 입니다.! 슈파베이스 정말 빠르게 프로젝트 만드는데 최고인것 같아요

    도도(코딩루팡)님의 다른 강의

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

    비슷한 강의

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

    2026 새해 복 마🐴니 할인 중 (6일 남음)

    ₩4,872

    28%

    ₩55,000