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

/

풀스택

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

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

(5.0) 수강평 18개

수강생 363명

Next.jssupabaseReact클론코딩
Thumbnail

초급자를 위해 준비한
[풀스택, 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

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

수강생 수

2,461

수강평 수

92

강의 평점

4.8

강의 수

4

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

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

  • 🚀 Naver Boostcamp BE 멘토 경험

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

커리큘럼

전체

68개 ∙ (7시간 12분)

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

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!