[풀스택 입문] Firebase보다 10배 좋은 Supabase

풀스택 개발에 날개를 달아줄 Supabase! 3가지의 클론 프로젝트를 통해 Next.js 14와 Supabase로 실무 수준의 풀스택 개발을 하는 법을 속성으로 배우게 됩니다.

1년간 300여명의 개발자를 배출한 ‘진짜’ 부트캠프의 고농축 커리큘럼 입니다. 이 강의 하나로 여러분은 현업 주니어 개발자 수준까지 성장 가능하며, 프론트엔드 기술스택의 활용 능력과 지식을 얻게 될거에요. 누구나 사회적, 경제적, 교육적 배경에 상관없이 커리어를 쌓을 수 있도록, [인프런X코드캠프]가 준비했습니다 :)

이제는 실전에 도전할 차례입니다 🔥 React.js + TypeScript + Supabase로 실무급 SNS를 함께 개발해보며 인증&인가, 무한스크롤, 이미지 업로드, 좋아요, 무한 중첩 댓글, 다크모드 등의 기능을 만들어 봅니다. 이 과정에서 Zustand와 Tanstack Query를 이용한 서버 및 전역 상태 관리 기법도 살펴볼 예정입니다.

실제 외주 시장에서 반복적으로 등장하는 병원·성형외과 홈페이지 제작 프로젝트를 기준으로, 단순 예제가 아닌 수주 가능한 실무형 웹사이트와 관리자 시스템을 직접 구축해보는 강의입니다. (2026-10 나라장터 투찰 맛보기 추가) 이 강의는 단순히 홈페이지를 만드는 데서 끝나지 않습니다. AI 코딩 도구와 Next.js를 활용해 병원 홈페이지 목업 프로젝트를 완성하고, 이를 실제 외주 플랫폼에서 포트폴리오로 활용해 프로젝트를 고르고, 제안하고, 비딩하고, 견적서를 작성하는 과정까지 함께 다룹니다. Next.js 기반으로 다음 내용을 구현합니다. - 병원·성형외과 홈페이지 제작 - 메인 페이지와 서비스 상세 페이지 구축 - 관리자 CMS 구축 - 블로그 콘텐츠 관리 - 상담 문의 시스템 - 첨부파일 업로드 및 문의 답변 구조 - 로그인 및 권한 처리 - 관리자 페이지와 RBAC 구조 - 다국어 처리 - SEO 최적화 - sitemap, RSS, OG 이미지, favicon 구성 - GA4 & GTM 설정 - 배포, 도메인 및 서브도메인 연동 - 유지보수 가능한 프로젝트 구조 또한 단순 개발만 설명하지 않습니다. - 병원 외주 시장은 어떻게 돌아가는지 - 어떤 병원 홈페이지 프로젝트를 골라야 하는지 - 고객은 실제로 무엇을 중요하게 생각하는지 - 왜 병원 홈페이지는 계속 리뉴얼되는지 - 목업 프로젝트는 어떻게 만들어야 수주에 도움이 되는지 - 외주 플랫폼에서 어떻게 지원하고 비딩해야 하는지 - 견적서는 어떤 기준으로 작성해야 하는지 - 포트폴리오는 어떻게 등록하고 보여줘야 하는지 - 외주 진행 중 어떤 문제가 자주 발생하는지 - 유지보수와 추가 개발은 어떻게 설계해야 하는지 같은 현실적인 실무 경험도 함께 공유합니다. 이 강의의 목표는 단순 CRUD 예제를 완성하는 것이 아닙니다. 실제로 외주 제안에 사용할 수 있는 병원 홈페이지 포트폴리오를 만들고, 고객에게 납득 가능한 구조와 견적을 제시하며, 납품과 유지보수까지 고려한 실무형 프로젝트 전체 흐름을 경험하는 것입니다. AI 코딩을 활용해 개발 속도를 높이면서도, 결과물의 품질과 외주 수주 가능성을 함께 끌어올리고 싶은 분들을 위한 실전형 풀코스 강의입니다.

「Next.js 마스터 클래스: Part 3 - 실전 아키텍처 완성」는 로컬에서만 동작하는 튜토리얼 수준을 넘어, 대규모 트래픽을 견디는 '진짜 상용 서비스(Production)' 아키텍처 설계 지침서입니다. TanStack Query와 Zustand를 결합한 무결점 상태 동기화부터, Turbopack 기반의 100KB 미만 번들 최적화 및 고급 SEO 주입, 그리고 프록시(Proxy)와 JWT 세션을 활용한 철통같은 풀스택 보안망 구축까지 현업의 핵심 기술을 모두 다룹니다. 지긋지긋한 Hydration 에러와 CORS 장벽을 스스로 허물고, 단순한 코더를 넘어 프론트엔드 시스템 전체를 지배하는 '시니어 아키텍트'로 도약하고 싶은 분들께 이 강의를 강력히 추천합니다.

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

