Next.js X Supabase X Cursor AI로 가장 빠르게 시작하는 웹 앱 개발 with 노마드 준

총 2과목

Next.js X Supabase X Cursor AI로 가장 빠르게 시작하는 웹 앱 개발 with 노마드 준정가 430,000원
[템플릿 제공권] 노마드 준과 함께하는 Next.js 14 + Supabase 풀스택 웹앱 개발_템플릿정가 99,000원

실무에서 가장 활용도 높은 코드 모음zip과 강의를 패키지로 저렴한 가격에 만나세요!

가격529,000원

할인 판매가62% 할인197,000원

12개월 할부월 16,417원

바로 구매하기

수수수 수파노바처럼 등장한 수파베이스!

Supabase의 깃허브 스타 수 추이는 매우 가파르게 높아지고 있어요!

어떻게 써보지?! 하고 막막했다면?
뜨는 기술이라 제대로 써보고 싶었다면!

이번 기회에 Supabase와 꿀조합 스택들(Next.js, Vercel 등)로
만드는 실전 프로젝트 강의로 단-숨에 익혀보세요!

안녕하세요!
어디서나 일할 자유,
디지털 노마드 이야기를 다루는 노마드 준입니다.

50개국+ 여행. 20개국 중장기 거주

현) 1인 개발자 스튜디오 운영

전) 삼성 연구소, 시리즈 A 프로젝트 경험

“노트북 하나만 들고, 내가 좋아하는 개발을 하면서
자유롭게 여행 다니며 살 순 없을까?"
개발자 시작할 때 꿈이 ‘디지털 노마드’ 였는데,
얼마 지나지 않아 그런 삶을 살게 되었습니다.
이 좋은 생활을 나만 누리는게 아니라, 더 많은 분들이 누리고
또 서로 외롭지 않게 끌어주었으면 좋겠다는 생각에
개발자 대상의 과외, 멘토링부터 스레드를 통해 진행한 무료 강의까지
다양한 방식으로 지식을 나누기 시작했어요!

Threads

Instagram

제가 개발을 잘하고 경력이 긴 것 아니냐구요?
절대 아닙니다.

저는 개발 경력 3년차부터 외주 개발을 시작했습니다.
그리고 무엇보다 제가 개발을 잘 하게 된 배경은 바로 “외주” 입니다.
회사에서는 정해진 구조와 패턴의 기능만 개발하고 유지보수하는 반면,
외주는 언어가 바뀌기도 하고 새로운 요구사항이 추가되기도 하죠!
그럴때마다 저는 AI의 도움을 받아 빠르게 새로운 개발 지식을 학습하고
또 이를 실전 개발에 적용시켰습니다. 특히 초보 개발자 분들께는
저의 학습 방식이 빠른 성장에 도움이 되실 것이라 확신해요 :)

디지털 노마드로 생존하기 위한 핵심은
“빠르고 효율적인 개발” 입니다.

제가 8년간 다양한 프로젝트와 클라이언트와 작업하면서 체득한 다양한 지식과 노하우
그리고 손수 제작한 템플릿까지 아낌없이 퍼드리겠습니다.

강사님 포트폴리오

프리랜서로서 다양한 클라이언트, 대기업과 협력한
강사님의 포트폴리오를 확인해보세요.

포트폴리오 자세히보기

많은 분들의 관심을 받은 오프라인 강의 !

노마드 준이 각잡고 만든 실전 Next.js x Supabase 강의
드디어 패스트캠퍼스에서 공개합니다!

수업목표
학습기술
프로젝트
학습방식
템플릿
커리큘럼

수업 목표

국내외 클라이언트에게 환영받는 최신 개발 스택으로
백엔드 + 프론트 + 모바일 까지 한 큐에 가능한 풀스택 웹앱을 마스터 할 거예요!

Next.js 14 + Supabase 조합으로 서버 없이 풀스택 개발

∙ 클라이언트를 국내에서만 구할게 아니라면 무작정 Java/Spring 만 하지 마세요!
∙ 어딜가도 먹히는 해외 풀스택 트렌드와 Next.js + Supabase의 매력을 알려드릴게요.
∙ 생산성과 유지보수가 중요한 프리 개발자의 엄선 7가지 기술도 함께 사용해보아요!

4가지 프로젝트로 익히는 실전 웹앱 개발

∙ 클론 프로젝트 NO! 뻔한 기능만 만들면 살아남을만큼의 실력을 쌓을수 없어요!
∙ 디지털노마드로 살아남기 위한 필수기능부터 서브기능까지 A-Z 개발해봅시다.
∙ 자주 써먹을 “TO DO + 콘텐츠 판매 웹앱 & 관리자 페이지 + 땅콩 마켓” 만들거예요.

