강의

멘토링

로드맵

BEST
개발 · 프로그래밍

/

풀스택

인프런 클론코딩 Part 1: Next.js와 NestJS로 시작하는 실전 프로젝트

🔥 강의 등록부터 영상 업로드까지, 지식공유자 기능을 그대로 구현해보는 실전 풀스택 강의입니다. Next.js 15와 NestJS를 활용해 강의 생성, 커리큘럼 구성, 썸네일 및 영상 업로드, 상세 소개 작성까지 실제 인프런 흐름을 따라 만들며, Prisma 모델링, JWT 인증, S3 + CloudFront 업로드, Swagger API 설계 등 실무에 가까운 경험을 쌓을 수 있습니다.

(4.8) 수강평 31개

수강생 284명

  • 로펀
실습 중심
인프런
AWSDockerNext.jsNestJSPrisma

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

이런 걸 배울 수 있어요

  • 최신 풀스택 개발 흐름 (Next.js 15, NestJS, Prisma)

  • 포트폴리오로 활용 가능한 ‘나만의 인프런’ 플랫폼 완성

  • 강의 등록, 수정, 영상 업로드, 커리큘럼 편집 등 실서비스 기능 전반 개발

  • Shadcn UI + TailwindCSS + Cursor AI로 실무 수준의 감각적인 UI 제작

  • Swagger + OpenAPI 기반 자동화된 백엔드 호출 구조 구성

  • Prisma로 데이터베이스 모델링하고 PostgreSQL 기반 구조 설계하기

  • S3 + CloudFront 기반 스트리밍 업로드 시스템 구축

🚀

국내 최초!

Next.js 15 + NestJS 풀스택 클론 코딩 강좌

혹시 학교에 재학중인 학생이신가요?

🔗학생할인(-40%) 구글폼 링크 🔗

🔥 Part 2 출시 기념 얼리버드 할인중 🔥

👉Part 2 바로가기👈


이 강의를 통해 여러분은



강력한 풀스택 조합인 NextJS, NestJS

핫한 ORM인 Prisma를 통해



나만의 인프런을 만들어보면서

탄탄한 기본기를 지닌 풀스택 개발자로 성장합니다!


찍먹은 이제 그만! 진짜 풀스택을 경험하세요.”

단 하나의 강의기획, 개발, 배포까지 완성하는 풀스택 여정을 시작하세요.

"Next.js + NestJS 조합으로 실무에 가까운 인프런 플랫폼을 처음부터 직접 만들어봅니다."

🧩  Next.js + NestJS  = 단일 언어 풀스택 최적의 조합

Next.js 15는 React 기반 프로젝트에 서버 컴포넌트 · App Router · Server Actions를 더해, 화면 렌더링부터 간단한 API까지 한 코드베이스에서 처리할 수 있게 해 줍니다.

NestJS는 같은 TypeScript로 작성되며, 의존성 주입과 모듈식 구조 덕분에 팀 규모가 커져도 유지보수가 수월한 백엔드를 구축할 수 있습니다.

두 프레임워크를 함께 쓰면 UI와 서버가 하나의 타입 정의를 공유해 데이터 불일치를 줄이고, 개발자는 언어·툴셋 전환 없이 프런트와 백엔드를 오갈 수 있습니다.

🔥Next.js v15 🔥

🔥Nest.js v10 🔥

🤔 왜 "인프런 클론 프로젝트" 인가?

작은 예제 앱으로는 풀스택 한 사이클을 제대로 맛보기 어렵습니다. 로그인만 되는 블로그나 투두 리스트로는 “실제 서비스가 어떻게 움직이는지” 피부로 느낄 수 없기 때문이죠.

그래서 저는 인프런의 핵심 흐름을 그대로 옮겨 온 미니 인프런을 만들기로 했습니다.
회원 관리부터 강의를 등록하고, 커리큘럼을 편집하고, 영상을 S3에 올린 뒤 CloudFront로 스트리밍하는 과정을 직접 구현하면서 설계 → 인증 → 미디어 처리 → 권한 관리를 한 번에 경험하게 됩니다.

