BEST

Programming

Full-stack

Bắt đầu Supabase, Next full-stack (kết hợp 슈파베이스 OAuth, nextjs 14)

Name: Bắt đầu Supabase, Next full-stack (kết hợp 슈파베이스 OAuth, nextjs 14)
Price: 55000 KRW

Firebase phiên bản SQL! Bạn có thể làm chủ kiến thức cơ bản về full-stack Next.js thông qua Supabase.!

(4.9) 26 đánh giá

425 học viên

dodocoding

실습 중심

포트폴리오

Next.js

supabase

React

Clone Coding

Đánh giá từ những học viên đầu tiên

Dịch cái này sang tiếng Việt

Supabase (RLS, Tạo bảng, Liên kết API)
Next.js App Router
Vercel CI/CD và tối ưu hóa
Chia sẻ danh sách việc cần làm bằng mô hình MVC
Kiến thức tối thiểu cho máy chủ Next.js
Các kiến thức cơ bản về kiểu (typing) trong TypeScript
OAuth, Đăng nhập Google, Đăng nhập GitHub

Tại sao bạn nên chọn Supabase thay vì Firebase ! 😮 🌲

Bạn đã nghe nói đến Supabase , phiên bản SQL của Firebase chưa?

Supabase có những ưu điểm sau:

Các tính năng của SQL DB dựa trên PostgreSQL
Kiểm tra ủy quyền ở cấp độ ứng dụng với RLS (bảo mật cấp hàng) mạnh mẽ .
REST API được tạo tự động dựa trên DB Schema
Cơ sở dữ liệu thời gian thực
Hỗ trợ OAuth 2.1 (đăng nhập Google, GitHub, Kakao, Facebook, v.v.)
Trang quản trị và tài liệu chính thức với trợ lý AI và trải nghiệm tốt nhất cho nhà phát triển

Dự án Supabase bạn có thể tạo thông qua bài giảng!

Các tính năng của khóa học này

📌 Hướng dẫn ghi chú bài giảng : Mục tiêu cho mỗi chương, các điểm cần xem lại và nhiều thông tin khác (tài liệu chính thức, khái niệm, v.v.)

📌 Cung cấp các điểm kiểm tra bài giảng : Không sao nếu bạn không tuân thủ quy định! Mỗi chương đều có các nhánh.

📌 10% lý thuyết, 90% thực hành : Chúng tôi cũng giải thích các lý thuyết quan trọng như Supabase RLS.

📌 Danh mục đầu tư : Bạn có thể nhận được kết quả thông qua mã hóa bản sao.

Sau giờ học

📌 Bạn có thể tạo một dự án phụ chỉ trong một ngày bằng Supabase.
📌 Bạn sẽ tìm hiểu về cách tạo bảng, thao tác, RLS, kích hoạt và hàm trong PostgreSQL DB.
📌 Bạn có thể tạo ServerActions, Middleware, RSC, RouterHandler (API) của Next.js.
📌 Học phương pháp phát triển UI nhanh hơn bất kỳ ai khác với TailwindCSS.
📌 Triển khai đăng nhập bằng mạng xã hội bằng Supabase Authentication.
📌 Tạo dự án TodoApp có chức năng chia sẻ.

Khuyến nghị cho
những người này

Khóa học này dành cho ai?

Dành cho những ai muốn bắt đầu dự án với Next.js
Dành cho các bạn FE Developer đang muốn dùng thử Supabase
Dành cho những ai muốn phát triển full-stack server bằng Next.js

Cần biết trước khi bắt đầu?

HTML, CSS, React ở mức cơ bản

Xin chào
Đây là

3,708

Học viên

146

Đánh giá

Trả lời

4.8

Xếp hạng

Các khóa học

프론트 개발자로 네카라쿠배 중 하나의 IT서비스 기업에 재직하고 있습니다. 😀
🚀 SW마에스트로 Expert 취업 멘토링
🚀 Naver Boostcamp BE 멘토 경험
🚀 FE 7Code 로드맵 강의 제작

Chương trình giảng dạy

Tất cả

68 bài giảng ∙ (7giờ 12phút)

Phần 1. Giới thiệu

3 bài giảng ∙ (11phút)

Phần 2. Các Khái niệm Supabase

