30%
38,500원
초급자를 위해 준비한
[풀스택, 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. 소개
3 강
∙ 11분
섹션 1. Supabase Concepts
10 강
∙ 50분
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 설치하기
6 강
∙ 25분
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 배포하기
2 강
∙ 6분
3.1 Vercel 배포하기
02:56
3.2 다양한 배포 방식 (CI/CD)
03:49
섹션 4. Supabase install to next.js
3 강
∙ 14분
4.1 Supabase API key
06:53
4.2 env설정
03:55
4.3 Generating TypeScript Types
04:07
섹션 5. TodoList with Browser Level
15 강
∙ 2시간 21분
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 서버를 위한 최소 지식
9 강
∙ 47분
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
5 강
∙ 38분
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
7 강
∙ 49분
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 공유하기 기능
5 강
∙ 34분
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 배포 및 최적화
3 강
∙ 11분
강의 게시일 : 2024년 05월 24일
(마지막 업데이트일 : 2024년 05월 24일)
수강평
총 6개
수강생분들이 직접 작성하신 수강평입니다.
5
6개의 수강평
5점
4점
3점
2점
1점
VIEW
추천 순
최신 순
높은 평점 순
낮은 평점 순
평점 순
높은 평점 순
낮은 평점 순
next로 서버까지 다뤄보고 싶었는데, 마침 감사합니다.!! 👩🏿🦰
2024-05-25
안녕하세요, 코딩루팡님,
유튜브 구독자 입니다 :)
먼저 저에게 너무 필요한 강의를 올려주셔서 감사합니다.
특히 다음 2가지 부분에 대해 깊은 감사 드립니다.
(1) Next.js + Supabase
- Udemy 에서 Next.js 강의는 많지만 Next.js와 함께 Supabase 대해 다루는 강의는 찾아보지 못했습니다.
- 한국어로 되어 있는 강의는 더욱 없기 때문에 다시 한번 감사 드립니다.
(2) 학습방법
- 코딩 아바타가 되어, 일시정지하고 코드를 아무생각 없이 따라치면서 학습 했습니다.
- 알려주신 학습법 ( 추상화 -> 구체화 ) 부분을 적용해 지식을 습득 및 체화 하겠습니다.
유튜브 커뮤니티에 인프런 해당 강의가 출시 되었음을 공지해 주셨으면 좋을 것 같습니다.
[ 해당 강의가 심사 중에 있다는 소식만 있어서 혹시 몰라 전달 드립니다. ]
감사합니다.
2024-05-29
NextJS와함께 Supabase를 사용하는 방법을 배워서 좋았습니다
2024-06-11
nextjs와 supabase기초공부하기 좋았습니다! 감사합니다
2024-06-14
supabase를 배워보고 싶었는데 좋네요. 아주 좋은 기반이 될 수 있는 강의 같아요. 이를 바탕으로 열심히 프로젝트 만들어볼께요.! next + supa 풀스택 파워풀 합니다.
2024-05-24
