Inflearn brand logo image
Inflearn brand logo image
NEW
개발 · 프로그래밍

/

풀스택

인프런 클론코딩 Part 2: 수강부터 배포까지, 진짜 인프런 완성하기

🔥 강의 수강부터 결제, 배포까지 수강생이 겪는 전 과정을 그대로 구현해보는 실전 풀스택 강의입니다. 강의 탐색, 상세페이지, 수강신청, 영상 시청, 수강평과 질문, 장바구니 및 실결제, 이어보기, Docker + AWS 배포까지 모두 직접 만들며, 실제 서비스에 가까운 사용자 흐름과 구조 설계를 익히고 고급 풀스택 경험을 완성합니다.

68명 이 수강하고 있어요.

이런 걸 배울 수 있어요

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

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

  • 강의 탐색부터 수강 신청, 이어보기, 결제까지 사용자 중심의 수강 시스템 전체 구현

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

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

  • AWS와 Docker를 활용한 실무에 가까운 배포 방법

🚀

국내 최초!

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

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

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

잠깐! Part 2 출시 기념

🔥Part 1 강좌 -30% 할인쿠폰 제공 🔥

👉쿠폰 링크 (~7/30)👈


이 강의를 통해 여러분은


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

핫한 ORM인 Prisma를 통해


수강 · 결제 · 배포까지 완성된

인프런 클론을 만들며

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

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

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

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

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

이 강의에서는 이 조합을 바탕으로 수강신청, 이어보기, 결제 및 배포까지 풀스택 전체 흐름을 구현합니다.

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

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

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

💡Part 2 소개

이번 Part 2 강좌에서는

  • 강의 목록 검색부터 상세페이지, 즐겨찾기, 수강신청 버튼까지 구현합니다.

  • 시청 시간 저장과 이어보기 기능이 포함된 수강 페이지를 만듭니다.

  • 수강평과 질문 기능을 설계하고, 지식공유자 관리 UI까지 완성합니다.

  • 장바구니, 결제 API, PortOne(토스페이먼츠) 연동을 통해 실제 결제 흐름을 구현합니다.

  • AWS EC2 배포, HTTPS 연결, GitHub Actions 자동화로 운영 수준까지 완성합니다.

Part 1에서 만든 프로젝트를 토대로 강의 탐색, 수강, 장바구니, 결제 등의 기능을 얹고,
최종적으로 AWS 배포까지 마무리해 “누구나 접속해 볼 수 있는 진짜 서비스”로 완성합니다.

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

🚀

Part 2 강의에서는

아래의 결과물을 실제로 완성하게 됩니다!


🥇 강의 탐색부터 상세페이지까지 구현

  • 카테고리, 페이지네이션 기반 강의 검색

  • 별점 및 지식공유자 정보 포함 상세페이지

  • 즐겨찾기 기능과 수강신청 / 장바구니 기능 구현


📺 실제처럼 동작하는 수강 페이지 구현

  • 비디오 플레이어 컴포넌트 직접 개발

  • 시청 시간 저장과 이어보기 기능 완성

  • 커스텀 재생 버튼 제작 미션 포함


📝 수강평 · 질문 시스템 구축

  • 별점 기반 수강평 목록 및 작성 UI

  • 질문 작성/조회/답변까지 흐름 완성

  • 지식공유자용 관리 페이지까지 직접 구현


💳 실제 결제 흐름 완성

  • 장바구니 · 결제 API 직접 설계

  • PortOne 서버 SDK와 토스페이먼츠 PG 연동

  • 실결제, 예외처리, 결제 후 학습목록 반영까지


💻배포 · 모니터링 · 인프라 자동화까지

  • Sentry 연동, 일일 통계 배치잡 개발,
    In-memory 캐싱까지 심화학습

  • EC2 + Docker + Route53 배포 구성

  • GitHub Actions로 CI/CD 자동화까지 완료


🎯

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

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

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

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

수업에서 이런걸 배워요


섹션 2
강의 탐색부터 상세페이지까지, 수강 전 흐름 완성

카테고리, 페이지네이션 기능을 포함한 검색 기능을 구현하고 강의 목록 화면과 카테고리 검색 페이지를 만듭니다.

상세페이지에는 별점과 지식공유자 정보를 함께 보여주며, 수강신청 버튼은 로그인 여부와 강의 유형에 따라 동작이 달라지도록 처리합니다.

섹션 3
시청 시간 저장 & 이어보기가 가능한 수강 페이지

비디오 플레이어 컴포넌트를 직접 만들고,
시청 시간 저장과 이어보기 로직까지 구현합니다.

백엔드에서는 수강정보를 저장하고 응답하는 API를 설계하며,
프론트에서는 시청 상태에 따라 동작하는 UI와 커스텀 재생 버튼을 구성해 실제 인프런과 가까운 수강 경험을 만들어냅니다.

섹션 4
수강평과 질문 기능 - 수강생 & 지식공유자

수강생은 별점과 후기를 남기고,
질문을 등록해 답변을 받을 수 있으며

지식공유자는 관리 페이지에서 수강평에 답글을 달거나 질문에 답변을 남길 수 있도록 역할에 맞는 UI를 각각 설계합니다.

섹션 5
장바구니부터 결제까지, 전체 구매 흐름 개발

장바구니에 강의를 담고,
PortOne SDK토스페이먼츠를 연동해 실결제를 구현합니다.

결제 성공 시 학습 목록에 자동으로 반영되며,
전체 결제 플로우와 예외 상황까지 고려해 사용자 경험을 완성합니다.

섹션 6~7
현업 수준의 백엔드 운영 경험과 실제 배포까지

NestJS의 Cron 기능으로 일간 통계를 자동 수집하고, 자주 호출되는 API는 In-memory 캐싱으로 응답 속도를 개선합니다.

Sentry를 연동해 에러를 실시간 모니터링하고
EC2 · Docker · GitHub Actions · Route 53을 이용한 실제 배포 환경을 직접 구성합니다.

HTTPS와 도메인 연결도 함께 실습합니다.

📦 Part 1과 Part 2, 이렇게 연결됩니다

이 강의는 ‘인프런 클론 프로젝트’ 시리즈의 일부입니다.
Part 1과 Part 2는 서로 독립적으로 수강 가능하지만,
함께 들으면 기획부터 배포까지, 진짜 서비스 한 편을 완성할 수 있습니다.

Part 1

지식공유자 기능 중심

수강생 기능 중심

강의 등록, 커리큘럼 구성, 영상 업로드

Part 2

강의 탐색, 수강신청, 영상 시청, 결제, 배포

JWT 인증, S3 업로드, 관리자 페이지 구성

시청 기록 저장, 질문/수강평, 결제 API, EC2 배포

🧑‍🎓

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


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

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

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

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

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

🧰

강의 구성

7개의 섹션, 14+시간 분량, 40+개 강의 (평생 업데이트)

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로 익히고 싶은 실무 지향 수강생

  • Next.js + NestJS 기반으로 풀스택 구조를 직접 구현해보고 싶은 실무 지향 개발자

선수 지식,
필요할까요?

  • HTML/CSS/JS 기본 문법

  • React 기초 사용 경험

안녕하세요
입니다.

3,314

수강생

154

수강평

58

답변

4.9

강의 평점

6

강의

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

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

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

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

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

커리큘럼

전체

43개 ∙ (14시간 6분)

해당 강의에서 제공:

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

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!

로펀님의 다른 강의

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

비슷한 강의

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