10 bài giảng ∙ (50phút)

Phần 3. Cài đặt NextJS

6 bài giảng ∙ (25phút)

14. 2.1 Xem trước kết quả của việc lập trình bản sao
02:57
15. 2.2 Xây dựng môi trường phát triển
03:39
16. 2.3 Cài đặt NextJS
09:03
17. 2. 4 Giải quyết lỗi Typescript trong VSCode
01:29
18. 2.5 Giới thiệu về thư viện
05:51
19. 2.6 (Bổ sung) Cách đăng ký SSH key trên github
02:49

Phần 4. Triển khai NextJS

2 bài giảng ∙ (6phút)

Phần 5. Cài đặt Supabase vào Next.js

3 bài giảng ∙ (14phút)

Phần 6. Danh sách việc cần làm với cấp độ trình duyệt

15 bài giảng ∙ (2giờ 21phút)

Phần 7. Kiến thức tối thiểu cần thiết cho Next.js 14 server.

9 bài giảng ∙ (47phút)

Phần 8. Xác thực (Authentication) với OAuth 2.1

5 bài giảng ∙ (38phút)

Phần 9. Danh sách việc cần làm với RLS, Server Actions

7 bài giảng ∙ (49phút)

Phần 10. Tính năng chia sẻ TodoList

5 bài giảng ∙ (34phút)

Phần 11. Triển khai và tối ưu hóa Vercel

3 bài giảng ∙ (11phút)

Ngày đăng:

Cập nhật lần cuối:

Đánh giá

Tất cả

26 đánh giá

4.9

26 đánh giá

Malik KIM
Đánh giá 3
∙
Đánh giá trung bình 3.7
5
100% đã tham gia
supabase와 nextjs를 함께 사용하는 한국어 강의를 찾기가 힘들었는데 덕분에 풀스택 웹앱을 빠르게 만들 수 있게 되어 너무 좋습니다. 좋은 강의 감사드립니다!
- 도도(코딩루팡)
  Giảng viên
  수강해주셔서 진심으로 감사드립니다! Next.js와 Supabase를 함께 사용한다는 것은 결코 쉬운 일이 아닙니다. 이 두 가지를 제대로 활용하려면 서버 사이드 렌더링과 풀스택 개발에 대한 깊은 이해가 필요하죠. 이번 강의가 여러분의 프로젝트 진행에 있어 큰 도움이 되었기를 바랍니다. 이 조합을 잘 활용하면, 강력하고 효율적인 웹 애플리케이션을 만들 수 있는 기반이 될 것입니다. 앞으로도 여러분의 개발 여정에 좋은 길잡이가 되었기를 바라며, 더 나은 성장을 이루시길 응원합니다!
Han Lee
Đánh giá 2
∙
Đánh giá trung bình 5.0
5
46% đã tham gia
안녕하세요, 코딩루팡님, 유튜브 구독자 입니다 :) 먼저 저에게 너무 필요한 강의를 올려주셔서 감사합니다. 특히 다음 2가지 부분에 대해 깊은 감사 드립니다. (1) Next.js + Supabase - Udemy 에서 Next.js 강의는 많지만 Next.js와 함께 Supabase 대해 다루는 강의는 찾아보지 못했습니다. - 한국어로 되어 있는 강의는 더욱 없기 때문에 다시 한번 감사 드립니다. (2) 학습방법 - 코딩 아바타가 되어, 일시정지하고 코드를 아무생각 없이 따라치면서 학습 했습니다. - 알려주신 학습법 ( 추상화 -> 구체화 ) 부분을 적용해 지식을 습득 및 체화 하겠습니다. 유튜브 커뮤니티에 인프런 해당 강의가 출시 되었음을 공지해 주셨으면 좋을 것 같습니다. [ 해당 강의가 심사 중에 있다는 소식만 있어서 혹시 몰라 전달 드립니다. ] 감사합니다.
- 도도(코딩루팡)
  Giảng viên
  안녕하세요. ㅎㅎㅎ 구독자셨군요.! 항상 부족한 유튭채널에 구독해주셔서 감사드리옵니다. 강의 출시 소식 전달이 좀 늦었네요 ㅠㅠ, 부족할 수 있는 강의 수강신청해주셔서 정말 감사드려요. HanLee님 기억하고 있다가 강의 뿐 아니라 진로, 취업 등 질문주시면 더 정성스럽게 답변드리도록 하겠습니다. ~ 👍