💡 Part 1 소개

이번 Part 1 강좌에서는

  • 프론트와 백엔드 프로젝트 세팅을 진행하고 (Next.js 15 · NestJS · Prisma · Docker)

  • Auth.js 를 활용해서 JWT 인증을 구현한 뒤

  • 지식공유자 기능 (강의 관리, 커리큘럼 관리, 상세 페이지 작성, 동영상·썸네일 업로드)을 완성합니다.

  • TailwindCSS · ShadcnUI, Cursor AI를 활용해 빠르게 스타일링을 진행하고 실제 로직과 풀스택 경험에 집중하도록 설계했습니다.

  • 강의를 마치면 “강의를 올리고 스트리밍까지 가능한 플랫폼”이 손에 들어오며, 데이터 모델링부터 클라우드 스트리밍까지 이어지는 풀스택 역량을 자연스럽게 획득하게 됩니다.

Part 2에서는 이 토대 위에 강의 탐색·수강·수강평·Q&A 기능을 얹고, 최종적으로 AWS 배포까지 마무리해 “누구나 접속해 볼 수 있는 진짜 서비스”로 완성할 예정입니다.

Part 1에서 다진 기초가 Part 2로 자연스럽게 연결되도록 커리큘럼을 설계했으니, 두 파트를 연속해 수강하면 설계부터 운영까지 풀스택 전 과정을 온전히 체험할 수 있습니다.

🚀

이 강의를 수강하시는 모든 분들은

이런 결과물을 실제로 완성하게 됩니다


🥇국내 최초! Next.js 15 × NestJS 실전 풀스택 완성

  • App Router, Server Action
    최신 Next 기능 실습

  • NestJS 모듈 아키텍처 & REST API 설계

  • Prisma + PostgreSQL + Swagger로 실무 백엔드 구현


🧑🏻‍💻 내가 만드는 나만의 "미니 인프런"

  • 강의 등록/수정, 상세 소개 작성, 썸네일 업로드

  • 섹션/강의 추가 및 커리큘럼 구성 기능

  • 지식공유자 전용 관리자 기능 직접 개발


🎥 영상 업로드부터 스트리밍까지

  • S3 + CloudFront로 보안 처리된 영상 업로드

  • Multer를 활용한 영상 업로드 + 미리보기 구현

  • 실시간 업로드 결과 표시까지 완성


🎨 UI는 예쁘게, 개발은 빠르게

  • TailwindCSS + ShadcnUI로 감각적 UI 구성

  • Cursor AI로 스타일 자동화 및 빠른 개발

  • 반응형 레이아웃, 공통 컴포넌트 직접 설계


🏠

이 모든걸 실무 수준의 기술스택으로

탄탄하게 완성해나가요

프론트엔드

  • Next.js 15 – 최신 프론트엔드 프레임워크

  • TailwindCSS – 빠르게 스타일을 입힐 수 있는 CSS 라이브러리

  • Shadcn/UI – 실전용 UI 컴포넌트 라이브러리

  • React Query – 서버 데이터 캐싱 및 요청 상태 관리 라이브러리

  • Jotai v2 – 직관적인 전역 상태 관리 도구


백엔드 · 인프라

  • NestJS – 백엔드 API 서버 프레임워크

  • Prisma – 안전하고 편리한 DB 연결용 ORM

  • PostgreSQL – 확장성과 안정성을 갖춘 관계형 데이터베이스

  • Docker – 일관된 개발·배포 환경 구성 도구

  • AWS S3 / CloudFr

    ont – 강의 영상 저장 및 빠른 전송을 위한 클라우드 인프라


🎯

이런 분들께 강력히 추천해요!

단순한 투두앱에서 벗어나
제대로 된 서비스를
만들고 프론트엔드 개발자

