🤍 전 강의 25% 할인 중 🤍

2024년 상반기를 돌아보고 하반기에도 함께 성장해요!
인프런이 준비한 25% 할인 받으러 가기 >>

Thumbnail
얼리버드 할인 중(D-4)
NEW
개발 · 프로그래밍 풀스택

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

(5)
6개의 수강평 ∙  176명의 수강생

30%

38,500원

55,000원
지식공유자: 도도(코딩루팡)
총 68개 수업 (7시간 12분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

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

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

✍️
이런 걸
배워요!
Supabase ( RLS, Table 생성, API 연동 )
Next.js App Router
Vercel CI/CD 및 최적화
MVC 패턴으로 ToDoList 공유하기 기능
next.js 서버를 위한 최소 지식
Typescript 타이핑 기초
OAuth, Google Login, Github Login

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
Next.js 로 프로젝트를 시작하시려는 분
Supabase를 도입하려는 FE 개발자 분
Next.js 로 서버 풀스택을 개발하려는 분
📚
선수 지식,
필요할까요?
기초수준의 HTML, CSS, React

안녕하세요
도도(코딩루팡) 입니다.
도도(코딩루팡)의 썸네일
  • 프론트 개발자로 네카라쿠배 중 하나의 IT서비스 기업에 재직하고 있습니다. 😀

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

  • 🚀 Naver Boostcamp BE 멘토 경험

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

커리큘럼 총 68 개 ˙ 7시간 12분의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 소개
섹션 1. Supabase Concepts
1.1 Supabase 란 ? 미리보기 04:41 1.2 Supabase는 든든한 백엔드 지원군 미리보기 02:39 1.3 Supabase vs Firebase 미리보기 04:19 1.4 Supabase의 가격 정책 Pricing 미리보기 01:44 1.5 Supabase의 RLS (Row-Level Security) 미리보기 07:33
1-6 Supabase 시작하기 (조직 만들기, 프로젝트 만들기) 11:10
1.7 Todolist (with no RLS) 테이블 만들기 05:55
1.8 Supbase TableEditor 사용해보기 with suapAI 02:31
1.9 Supbase SQL Editor 사용해보기 06:30
1.10 DBeaver로 supabase connection 해보기 03:20
섹션 2. NextJS 설치하기
2.1 클론 코딩 결과물 미리보기 미리보기 02:57 2.2 개발환경구축 미리보기 03:39
2.3 NextJS 설치 09:03
2.4 VSCode Typescript 애러 해결 01:29
2.5 라이브러리 소개 05:51
2.6 (보충) github SSH 키 등록방법 02:49
섹션 3. NextJS 배포하기
3.1 Vercel 배포하기 02:56
3.2 다양한 배포 방식 (CI/CD) 03:49
섹션 4. Supabase install to next.js
4.1 Supabase API key 06:53
4.2 env설정 03:55
4.3 Generating TypeScript Types 04:07
섹션 5. TodoList with Browser Level
5.1 TodoList with Browser Level 구현계획 미리보기 04:40
5.2 Supabase browserClient 03:37
(보충) 브라우저 렌더링 역사 (CSR, SSR, Hydration, Progressive Render, Suspense, use client) 19:14
5.3 AppRouter 기본 설정하기 09:10
5.4 API - getTodos 06:13
5.5 API - getTodosById, getTodosBySearch 06:04
5.6 API - createTodos, updateTodos 09:01
5.7 Hook - todoController 1 Get 07:34
5.8 Hook - todoController 2 Create, Update, Delete 06:01
5.9 (보충수업) tailwindCSS 정리 1,2,3 20:25
5.10 UI 및 기능 구현 계획 01:11
5.11 TodoList UI 만들기 - Header 미리보기 11:21
5.12 TodoList UI 만들기 - Search 09:43
5.13 TodoList UI 만들기 - TodoItem 14:43
5.14 TodoList UI 만들기 - event 12:06
섹션 6. Next.js 14 서버를 위한 최소 지식
6.1 Supabase serverClient 10:46
6.2 RouterHandler 03:53
6.3 RouterHandler (예) getTodoList API 만들기 02:11
6.4 Middleware 04:41
6.5 Middleware (예) 쿠키 카운터 미리보기 03:24
6.6 RSC (with use client) 05:59
6.7 ServerActions 07:44
6.8 Supabase serverClient 설명 04:19
6.9 ServerActions (예) getTodoList 액션 만들기 미리보기 04:15
섹션 7. 인증 (Authentication) with OAuth 2.1
7.1 OAuth를 위한 GoogleCloud, Supabase Setup 05:52
7.2 구글 로그인 1 - AuthUI 구현 15:02
(보충) Implicit flow vs PKCE flow 04:37
7.3 구글 로그인 2 - PKCE Flow 구현 07:24
7.4 깃허브 로그인 미리보기 05:30
섹션 8. TodoList with RLS, ServerActions
8.1 TodoList Table 만들기 with RLS 미리보기 04:55
8.2 RLS 정책 구현계획 07:53
8.3 Select, Insert, Update, Delete RLS 정책 만들기 05:40
8.4 Server Actions CRUD 로직, RLS 테스트 11:53
8.5 AuthHeader 11:30
8.6 사용자 정보 가져오기 03:22
8.7 테스트 및 오류수정 04:46
섹션 9. TodoList 공유하기 기능
9.1 Share 페이지 만들기 05:50
9.2 Profiles Table 만들기 ( trigger function ) 14:31
9.3 Profile actions & permanentRedirect 04:22
9.4 getTodoByUserId 04:53
9.5 테스트 및 오류수정 05:09
섹션 10. Vercel 배포 및 최적화
10.1 배포 준비하기 01:40
10.2 Vercel 배포하기 04:58
10.3 성능 최적화 : Serverless가 느린 현상 미리보기 05:00
강의 게시일 : 2024년 05월 24일 (마지막 업데이트일 : 2024년 05월 24일)
수강평 총 6개
수강생분들이 직접 작성하신 수강평입니다.
5
6개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
Han Lee thumbnail
5
안녕하세요, 코딩루팡님, 유튜브 구독자 입니다 :) 먼저 저에게 너무 필요한 강의를 올려주셔서 감사합니다. 특히 다음 2가지 부분에 대해 깊은 감사 드립니다. (1) Next.js + Supabase - Udemy 에서 Next.js 강의는 많지만 Next.js와 함께 Supabase 대해 다루는 강의는 찾아보지 못했습니다. - 한국어로 되어 있는 강의는 더욱 없기 때문에 다시 한번 감사 드립니다. (2) 학습방법 - 코딩 아바타가 되어, 일시정지하고 코드를 아무생각 없이 따라치면서 학습 했습니다. - 알려주신 학습법 ( 추상화 -> 구체화 ) 부분을 적용해 지식을 습득 및 체화 하겠습니다. 유튜브 커뮤니티에 인프런 해당 강의가 출시 되었음을 공지해 주셨으면 좋을 것 같습니다. [ 해당 강의가 심사 중에 있다는 소식만 있어서 혹시 몰라 전달 드립니다. ] 감사합니다.
2024-05-29
지식공유자 도도(코딩루팡)
안녕하세요. ㅎㅎㅎ 구독자셨군요.! 항상 부족한 유튭채널에 구독해주셔서 감사드리옵니다. 강의 출시 소식 전달이 좀 늦었네요 ㅠㅠ, 부족할 수 있는 강의 수강신청해주셔서 정말 감사드려요. HanLee님 기억하고 있다가 강의 뿐 아니라 진로, 취업 등 질문주시면 더 정성스럽게 답변드리도록 하겠습니다. ~ 👍
2024-05-29
김병호 thumbnail
5
NextJS와함께 Supabase를 사용하는 방법을 배워서 좋았습니다
2024-06-11
지식공유자 도도(코딩루팡)
100% 수강 해주셔서 감사합니다.! 어렵거나 아쉬운점, 피드백 있으면 말씀부탁드려요~ 늘 응원합니다.
2024-06-11
권빵 thumbnail
5
next로 서버까지 다뤄보고 싶었는데, 마침 감사합니다.!! 👩🏿‍🦰
2024-05-25
지식공유자 도도(코딩루팡)
리뷰 감사합니다.!
2024-05-27
jgkang thumbnail
5
nextjs와 supabase기초공부하기 좋았습니다! 감사합니다
2024-06-14
지식공유자 도도(코딩루팡)
100% 수강 감사합니다.! 앞으로 멋진 프로젝트로 건승하시길 바랍니다.
2024-06-16
코드DOS thumbnail
5
supabase를 배워보고 싶었는데 좋네요. 아주 좋은 기반이 될 수 있는 강의 같아요. 이를 바탕으로 열심히 프로젝트 만들어볼께요.! next + supa 풀스택 파워풀 합니다.
2024-05-24
지식공유자 도도(코딩루팡)
화이팅 입니다.! 슈파베이스 정말 빠르게 프로젝트 만드는데 최고인것 같아요
2024-05-27
채널톡 아이콘