인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
BEST
개발 · 프로그래밍

/

풀스택

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

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

(4.9) 수강평 24개

수강생 404명

Next.jssupabaseReact클론코딩

초급자를 위해 준비한
[풀스택, Next.js] 강의입니다.

이런 걸 배울 수 있어요

  • 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 이론

Supabase SQL, RLS 이론

  • PostgreSQL의 강력한 DB 기능들

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

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

  • 쉬운 RLS 설명


Shared TodoApp ( with Next.js 14 )

Shared TodoApp ( with Next.js 14 )

  • App Router 이용한 클론코딩 웹

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

  • 서버 액션을 활용한 Todo App

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

Supabase Editor with AI Assistant

Supabase Editor with AI Assistant

  • Table Editor : 테이블 만들기

  • SQL Editor : 데이터 조회하기

  • Authentication : 사용자 관리

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

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

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

3,359

명

수강생

127

개

수강평

77

개

답변

4.8

점

강의 평점

5

개

강의

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

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

  • 🚀 Naver Boostcamp BE 멘토 경험

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

커리큘럼

전체

68개 ∙ (7시간 12분)

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

수강평

전체

24개

4.9

24개의 수강평

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

    수강평 2

    ∙

    평균 평점 5.0

    5

    31% 수강 후 작성

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

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

    수강평 4

    ∙

    평균 평점 5.0

    5

    31% 수강 후 작성

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

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

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

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

    수강평 3

    ∙

    평균 평점 3.7

    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 YTMusic 클론 코딩 (with next.js 14, UI 마스터)강의 썸네일

    기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

    도도(코딩루팡)

    React, Next.JS 14, TailwindCss, RadixUI, Shadcn, zustand 으로 YoutubeMusic 웹사이트를 클론합니다. NextJS 기초부터 UI 중점으로 웹프론트 기초를 마스터 할 수 있어요.!

    초급

    초급

    Next.js, React, TailwindCSS

    개발자 취업 전략 시크릿 - 7CODE (네카라쿠배 로드맵 완성)강의 썸네일

    개발자 취업 전략 시크릿 - 7CODE (네카라쿠배 로드맵 완성)

    도도(코딩루팡)

    프론트 개발자 취업에 필요한 단계를 7가지 코드로 정리했습니다. 저는 개발자 선배가 없어서 취준때 막연했는데, 이제 걱정하지 마세요. 😀

    입문

    입문

    면접, 기술면접, 포트폴리오

    1시간만에 Chat GPT 클론 with Cursor (원데이 클래스)강의 썸네일

    1시간만에 Chat GPT 클론 with Cursor (원데이 클래스)

    도도(코딩루팡)

    Next.js + Cursor IDE 로 챗 프로그램을 한시간만에 구현하는 능력을 가질 수 있어요.

    입문

    입문

    nextjs, ChatGPT, React

    React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)강의 썸네일

    React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)

    도도(코딩루팡)

    1시간안에 끝내는 React기반의 GPT AI서비스 강의 수강 후 나만의 AI GPT SASS 솔루션을 만들어 보세요.

    초급

    초급

    React, ChatGPT, JavaScript

    비슷한 강의

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

    만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)강의 썸네일

    만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)

    totuworld

    겉만 멋진 서비스 말고 사용자를 만나서 피드백 받을 수 있는 서비스를 만들 수 있습니다. 웹 개발에 자신감을 얻을 수 있습니다.

    초급

    초급

    Next.js

    따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)강의 썸네일

    따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

    John Ahn

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

    초급

    초급

    클론코딩, Node.js, React

    [풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)강의 썸네일

    [풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)

    로펀

    풀스택 개발에 날개를 달아줄 Supabase! 3가지의 클론 프로젝트를 통해 Next.js 14와 Supabase로 실무 수준의 풀스택 개발을 하는 법을 속성으로 배우게 됩니다.

    초급

    초급

    Next.js, supabase, TailwindCSS

    Next.js 시작하기강의 썸네일

    Next.js 시작하기

    장기효(캡틴판교)

    React를 시작할 때 꼭 알아야 하는 Next.js 프레임워크. 입문자 관점의 쉬운 설명과 실무자가 만족하는 심도 깊은 동작 원리 이해까지. Next.js를 한방에 해결합니다.

    초급

    초급

    Next.js, React, JavaScript

    React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드강의 썸네일

    React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드

    닭강정

    React, Node.js, MongoDB를 활용해 회사 웹사이트를 직접 제작하는 과정을 배울 수 있는 실전 강의입니다. 간단한 React, Node.js 배경으로 풀스택 프로젝트를 같이 만들어요!

    중급이상

    중급이상

    React, Node.js, MongoDB

    프로젝트로 쉽게 배우는 Svelte(SvelteKit + Supabase)강의 썸네일

    프로젝트로 쉽게 배우는 Svelte(SvelteKit + Supabase)

    Michael Kwon

    체계적인 단계의 프로젝트 실습과 배포, 빌트인 store 활용, SvelteKit와 Supabase로 풀스택 애플리케이션까지 한방에!

    초급

    초급

    Svelte, sveltekit, supabase

    기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)강의 썸네일

    기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

    도도(코딩루팡)

    React, Next.JS 14, TailwindCss, RadixUI, Shadcn, zustand 으로 YoutubeMusic 웹사이트를 클론합니다. NextJS 기초부터 UI 중점으로 웹프론트 기초를 마스터 할 수 있어요.!

    초급

    초급

    Next.js, React, TailwindCSS

    Next.js 15로 완성하는 실전 YouTube 클론 개발강의 썸네일

    Next.js 15로 완성하는 실전 YouTube 클론 개발

    antonio

    이 24시간 튜토리얼에서는 자신만의 유튜브 클론을 만드는 방법을 배우게 됩니다. Next 15와 React 19(tRPC 포함), 서버 컴포넌트에서의 프리페칭, 클라이언트 컴포넌트에서의 서스펜스 활용, 비디오 처리, 백그라운드 작업, AI 기능 등 고급 주제들을 다룰 것입니다.

    초급

    초급

    Next.js, React, PostgreSQL

    웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크강의 썸네일

    웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크

    코드캠프

    웹 개발을 활용해서 Android와 IOS에 서비스 가능한 모바일앱 개발을 할 수 있도록 도와주는 강의입니다.

    초급

    초급

    React, Next.js, expo

    iOS/Android 앱 개발을 위한 실전 React Native - Basic강의 썸네일

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

    Wintho

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

    초급

    초급

    React Native, React, ES6

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

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

    ludgi

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

    중급이상

    중급이상

    Next.js, React, GraphQL

    모바일, 태블릿, pc 반응형 인스타그램 클론코딩강의 썸네일

    모바일, 태블릿, pc 반응형 인스타그램 클론코딩

    더코딩클럽

    이 강의를 통해 수강생은 HTML, CSS, JS로 인스타그램과 비슷한 웹서비스를 만들 수있습니다. ( 프론트만 구현했습니다! 백엔드 서버 구축은 차후 강의 촬영 예정입니다.)

    초급

    초급

    HTML/CSS, JavaScript, 클론코딩

    카페 24 베스트 쇼핑몰 디자인 클론코딩하기 (HTML + CSS)강의 썸네일

    카페 24 베스트 쇼핑몰 디자인 클론코딩하기 (HTML + CSS)

    같이코딩

    카페 24에 올라온 베스트 쇼핑몰 디자인을 직접 클론코딩해보며 빠르게 HTML과 CSS를 학습할 수 있습니다. HTML + CSS에 대한 기본적인 이론을 학습하고 직접 클론코딩을 통해 쇼핑몰 디자인을 완성하여 이론에서 배웠던 내용을 적용하고 견고하게 HTML과 CSS의 틀을 잡을 수 있게 강의를 구성했습니다

    입문

    입문

    클론코딩, HTML/CSS, 웹 디자인

    모던 웹 인터렉티브 CSS3 부트캠프 [Full vers.]강의 썸네일

    모던 웹 인터렉티브 CSS3 부트캠프 [Full vers.]

    영코디 킴쌤

    초등학생 코딩교육부터 시작하여 IT소프트웨어학과의 고등학생, 컴공과 대학생, 비전공자인 취준생을 대상으로 15년 넘게 코딩교육에 전념해온 현직 스타강사 영코디 킴쌤의 쉽고 재미있는 코딩강의를 이제 오프라인 뿐만 아니라 온라인에서도 만나실 수 있습니다. 500여명이 넘는 프론트엔드, 백엔드, 풀스택, 웹 개발자를 배출해온 영코디 킴쌤과 함께라면 당신의 개발자 꿈도 곧 현실이 됩니다!

    입문

    입문

    HTML/CSS, 웹 디자인, 클론코딩

    Flutter + Firebase로 넷플릭스 UI 클론 코딩하기 [무작정 플러터]강의 썸네일

    Flutter + Firebase로 넷플릭스 UI 클론 코딩하기 [무작정 플러터]

    권태뽕

    본 강의는 Flutter와 Firebase로 넷플릭스 UI를 클론 코딩하는 강의입니다! 가장 빠르게 앱 개발을 공부할 수 있는 Flutter를 시작하세요:)

    초급

    초급

    클론코딩, Flutter, Firebase

    공식문서로 배우는 실전 타입스크립트강의 썸네일

    공식문서로 배우는 실전 타입스크립트

    어쩔코딩

    타입스크립트를 제대로 이해하려면 공식문서를 한번쯤 보셔야겠죠? 문서에서 중요한 부분들만 콕 집어서 알기 쉽게 전달해드리고 실전에 필요한 내용들도 같이 알려드리는 강의입니다!

    입문

    입문

    TypeScript, JavaScript, ES6

    타입스크립트 코리아 : React with TypeScript 세미나강의 썸네일

    타입스크립트 코리아 : React with TypeScript 세미나

    이웅재

    타입스크립트와 리액트 관련 강좌입니다.

    중급이상

    중급이상

    React, TypeScript

    ₩41,250

    25%

    ₩55,000