권빵
Đánh giá 2
∙
Đánh giá trung bình 5.0
5
31% đã tham gia
next로 서버까지 다뤄보고 싶었는데, 마침 감사합니다.!! 👩🏿‍🦰
- 도도(코딩루팡)
  Giảng viên
  리뷰 감사합니다.!
코드DOS
Đánh giá 4
∙
Đánh giá trung bình 5.0
5
31% đã tham gia
supabase를 배워보고 싶었는데 좋네요. 아주 좋은 기반이 될 수 있는 강의 같아요. 이를 바탕으로 열심히 프로젝트 만들어볼께요.! next + supa 풀스택 파워풀 합니다.
- 도도(코딩루팡)
  Giảng viên
  화이팅 입니다.! 슈파베이스 정말 빠르게 프로젝트 만드는데 최고인것 같아요
노용석
Đánh giá 4
∙
Đánh giá trung bình 4.8
5
31% đã tham gia

1.165.874 ₫

Khóa học khác của dodocoding

Hãy khám phá các khóa học khác của giảng viên!

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

도도(코딩루팡)

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

Beginner

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

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

도도(코딩루팡)

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

도도(코딩루팡)

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

Basic

Next.js, React, TailwindCSS

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

도도(코딩루팡)

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

도도(코딩루팡)

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

Beginner

nextjs, ChatGPT, React

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

도도(코딩루팡)

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

도도(코딩루팡)

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

Basic

React, ChatGPT, JavaScript

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

도도(코딩루팡)

Khóa học tương tự

Khám phá các khóa học khác trong cùng lĩnh vực!

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

John Ahn

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

Basic

클론코딩, Node.js, React

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

John Ahn

풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)

정재남

React 기반의 간단한 SNS 서비스를 만들면서 REST API 및 GraphQL을 연습합니다. 프론트엔드 개발을 위한 백엔드 환경을 쉽고 간단하게 만드는 방법을 소개합니다.

Basic

REST API, GraphQL, React

풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)

정재남

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

도도(코딩루팡)

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

Basic

Next.js, React, TailwindCSS

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

도도(코딩루팡)

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

닭강정

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

Intermediate

React, Node.js, MongoDB

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

닭강정

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

Michael Kwon

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

Basic

Svelte, sveltekit, supabase

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

Michael Kwon

3시간 만에 끝내는 Cursor 완벽 가이드

토이크레인

Agent Mode, MCP, PRD 작성, Custom Chat Mode까지! 새로워진 Cursor의 기능들을 알아보세요

Basic

Next.js, React, cursor

3시간 만에 끝내는 Cursor 완벽 가이드

토이크레인

개발자들 사이에서 통하는 바이브코딩 – 실무형 (Cursor AI, Figma)

코드캠프

10분만에 바이브코딩으로 만들 수 있는 단순한 서비스는 이제 버리세요! '진짜' 실무적용 바이브코딩을 배울 수 있습니다. 기획과 디자인대로 실서비스 수준의 고도화된 서비스를 커서AI NCOP로 만들어보시죠. No Code, Only Prompt

Intermediate

React, Next.js, cursor

개발자들 사이에서 통하는 바이브코딩 – 실무형 (Cursor AI, Figma)

코드캠프

손에 익는 Next.js - 마이그레이션하기

하조은

React에서 Next.js 14로 마이그레이션하며 React와 Next.js의 차이점을 익혀봅니다. Next.js을 보다 깊게 이해하실 수 있어요!

Basic

Next.js, React, vitejs

손에 익는 Next.js - 마이그레이션하기

하조은

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

도도(코딩루팡)

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

Beginner

nextjs, ChatGPT, React

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

도도(코딩루팡)

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

더코딩클럽

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

Basic

HTML/CSS, JavaScript, 클론코딩

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

더코딩클럽

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

Wintho

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

Basic

React Native, React, ES6

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

Wintho

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

어쩔코딩

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

Beginner

TypeScript, JavaScript, ES6

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

어쩔코딩

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

같이코딩

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

Beginner

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

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

같이코딩