포트폴리오
바로 활용 가능한 프로젝트가
필요한 이직·취업 준비생

강의 플랫폼과 같은
실서비스를 만들고 싶은
1인 개발자

수업에서 이런걸 배워요


섹션 1~3
기본기를 다지고 Next + Nest 프로젝트 세팅

Next.js 15, TailwindCSS, ShadcnUI, Jotai, React Query까지 프론트 서버를 세팅하고,

NestJS, Prisma, Docker로 백엔드와 DB까지 한 번에 준비합니다.
Cursor AI를 활용한 실전형 개발 워크플로우도 함께 익혀요.

섹션 4
진짜 서비스처럼 로그인부터 인증까지

Auth.js(next-auth)와 JWT 조합으로
회원가입, 로그인, 세션 유지, 권한 보호까지 전부 구현합니다.

SSR/CSR 고려한 인증 처리부터
NestJS Auth Guard 적용까지 실전에서 바로 쓰는 인증 시스템을 손에 익힙니다.

섹션 5
인프런 구조 뜯어보고 직접 기획해보기

진짜 서비스를 만들기 위해 인프런을 먼저 뜯어봅니다.

어떤 기능과 데이터 모델이 필요한지 직접 기획하고 Course, Section, Lecture 등 모델을 Prisma로 직접 정의하고 Seed 데이터도 만들어봐요.

섹션 6
지식공유자 기능 구현 (강의 관리)

지식공유자가 직접 강의를 등록하고 수정하는 전체 플로우를 구현합니다.

CKEditor를 활용하여 상세페이지를 만들고
S3 + CloudFront 조합으로 동영상과 썸네일 업로드 기능을 구축합니다. (스트리밍도 구현)
Swagger Codegen으로 API 호출도 자동화해요.

🧑‍🎓

수업을 통해
이런 것들을 얻어갈 수 있어요


1⃣프로젝트 구조를 처음부터 끝까지 스스로 설계할 수 있어요.

2⃣ 서비스에 필요한 기능을 End-to-End구현하는 힘이 생겨요.

3⃣AWS를 통해 필요한 인프라를 구축할 수 있어요.

4⃣Cursor AI를 활용해서 완성도 높은 서비스를 구축할 수 있어요.

5⃣내가 원하는 서비스 하나쯤은 직접 만들 수 있다!”는 근거있는 자신감이 생겨요.

🧰

강의 구성

7개의 섹션, ~15시간 분량, ~50개 강의 (평생 업데이트)

GitHub 예제 코드 및 참고자료 제공

완성된 프로젝트는 포트폴리오로 사용 가능

🧩

수강 전 준비사항

Typescript 문법 기초, React 사용 경험

Git, Node.js에 대한 이해

#Next.js #Nest.js #NextJS #NestJS #Fullstack #풀스택 #Jotai #ReactQuery #Prisma #PostgreSQL #CloneCoding #클론코딩 #Node.js #AWS #S3 #Cloudfront

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • 블로그, 투두앱은 그만! 서비스 전반을 직접 구현해보고 싶은 프론트엔드 개발자

  • NestJS 백엔드 설계를 실전으로 익히고 싶은 주니어~미들 개발자

  • 이직, 포트폴리오를 위한 완성도 높은 프로젝트가 필요한 취준생

  • 강의 하나로 실전 스택을 A to Z로 익히고 싶은 실무 지향 수강생

  • 단일 언어 기반의 풀스택 구조를 처음부터 끝까지 익히고 싶은 실무 지향 수강생

선수 지식,
필요할까요?

  • HTML/CSS/JS 기본 문법

  • React 기초 사용 경험

안녕하세요
입니다.

3,551

수강생

196

수강평

64

답변

4.9

강의 평점

6

강의

🚀 “핫한 스택으로 실전 서비스를 만드는 과정을 숨김없이 보여드립니다.”