실시간 AI 에이전트, 회의 내용 요약, 그리고 통화 후 기능이 있는 AI 기반의 화상 회의 애플리케이션을 만들어요.

Next.js 15의 App Router는 서버와 클라이언트의 경계를 완벽히 제어하여 고성능 웹 서비스를 구축하는 강력한 아키텍처입니다. 본 강의는 서버 컴포넌트(RSC)의 동작 원리부터 3대 캐싱 전략(Static, Dynamic, ISR)까지 이어지는 복잡한 렌더링 메커니즘을 12개의 실무 미션을 통해 명확히 연결해 드립니다. 이를 통해 파일 시스템 라우팅과 중첩 레이아웃을 비즈니스 요구사항에 맞게 설계하는 능력을 갖추고, 원리 모를 코드를 복사하던 '바이브 코딩'의 불안함에서 완전히 벗어날 수 있습니다. 결과적으로 여러분은 AI가 생성한 코드의 맹점을 단번에 간파하고 최적의 구조를 주도적으로 지시하는 Next.js 아키텍트로 거듭나게 될 것입니다.

AI는 이제 선택이 아닌 생존의 문제입니다. 3일 걸리던 개발을 30분으로 단축하고, 반복 업무는 AI에게 맡기고 당신은 더 중요한 문제 해결에 집중하세요. 이론이 아닌 실무에서 바로 써먹는 AI 네이티브 개발법으로, 회사에서 "AI 잘하는 개발자"로 인정받는 확실한 방법을 알려드립니다.

💸 진짜 결제가 발생하는 수익형 웹서비스 AI 에이전트 강의! ❗ 포폴용 웹사이트는 그만 만들고 '재고 무한, 원가 0원'의 <AI 해설형 상품 쇼핑몰>을 구축합니다! 🤖 사람 개발팀과 일하듯 AI 개발 팀원들과 '서비스 명세서' 기초부터 탄탄하게 구축해 봅니다!

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

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

클로드 코드를 기초부터 프로처럼 다룹니다. 핵심 기능(CLAUDE.md · 서브에이전트 · MCP · Hooks 등)을 익혀 실제 서비스를 개발하고 배포까지 진행하며, 비전공자를 위한 기초 부록과 고급 활용 강의로 마무리합니다.

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

★PYTHON★ Fast API를 활용한 Server 개발 기초 강의입니다. Fast API, SQLAlchemy, Pydantic, Starlette 등 여러 Package를 활용해 쉽고, 빠르고, 간편하게 Server 개발하는 방법을 배워가세요! PostgreSQL과의 연동은 물론 DB Backup파일도 준비되어 있으니 걱정마세요! Dash와 Plotly를 활용한 UI Design "기초"를 알려드리고 강의에 사용된 Source Code도 제공해드립니다 :)

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

기초부터 차근차근 실력을 탄탄히 다져 가며 Node.js 실력을 완성하는 올인원 강의 👍

웹 개발을 활용해서 Android와 IOS에 서비스 가능한 모바일앱 개발을 할 수 있도록 도와주는 강의입니다.

이 강의는 AI 시대에 개발 생산성을 극대화하는 방법을 배우고 싶은 분들을 위한 실전 중심 강의입니다. 단순히 AI를 사용하는 방법을 넘어서, 실제 개발 환경에서 Claude Code를 어떻게 활용해야 하는지, 그리고 어떻게 하면 “제대로 된 결과”를 만들 수 있는지에 집중합니다. 많은 개발자들이 AI를 사용하면서도 ❌ 결과가 일관되지 않거나 ❌ 코드 품질이 떨어지거나 ❌ 프로젝트가 점점 복잡해지는 문제를 겪고 있습니다. 이 강의에서는 이러한 문제를 해결하기 위해 ✔ 스펙 기반 워크플로우 ✔ 구조화된 명령어 시스템 ✔ 서브에이전트 및 자동화 전략 을 통해 AI를 도구가 아닌 ‘개발 파트너’로 활용하는 방법을 알려드립니다. 또한 Firebase, Figma, GitHub, Vercel과 같은 실제 서비스와 연동하여 처음부터 끝까지 하나의 애플리케이션을 완성하고 배포하는 경험을 제공합니다.

[Tailwind CSS 실전 포트폴리오 퍼블리싱]은 Tailwind CSS를 활용해 26가지 이상의 다양한 실전 예제 제작하는 과정입니다. 실전 예제를 빠르게 다양하게 제작하면 그 속에서 필수적인 이론을 설명합니다. 해당 강의는 개발자와 퍼블리셔가 만드는 Tailwind CSS 스타일링을 중심으로 제작되었습니다.