
기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
도도(코딩루팡)
React, Next.JS 14, TailwindCss, RadixUI, Shadcn, zustand 으로 YoutubeMusic 웹사이트를 클론합니다. NextJS 기초부터 UI 중점으로 웹프론트 기초를 마스터 할 수 있어요.!
Basic
Next.js, React, TailwindCSS
Firebase의 SQL버전! Supabase를 통해 Next.js 풀 스택 기초를 마스터 할 수 있어요.!
수강생 458명
난이도 초급
수강기한 무제한







신한DS
임직원들도 이 강의를 듣고 있어요!





신한DS
임직원들도 이 강의를 듣고 있어요!
먼저 경험한 수강생들의 후기
5.0
Malik KIM
supabase와 nextjs를 함께 사용하는 한국어 강의를 찾기가 힘들었는데 덕분에 풀스택 웹앱을 빠르게 만들 수 있게 되어 너무 좋습니다. 좋은 강의 감사드립니다!
5.0
Han Lee
안녕하세요, 코딩루팡님, 유튜브 구독자 입니다 :) 먼저 저에게 너무 필요한 강의를 올려주셔서 감사합니다. 특히 다음 2가지 부분에 대해 깊은 감사 드립니다. (1) Next.js + Supabase - Udemy 에서 Next.js 강의는 많지만 Next.js와 함께 Supabase 대해 다루는 강의는 찾아보지 못했습니다. - 한국어로 되어 있는 강의는 더욱 없기 때문에 다시 한번 감사 드립니다. (2) 학습방법 - 코딩 아바타가 되어, 일시정지하고 코드를 아무생각 없이 따라치면서 학습 했습니다. - 알려주신 학습법 ( 추상화 -> 구체화 ) 부분을 적용해 지식을 습득 및 체화 하겠습니다. 유튜브 커뮤니티에 인프런 해당 강의가 출시 되었음을 공지해 주셨으면 좋을 것 같습니다. [ 해당 강의가 심사 중에 있다는 소식만 있어서 혹시 몰라 전달 드립니다. ] 감사합니다.
5.0
권빵
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 의 SQL 버전, Supabase (슈바베이스)를 들어 보셨나요?
Supabase 는 다음과 같은 장점이 있어요.
PostgreSQL 기반의 SQL DB 기능
강력한 RLS ( 행 수준의 보안 ) 으로 Application Level의 권한체크 위임.
DB Schema를 바탕으로 자동으로 만들어주는 REST API
RealTime DataBase
OAuth 2.1 지원 ( 구글, 깃허브, 카카오, 페이스북 로그인 등 )
AI assistant 및 최상의 개발자 경험을 가진 Admin 페이지 및 공식문서
.png?w=960)
강의를 통해 만들 수 있는 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 를 사용합니다.
기본적인 HTML, CSS, React 지식
TailwindCSS로 스타일링 하고 있습니다. (+ 요약 강의가 있어요. 😀)
(*처음에 저는 TailwindCSS를 싫어했습니다. 하지만 처음에 러닝커브(1시간 정도) 개발 경험 향상 및 개발 속도가 압도적으로 빨라졌습니다.! 정말 후회 없으실 겁니다. )
학습 대상은
누구일까요?
Next.js 로 프로젝트를 시작하시려는 분
Supabase를 도입하려는 FE 개발자 분
Next.js 로 서버 풀스택을 개발하려는 분
선수 지식,
필요할까요?
기초수준의 HTML, CSS, React
4,300
명
수강생
190
개
수강평
94
개
답변
4.8
점
강의 평점
5
개
강의
프론트 개발자로 네카라쿠배 중 하나의 IT서비스 기업에 재직하고 있습니다. 😀
🚀 SW마에스트로 Expert 취업 멘토링
🚀 Naver Boostcamp BE 멘토 경험
🚀 FE 7Code 로드맵 강의 제작
전체
68개 ∙ (7시간 12분)
4. 1.1 Supabase 란 ?
04:41
전체
30개
4.9
30개의 수강평
수강평 2
∙
평균 평점 5.0
5
안녕하세요, 코딩루팡님, 유튜브 구독자 입니다 :) 먼저 저에게 너무 필요한 강의를 올려주셔서 감사합니다. 특히 다음 2가지 부분에 대해 깊은 감사 드립니다. (1) Next.js + Supabase - Udemy 에서 Next.js 강의는 많지만 Next.js와 함께 Supabase 대해 다루는 강의는 찾아보지 못했습니다. - 한국어로 되어 있는 강의는 더욱 없기 때문에 다시 한번 감사 드립니다. (2) 학습방법 - 코딩 아바타가 되어, 일시정지하고 코드를 아무생각 없이 따라치면서 학습 했습니다. - 알려주신 학습법 ( 추상화 -> 구체화 ) 부분을 적용해 지식을 습득 및 체화 하겠습니다. 유튜브 커뮤니티에 인프런 해당 강의가 출시 되었음을 공지해 주셨으면 좋을 것 같습니다. [ 해당 강의가 심사 중에 있다는 소식만 있어서 혹시 몰라 전달 드립니다. ] 감사합니다.
안녕하세요. ㅎㅎㅎ 구독자셨군요.! 항상 부족한 유튭채널에 구독해주셔서 감사드리옵니다. 강의 출시 소식 전달이 좀 늦었네요 ㅠㅠ, 부족할 수 있는 강의 수강신청해주셔서 정말 감사드려요. HanLee님 기억하고 있다가 강의 뿐 아니라 진로, 취업 등 질문주시면 더 정성스럽게 답변드리도록 하겠습니다. ~ 👍
수강평 4
∙
평균 평점 4.0
5
supabase와 nextjs를 함께 사용하는 한국어 강의를 찾기가 힘들었는데 덕분에 풀스택 웹앱을 빠르게 만들 수 있게 되어 너무 좋습니다. 좋은 강의 감사드립니다!
수강해주셔서 진심으로 감사드립니다! Next.js와 Supabase를 함께 사용한다는 것은 결코 쉬운 일이 아닙니다. 이 두 가지를 제대로 활용하려면 서버 사이드 렌더링과 풀스택 개발에 대한 깊은 이해가 필요하죠. 이번 강의가 여러분의 프로젝트 진행에 있어 큰 도움이 되었기를 바랍니다. 이 조합을 잘 활용하면, 강력하고 효율적인 웹 애플리케이션을 만들 수 있는 기반이 될 것입니다. 앞으로도 여러분의 개발 여정에 좋은 길잡이가 되었기를 바라며, 더 나은 성장을 이루시길 응원합니다!
지식공유자님의 다른 강의를 만나보세요!
같은 분야의 다른 강의를 만나보세요!