이론보다는 프로젝트 위주의 실무 강의로 현업에 바로 도움이 될 수 있는 내용을 제공합니다.

  • (현) 네카라쿠배 재직

  • (현) 7년차 풀스택 개발

  • (강의) 스파르타 코딩클럽 강사

  • (교육) 한국과학기술원(KAIST) 전산학과 졸업

커리큘럼

전체

55개 ∙ (14시간 42분)

해당 강의에서 제공:

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

수강평

전체

31개

4.8

31개의 수강평

  • nochikk님의 프로필 이미지
    nochikk

    수강평 9

    평균 평점 5.0

    수정됨

    5

    100% 수강 후 작성

    フロントエンド開発をしていますが、バックエンドも触ってみたいと思っていたところ、ロ펀様のNext.jsフルスタック講座が良かった記憶があったので受講しました。 個人的にInflearnのようなサイトを作ってみたくて、Inflearnの講座データをクロールしても良いかと正式に問い合わせて断られたこともあったのですが、今回の講座でその願いを叶えることができたように思います。 Nest.jsを初めて触る者として、プロジェクトを進めるならこのように構成すれば良いという感覚を掴める講座でした。「Inflearnプロダクトを覗いてみる」という企画部分も含まれており、アーキテクチャや構造について考えてみることができたと思います。 Part1にはデプロイが含まれていないのが少し残念ですが、早くPart2が出たらデプロイまで加えた完成されたポートフォリオにしたいですね 😊😊

    • lopun
      지식공유자

      チヒョン様、心のこもったご受講レビュー、本当にありがとうございます! Inflearnのようなサイトをご自身で作ってみたいという願いを、今回の講義で少しでも実現されたとのこと、嬉しく思います 😊😊 Nest.jsは初めてだったとのことですが、構造を理解して感覚を掴まれたということで、講義を作った立場としても大変嬉しいです! おっしゃる通り、Part1にはデプロイが含まれておらず、物足りなさを感じられたかと思いますが、Part2ではデプロイと合わせて、より完成度の高いポートフォリオを構築していただけるよう、最大限しっかりと準備を進めてまいります。ご期待ください! 😊 改めて貴重なご受講レビュー、ありがとうございます!

  • upustream6450님의 프로필 이미지
    upustream6450

    수강평 3

    평균 평점 5.0

    5

    71% 수강 후 작성

    Part1とPart2を一緒に購入しました。 実務者として現在会社に導入する技術力を模索中、nestとnextフレームワークを使用した技術が必要で導入しようとしています。講義を通じて様々な技術を知ることができ、取り入れています。流れも良く、使用するライブラリや何とかなるプロジェクトではなく、効率的に開発/管理/運営に直接的な影響を与える構成だと思うので、講義は満点中百万点です。良い講義に感謝いたします。 ところで先生... 先生がご存知のことを私たち受講生は知らないから学びたくて講義を聞いているのです...この講義は初級ではありません... 受講している大部分はおそらく公式ドキュメントを見ても「一体私は何を見ればいいのか?」という考えをします..よく分からないからです...😊 突然「この部分がこの部分を代替するので削除します。」とおっしゃると、受講生の大部分はこの部分とこの部分が一体何なのかをしばらく考えなければならず、見つけ出すことに非常に困難を感じるようになると思います.. 先生の講義が良いです。 私が必要とするもの、私が望むものを全て構成してくださっています。 ち...ちょっとだけ、本当にちょっとだけです。 まだ一人で呼吸することもうまくできない「だめなじゃがいも」たちが受講していると思ってくださると感謝いたします。

    • lopun
      지식공유자

      良いご意見をいただき、ありがとうございます!おっしゃっていただいた内容を反映して、初心者の方々も比較的もっと簡単についてこられるよう努力いたします😊 ご質問や詰まってしまう部分がございましたら、いつでもSlackでお問い合わせください。完走まで頑張ってください!

  • chanwoolee747485님의 프로필 이미지
    chanwoolee747485

    수강평 2

    평균 평점 5.0

    수정됨

    5

    100% 수강 후 작성

    私はフロントエンド開発者になるために勉強していますが、以前ロ펀さんのsupabaseの講義を聞いて大変役立ったため、今回のクローンコーディング講義も受講することにしました。 チームプロジェクトでバックエンドの方からAPIを受け取り、Swaggerを参考にフロントコードを作成する際、常にバックエンドではどのようなロジックでデータが流れているのか気になっていましたが、今回の講義を通してその流れを直接経験することができ、本当に有益でした。 NestJS, Prismaなど初めて触れる技術も多く、難しい部分もありましたが、講師の方が実務でよく使う最新技術を分かりやすく説明してくださり、Notionにもよく整理されていたため、ついていきやすかったです。Shadcn UI, TailwindCSS, S3など様々なツールを活用してみる過程も興味深く、実務ですぐに使えるヒントやノウハウをたくさん学ぶことができました。 特に、フロントとバックエンドがどのように接続され、全体的にどのような構造で動作するのかを実際に実装してみることで、フルスタック開発への理解度が確実に高まりました。ポートフォリオとして活用できる完成度の高いプロジェクトを作成したい方や、実務志向のフルスタック開発を学びたい方に、この講義をお勧めします!

    • lopun
      지식공유자

      チャヌさん、大切な受講レビューありがとうございます! 講義が有益だったとおっしゃっていただけて、とてもやりがいがありますね 😊😊 最後まで受講していただき、大変お疲れ様でした。 幸せな一日をお過ごしください! :)

  • rach님의 프로필 이미지
    rach

    수강평 6

    평균 평점 5.0

    수정됨

    5

    100% 수강 후 작성

    🎯フロントエンド開発者も気軽にフルスタックの流れを習得できる講座 フロントエンド開発をする中でバックエンド知識の必要性を感じ、以前「フロント開発者のためのバックエンド101」講座を受講したのですが、満足度が高かったため、今回の講座もすぐに続けて受講することにしました。 この講座は、単純な機能実装を超えて、Next.js 15, NestJS, Prisma, React Query, TailwindCSS, Cursor AI, Jotai など最新技術スタックの理論をまず押さえてくれるため、初心者でも十分に付いていける構成でした。実際のサービスをクローンしながら一つ一つ機能を実装してみると、フロントエンド開発者としてバックエンドの流れを一緒に理解したい方々にとって、非常に適した講座だと感じました。 特に印象深かった点は ✅ Prismaを活用したAPI実装とPostgreSQLベースのデータベースモデリング ✅ Swagger + OpenAPIベースの自動化されたバックエンド呼び出し構造の構築 ✅ AWS S3 + CloudFrontベースの動画ストリーミングアップロードシステムの構築など 実務ですぐに活用できるレベルの具体的な実装内容が多かった点です。 また、学習中に疑問に思ったことやフィードバックが必要な部分は、Slackチャンネルを通じて質問を残せば回答を得られるため、学習環境も非常に満足でした。 ただ残念だったのは、CKEditor関連の課題により動画の順序がスムーズでない部分があった点です。大きな流れには支障はありませんが、少し混乱しました。 👉 フロントエンドからバックエンドまで網羅するプロジェクト経験を積みたい方々に、強くお勧めする講座です。 ⭐⭐⭐⭐⭐ 実務感覚、技術スタック、クローン対象全て満足でした。

    • tomorrowcho님의 프로필 이미지
      tomorrowcho

      수강평 15

      평균 평점 4.7

      수정됨

      5

      100% 수강 후 작성

      Next.jsベースだったので、慣れてスムーズに始められました。NestJSとPrismaは初めてでしたが、興味を持って取り組めました。 実際のサービスのようなクローンプロジェクトだったので、実務感覚も養えて満足でした! Part 2も楽しみです! 😊

      ₩165,000

      로펀님의 다른 강의

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

      비슷한 강의

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