제로베이스부터 배우는 웹개발의 개념과 바이브 코딩

신제용

빠른 실행과 검증의 시대, 바이브 코딩으로 누구보다 빠르게 실행하세요! 광고, 결제 등 수익화까지 빼놓지 않고 내 손으로 이루어 보세요.

Beginner

React, 웹앱, Next.js

제로베이스부터 배우는 웹개발의 개념과 바이브 코딩

신제용

비전공자도 가능한 초간단 단톡방 만들기 (바이브코딩, Cursor AI)

체험코딩

이 강의를 모두 들으시고, 응용하면 여러분만의 사이트, 앱을 만들 수 있어요. 이 강의는 Cursor AI 를 이용하여, 우리 가족만을 위한 단톡방을 Web사이트로 만들면서, 코딩의 흐름을 자연스럽게 익혀보는 바이브코딩 입문 강의입니다. App 개발자 계정이나 맥북 없이, 윈도우 환경만으로도 개발을 몰라도 누구나 쉽게 따라 할 수 있고, 실제 웹사이트로 배포하는 법도 배웁니다.

Beginner

Firebase, Next.js, vercel

비전공자도 가능한 초간단 단톡방 만들기 (바이브코딩, Cursor AI)

체험코딩

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

ludgi

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

Intermediate

Next.js, React, GraphQL

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

ludgi

React Native with Expo: 제로초에게 제대로 배우기

제로초(조현영)

웹 개발자가(특히 React 개발자라면) 정말 손쉽게 앱을 출시할 수 있는 시대가 되었습니다. Expo와 함께라면 더더욱 빠르게 Android와 iOS 앱 모두를 출시할 수 있습니다. Expo를 통해 빠르게 앱까지 출시할 수 있는 개발자가 되어봅시다.

Basic

React, React Native, 하이브리드 앱

React Native with Expo: 제로초에게 제대로 배우기

제로초(조현영)

[자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)

닭강정

React, Electron, Zustand를 활용해 타이머 앱을 직접 제작하고 크로스 플랫폼(윈도우, 맥 OS, 리눅스)으로 배포까지 하는 실전 강의입니다. 익숙한 React 웹 개발을 시작으로, Zustand를 통한 전역 상태 관리와 최종 GUI 배포까지, 데스크톱 앱 개발의 전체 흐름을 배우실 수 있습니다!

Basic

React, Electron, GUI

[자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)

닭강정

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

영코디 킴쌤

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

Beginner

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

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

영코디 킴쌤

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

권태뽕

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

Basic

클론코딩, Flutter, Firebase

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

권태뽕

Bắt đầu Supabase, Next full-stack (kết hợp 슈파베이스 OAuth, nextjs 14)

Đánh giá từ những học viên đầu tiên

Dịch cái này sang tiếng Việt

Tại sao bạn nên chọn Supabase thay vì Firebase ! 😮 🌲

Các tính năng của khóa học này

Tôi giới thiệu điều này cho những người này

Sau giờ học

Tìm hiểu về những điều này.

Những điều cần lưu ý trước khi tham gia lớp học

Môi trường thực hành

Tài liệu học tập

Kiến thức và ghi chú của người chơi

Khuyến nghị cho
những người này

Xin chào
Đây là

Chương trình giảng dạy

Đánh giá

Khóa học khác của dodocoding

Khóa học tương tự

Bắt đầu Supabase, Next full-stack (kết hợp 슈파베이스 OAuth, nextjs 14)

Đánh giá từ những học viên đầu tiên

Dịch cái này sang tiếng Việt

Tại sao bạn nên chọn Supabase thay vì Firebase ! 😮 🌲

Các tính năng của khóa học này

Tôi giới thiệu điều này cho những người này

Sau giờ học

Tìm hiểu về những điều này.

Những điều cần lưu ý trước khi tham gia lớp học

Môi trường thực hành

Tài liệu học tập

Kiến thức và ghi chú của người chơi

Khuyến nghị cho những người này

Xin chàoĐây là .css-1q3zd4q{text-decoration-line:underline;text-underline-position:under;text-underline-offset:1px;}

Chương trình giảng dạy

Đánh giá

Khóa học khác của dodocoding

Khóa học tương tự

Khuyến nghị cho
những người này

Xin chào
Đây là