강의

멘토링

커뮤니티

BEST
개발 · 프로그래밍

/

풀스택

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

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

(4.9) 수강평 28개

수강생 437명

실습 중심
포트폴리오
Next.jssupabaseReact클론코딩

먼저 경험한 수강생들의 후기

수강 후 이런걸 얻을 수 있어요

  • 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 이론

  • 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 를 사용합니다.

학습 자료

  • GitHub 및 챕터별 CheckPoint : Link

  • 필기 노트 및 워크북 제공 ! : Link

  • LiveDemo : Link

선수 지식 및 유의사항

  • 기본적인 HTML, CSS, React 지식

  • TailwindCSS로 스타일링 하고 있습니다. (+ 요약 강의가 있어요. 😀)

  • (*처음에 저는 TailwindCSS를 싫어했습니다. 하지만 처음에 러닝커브(1시간 정도) 개발 경험 향상 및 개발 속도가 압도적으로 빨라졌습니다.! 정말 후회 없으실 겁니다. )


이런 분들께
추천드려요

학습 대상은
누구일까요?

  • Next.js 로 프로젝트를 시작하시려는 분

  • Supabase를 도입하려는 FE 개발자 분

  • Next.js 로 서버 풀스택을 개발하려는 분

선수 지식,
필요할까요?

  • 기초수준의 HTML, CSS, React

안녕하세요
입니다.

3,993

수강생

167

수강평

94

답변

4.8

강의 평점

5

강의

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

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

  • 🚀 Naver Boostcamp BE 멘토 경험

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

커리큘럼

전체

68개 ∙ (7시간 12분)

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

수강평

전체

28개

4.9

28개의 수강평

  • flyordig9340님의 프로필 이미지
    flyordig9340

    수강평 4

    평균 평점 4.0

    5

    100% 수강 후 작성

    Thật khó để tìm một khóa học tiếng Hàn sử dụng supabase và nextjs cùng nhau, nhưng nhờ điều này, tôi rất vui khi có thể nhanh chóng tạo một ứng dụng web full-stack. Cảm ơn bạn vì bài giảng tuyệt vời!

    • dodocoding
      지식공유자

      Cảm ơn bạn rất nhiều vì đã tham gia lớp học! Sử dụng Next.js và Supabase cùng nhau chưa bao giờ dễ dàng hơn thế. Để sử dụng đúng cả hai điều này, bạn cần hiểu biết sâu sắc về kết xuất phía máy chủ và phát triển toàn bộ ngăn xếp. Tôi hy vọng bài giảng này sẽ giúp ích rất nhiều cho bạn trong việc phát triển dự án của mình. Nếu bạn sử dụng tốt sự kết hợp này, nó sẽ là nền tảng để tạo ra các ứng dụng web mạnh mẽ và hiệu quả. Chúng tôi hy vọng rằng đây sẽ là hướng dẫn tốt cho hành trình phát triển trong tương lai của bạn và chúng tôi hy vọng rằng bạn sẽ đạt được sự phát triển tốt hơn!

  • hanlee님의 프로필 이미지
    hanlee

    수강평 2

    평균 평점 5.0

    5

    46% 수강 후 작성

    Xin chào, Mã hóa Lupin, Tôi là người đăng ký YouTube :) Trước hết xin cảm ơn bạn đã đăng một bài giảng mà tôi thực sự cần. Đặc biệt, tôi xin bày tỏ lòng biết ơn sâu sắc nhất đối với hai phần sau đây. (1) Next.js + Supabase - Có rất nhiều khóa học Next.js trên Udemy, nhưng tôi không tìm thấy khóa học nào dạy về Supabase cùng với Next.js. - Không có bài giảng bằng tiếng Hàn nên xin cảm ơn lần nữa. (2) Phương pháp học tập - Tôi trở thành một avatar viết mã và học bằng cách tạm dừng và làm theo mã một cách vô tâm. - Tôi sẽ tiếp thu và thể hiện kiến ​​thức bằng cách áp dụng phương pháp học tập (trừu tượng -> cụ thể) mà bạn đã cung cấp. Sẽ là một ý kiến ​​hay nếu thông báo cho cộng đồng YouTube rằng bài giảng Infron đã được phát hành. [Tôi vừa nghe nói rằng bài giảng đang được xem xét, nên tôi sẽ chuyển nó đi để đề phòng. ] Cảm ơn

    • dodocoding
      지식공유자

      Xin chào. Hehehe, bạn là người đăng ký! Cảm ơn bạn đã đăng ký kênh YouTube luôn thiếu sót. Tôi hơi muộn khi thông báo tin tức về buổi ra mắt khóa học. Cảm ơn bạn rất nhiều vì đã đăng ký khóa học, điều này có thể còn thiếu sót. Nếu bạn nhớ đến HanLee và đặt câu hỏi không chỉ về bài giảng mà còn về vấn đề nghề nghiệp, việc làm, tôi sẽ trả lời kỹ hơn. ~ 👍

  • sh9508026566님의 프로필 이미지
    sh9508026566

    수강평 2

    평균 평점 5.0

    5

    31% 수강 후 작성

    Tôi muốn xử lý máy chủ tiếp theo, nhưng cảm ơn bạn rất nhiều!! 👩🏿‍🦰

    • dodocoding
      지식공유자

      Cảm ơn bạn đã xem xét!

  • dodoco님의 프로필 이미지
    dodoco

    수강평 4

    평균 평점 5.0

    5

    31% 수강 후 작성

    Tôi muốn học supabase, nó thật tuyệt. Tôi nghĩ đây là một khóa học có thể dùng làm nền tảng rất tốt. Dựa trên điều này, tôi sẽ làm việc chăm chỉ để tạo ra một dự án! next + supa full stack mạnh mẽ.

    • dodocoding
      지식공유자

      Chiến đấu! Tôi nghĩ Superbase là công cụ tốt nhất để thực hiện các dự án một cách nhanh chóng.

  • yongseoknoh0209님의 프로필 이미지
    yongseoknoh0209

    수강평 4

    평균 평점 4.8

    5

    31% 수강 후 작성

    월 ₩232,477

    5개월 할부 시

    ₩55,000

    도도(코딩루팡)님의 다른 강의

    지식공유자님의 다른 강의를 만나보세요!

    비슷한 강의

    같은 분야의 다른 강의를 만나보세요!