실전 개발에서 AI 활용 노하우 전수

∙ 인강 들으며 독학할 때는 10분 강의 따라가는데도 1시간, 이러다 금방 지쳐 개발 포기?
∙ 2024년에 개발을 하는 우리, 이제 AI 를 안 쓰면 뒤쳐진다는 사실 잊지마세요!
∙ 실무 개발에서 다양한 AI (Cursor AI 등)를 적극적으로 사용하는 방법을 알려드려요.

SupaNextTemplate으로 코드 재사용과 개발 속도 Up

∙ 매번 개발할 때마다 UI / 레이아웃 따로 잡고, 새로운 코드 쓰느라 시간 허비하지 마세요!
∙ 백엔드, 프론트엔드, 레이아웃을 잡는 전체 코드를 재사용하고 개발 속도를 높여보아요!
∙ 빠른 웹앱 개발을 위한 보일러 플레이트 코드 모음집 [SupaNextTemplate]을 드려요.

학습 기술

이 강의는 혼자서 빠르게 고퀄리티 프로젝트를 완성하기 위한
Next.js + Supabase 를 메인으로 활용하며 진행됩니다.

좋은 아키텍처 설계를 위해선, 설계의 근본적인 이유를 이해하는 것이 중요합니다.
박상권님의 풍부한 경험과 체계적인 로드맵을 통해 그 이유를 제대로 학습할 수 있습니다.

Card Example

왜 Next.js 14인가요?

답변 자세히 보기

서버 사이드 렌더링으로 사이트 속도 향상과 SEO 최적화, 정적 사이트 생성, 이미지 최적화, 코드 관리, DX 등 React의 장점에서 한단계 더 진화한 버전이라 사용합니다.

왜 Supabase인가요?

답변 자세히 보기

Next.js 15는 최신 기능과 개선된 성능을 제공하며, MSA에 대한 접근성을 더욱 강화합니다. 프로젝트의 개발 속도와 확장성을 높이기 위해 필수적으로 도입된 기술들에 대해 다룹니다.

프로젝트 기능 구현에 적용하며 한 번에 학습하는
Next.js 14, Supabase 핵심 기능 4가지!

Box Example

Next.js 14 핵심 기능

API Routes

프로젝트 구조 설계

라우팅 구현

App Router

페이지 간 이동

Server Actions

서버 비동기 작업

SEO 최적화

최적화

Box Example

Supabase 핵심 기능

Realtime

실시간 채팅

실시간 업데이트

Storage

사진 업로드 관리

카카오 간편로그인

DB

DB 테이블 생성

RLS 설정

VIEW 생성

CRUD 조작

RLS 설정

이메일 회원가입

카카오 간편로그인

강사의 한 마디
Next.js와 Supabase의 조합은 현재 해외에서 가장 인기있는 기술 스택 중 하나입니다. 생산성이 매우 높으며 둘째로 개발자 경험이 매우 좋기 때문인데요. Supabase는 Firebase보다 UI가 간편하고, Next.js에는 API route라는 서버 사이드를 구현하는 기술이 내장되어있기 때문에 API route 안에서 Supabase를 연동하면 구조적으로나 보안적으로 매우 안전하게 사용이 가능하며 코드 관리, 재사용 등의 효율적인 개발이 가능합니다. 그리고 React를 모르는데 Next.js부터 배워도 될까 걱정하시는 분들이 계실 겁니다. 정확히는 React 개념이 필요하긴 하지만 useState와 useEffect 정도만 알아도 되는 수준이며, 해당 부분은 실습을 진행할 때 넣을 부분이기 때문에 직접 실행해보면 빠르게 이해할 수 있는 부분입니다. 제가 먼저 만나본 비전공자분들도 금방 이해하시더라고요!

여기서 끝나면 아쉬우니까!

완성도 높은 프로젝트 결과물을 위해
실전에서 노마드 준님이 사용하는 스택 조합도 함께 사용됩니다.

Vercel : Next.js의 공식 배포 플랫폼으로
배포와 관리에 찰떡 궁합

완성한 프로젝트를 배포하여
상용에서 쓸 수 있어요

Tanstack-Query v5 : 비동기 데이터 관리를 효율적으로 처리해 서버 상태 로직 간소화

땅콩마켓 백엔드에서 데이터를 불러와
프론트에서 상품 리스트를 보여줄 수 있어요

Shadcn : 미리 구성된 UI 컴포넌트를 제공하여 빠른 UI 개발 가능

각종 컴포넌트를 쏙쏙 불러와서 프로젝트의
모양을 잡아가요

Github : 효율적으로 코드 변경 사항을
관리할 수 있게 기록

배포할 때 프로젝트를 유지보수
하기 쉽게 관리해요

V0 : 여러 디자인 요청을 하면,
V0가 리액트 컴포넌트를 생성

프로젝트의 레이아웃 초안을 잡을 때 수월해요

프로젝트

Next.js와 Supabase 실력을 단숨에 쌓기 위해
단계별 난이도의 4가지 프로젝트를 완성해봅시다!

실제 빠르게 개발한대도 완성도 있게 개발하는 게 중요하죠!
익숙한 앱을 주제로 복잡한 기능을 추가해가며 개발하는 3단계 학습으로
개발에도 익숙해지고, 기술 난이도를 고난도로 사용하게 됩니다.

PROJECT 01 TO-DO 앱 가장 기초적인 UI구성과 CRUD를 담았습니다.

학습 포인트

∙ 익숙하고 단순한 UI의 프로젝트로 실습하여 개발 과정 익히기
∙ Next.js를 빠르게 학습하며 Supabase 기본 사용법 학습을 위해 간단한 CRUD 기능 구현하기

주요 구현 기능

∙ Next.js 기본기 학습
∙ Tailwindcss 를 활용한 CSS 스타일링
∙ Supabase 활용 CRUD 구현

PROJECT 02 & 03 콘텐츠 판매 웹앱 & 관리자 페이지 프론트 페이지 + 백엔드 페이지 연동

학습 포인트

∙ 실제 외주 개발에서도 사용되는 판매 웹사이트 구현하며 비즈니스 로직 구현
∙ 프론트엔드와 백엔드 기술을 통합하여 개발하는 방식 집중 학습
∙ Shadcn을 사용하여 UI를 만들고 Supabase로 관리자 페이지를 구현.

주요 구현 기능

∙ Shadcn/UI 를 활용하여 반응형 레이아웃 개발
∙ 컴포넌트 추가
∙ 결제 시스템으로 실결제 구현
∙ Supabase로 유저 데이터 관리

PROJECT 04 땅콩마켓 실제 서비스 가능한 수준의 복잡한 데이터 구조까지 관리

학습 포인트

∙ Supabase의 Storage,복잡한 데이터 구조 관리를 익힙니다.
∙ Supabase Realtime을 사용하여 실시간 구성 과정을 익힙니다.
∙ Tanstack Query를 활용해 비동기 데이터를 관리하며 복잡한 기능을 구현합니다.

주요 구현 기능

∙ Tanstack Query로 비동기 데이터 관리
∙ Supabase Storage 이미지 업로드 및 Reatime 실시간 업데이트 및 채팅 기능
∙ 유저 프로필로 개인화된 정보 제공 기능
∙ 테마 설정 기능으로 사용자 개인화된 경험 제공

강사의 한 마디
위 세 가지 프로젝트는 제가 실제로 실무에 사용하는 컴포넌트나 비즈니스 로직에 기반하여 개발 난이도별로 학습할 수 있도록 분류한 것입니다. 특히 1인 개발에 특화된 풀스택 개발과 실무를 위해 필요한 다양한 팁들을 얻어가실 수 있도록 구성해 여러분들의 빠른 성장에 큰 도움이 될 것입니다! 본 과정이 끝나시면 혼자서 사이드나 외주로 프로젝트를 받는 분들도 나오실거라 생각합니다 :)

상세 커리큘럼 확인하기

학습방식

AI 시대의 New Generation을 위한 개발 방법!

핫한 Cursor AI를 활용해 프로젝트를 개발 - 완성 - 유지보수하며
개발 과정을 익히고, 만들어 본 적 없는 기능도 빠르고 쉽게 개발해봅니다.

과거의 AI 활용 방법

최신 AI 활용 방법

강사의 한 마디
앞으로는 단순히 코드를 잘 짜는게 아니라 AI 어시스턴트를 얼마나 잘 활용하냐에 따라 생산성이 달라질 것이기에 AI를 활용하는 것은 중요합니다. 그래서 이 강의는 AI를 직접 활용하는 방식으로 진행됩니다. AI가 기존 코드를 참조해서 짜주기 때문에 훨씬 코드 질도 보장됩니다. 단순히 Chat-GPT가 처음 나왔을 때는 50%(1.5배)정도의 향상이 있었다면 , Claude 3.5는 약 100%(2배), Cursor와 함께 조합해서 사용하면 200%(3배)의 능률 향상이 있었습니다! 제가 경험한 능률 상승을 여러분도 경험하실 수 있게 해드리고 싶습니다.

PREVIEW

강사님의 학습방식을 먼저 만난 수강생이 만든
프로젝트 퀄리티를 확인하세요!

강사의 한 마디
실제 오프라인 강의에서 제가 예상한 것보다 훨씬 많은 기능들을 개발에 익숙하지 않은 분들이 만들어 내셨습니다. 가능했던 이유는 AI(주로 클로드와 CursorAI)를 활용해서라고들 말씀해주시더라구요. 여러분도 개발 중 익숙하지 않은 새로운 길을 갈 때 AI를 활용해 더 많은 기능을 구현해 보시길 바랍니다.

노하우 가득 드려요

노마드 준 강사님이 직접 제작하고 사용하는
코드 Zip [ SupaNext 템플릿 ] 까지 담았습니다!

핫한 실무에서 가장 활용도 높은 필수 기능을 포함해
판매용으로 제작한 보일러플레이트 코드 모음집까지 아낌없이 담았습니다.

Supabase, Next.js 14, Next.js, 노마드 준, 수파베이스, 넥스트js, 풀스택, 풀스택개발, 웹앱개발, 웹앱

* 노마드 준의 노하우가 녹아있는, 실제 판매용으로 제작된 코드 템플릿입니다.
패스트캠퍼스에서만 판매중인 해당 템플릿은 구매후 github을 통해 제공되며 다운로드 후 환불이 불가합니다.

강사의 한 마디
단순한 UI 키트가 아닙니다.
프론트 + 백엔드 비즈니스 로직까지 포함하여 바로 실무에 적용 가능한 템플릿입니다.
바로 쓰는 보일러 플레이트 코드를 모아두었기 때문에 ‘도장 찍듯이’ 빠르게 개발할 수있도록 여러분께 힘이 될 것입니다.

노마드 준 강사님의 템플릿 이렇게 활용해보세요!

실용적이고 즉시 적용 가능한 코드베이스가 있으니까!
다양한 개발 환경에서 효율성을 높여보세요!

상황 1) 제한된 리소스로 빠르게 프로토타입을 개발해야 할 때
상황 2) 다양한 프로젝트에 적용할 수 있는 기본 템플릿으로,
작업 시간을 단축하고 싶을 때
상황 3) 빠르게 프로젝트를 시작할 수 있도록 돕는 자료로 활용하고 싶을 때

개별구매

개발 효율을 극대화 시켜줄
노마드 준의 [ SupaNextTemplate ]

*VOD 강의 + 템플릿 묶음 상품 구매 시 30% 할인 가격에 구매가 가능합니다!

노마드 준 강사님이 직접 부딪히며 익힌
디지털 노마드로 살아남는 외주 노하우도 전수해드려요.

꾸준하게 수익을 만들 수 있으려면 기본적으로
외주를 받아오고, 완성 후 프로젝트를 관리해주며 신뢰를 쌓는 게 필요하죠!
수년간 노마드 생활을 가능하게 한 외주 관리 노하우를 강의에서 알려드릴게요.

커뮤니티

수강생, 1인 개발자, 디지털 노마드들이 외롭지 않도록
바로 물어보고 서로 끌어주는 커뮤니티

핫한 강의 듣다가 에러가 나면? 실시간 커뮤니티에 질문해 빠른 해결!
트렌드와 커리어 고민을 함께 나누며 외주 기회와 노하우도 가득한 우리들만의 커뮤니티!

★★★

우리만의 커뮤니티!
이렇게 이용하면 활용도 200%

✓ 실습 중 에러가 나면? 서로 묻고 답하며 실시간 질의응답으로 빠른 해결
✓ 강의를 듣는 중 이해가 안가는 부분이 생기면 바로 질문
✓ 트렌드와 커리어 등 고민을 함께 나누는 커뮤니티
✓ 외주 노하우도 가득히!

* 본 커뮤니티는 디스코드를 통해 운영 되며 [ 2024. 11. 25 ~ 2026. 10. 20] 동안 운영됩니다.
* 강사님이 커뮤니티에 참여하시며, 현업 중 답변하시기에 답변까지 7일 내외 소요될 수 있습니다.

Fast Campus

Next.js X Supabase X Cursor AI로 가장 빠르게 시작하는 웹 앱 개발 with 노마드 준

강의 정보