root layout

패스트캠퍼스

Fast Campus Logo
Fast Campus

사용자 메뉴

로그인
커뮤니티
기업교육
Course Cover ImageCourse Cover Background Image
개발/데이터프론트엔드 개발

AI시대 웹 개발 바이블: Next.js로 구축하고 AI로 완성하는 웹 서비스

평생소장
약 18시간
사전지식 필요

더 이상 문법만 배우는 강의에 머물지 마세요! Next.js와 TypeScript의 탄탄한 기본기 위에 AI 기술을 더해, 현업이 원하는 웹 서비스를 직접 완성하는 실전형 강의로 이 시대의 인재가 되어볼 차례!

#MCP#Next.js#TypeScript#커서AI

강의 정보

온라인
10파트
26.01.05~ 영상 공개
커뮤니티 운영

76%
월 15,750원
12개월 무이자 할부 시

권장 소비자 가격
798,998원
할인 금액
-609,998원
할인 판매가
189,000원

마감까지 2일3시간39분

AI시대 웹 개발 바이블: Next.js로 구축하고 AI로 완성하는 웹 서비스

찜하기

🚨 서두르세요! 선착순 할인 혜택이 언제 마감될지 몰라요!시대에 맞는 '확장' 스택 쌓으셔야죠? 지금이 최저가!

마감까지 2일3시간39분

커리큘럼

파트 10개약 18시간

  • Part 01 AI-First 개발 환경 이해하기

      Ch 01 AI와 Cursor 이해

    • 01 AI 시대의 개발 패러다임
    • 02 Cursor 소개와 설치
    • 03 Cursor로 코드 읽고 이해하기
    • 04 AI 코드 품질 관리 원칙
    • Ch 02 프롬프트 엔지니어링과 AI 시대 개발 방식

    • 01 문제 정의와 작업 분해 기본기
    • 02 UI 컴포넌트를 AI에게 시키기
    • 03 서버 로직을 AI와 함께 설계하고 검증하기
    • 04 테스트 코드와 유틸 함수를 AI로 만들고 디버깅하기
    • 05 Vibe Coding중 코드 롤백하기
    • Ch 03 MCP란 무엇인가

    • 01 MCP 개념과 구조 이해
    • 02 대표 MCP 사례 둘러보기
    • 03 프로젝트 MCP 적용 포인트 찾기
  • Part 02 프로젝트 기술 이해하기

      Ch 01 프로젝트에 사용할 기술 알아보기

    • 01 프로젝트에 사용할 기술 알아보기
    • 02 Next.js 핵심 철학 이해하기
    • 03 Next.js 라우팅 알아보기
    • 04 Server/Client Components, Suspense, loading.js, Streaming 한 번에 이해하기
    • 05 TypeScript 기본 타입 시스템 개념 정리
    • 06 실무에서 반드시 알아야 하는 TS 패턴 (Narrowing·Interface·Generics)
  • Part 03 프로젝트 세팅

      Ch 01 Next.js와 TypeScript 기본 구성

    • 01 Next.js 16 App Router 프로젝트 초기화
    • 02 TypeScript 설정과 타입 안전 전략
    • Ch 02 Supabase 연결

    • 01 Supabase 프로젝트 생성과 환경 변수 설정
    • 02 데이터베이스 스키마 설계와 마이그레이션
    • 03 샘플 데이터 seed로 초기 상태 만들기
    • Ch 03 상태관리와 데이터 패칭 세팅

    • 01 Zustand로 전역 상태 관리 기본 세팅
    • 02 React Query로 서버 데이터 다루기
    • Ch 04 코드 정리

    • 01 Cursor AI로 만든 코드 리뷰 및 개선
  • Part 04 Figma 기반 UI 구현과 AI 친화적 UI 패턴

      Ch 01 Figma MCP 연동

    • 01 Figma MCP 설치와 연결
    • 02 디자인 토큰 자동 추출과 코드 변환
    • 03 디자인 페이지에 맞는 URL 설정
    • 04 공통 디자인 컴포넌트 설계
    • 05 커머스 디자인 컴포넌트 설계
    • 06 어드민 디자인 컴포넌트 설계
    • 07 공통 컴포넌트 Storybook 작업
    • Ch 02 홈 화면 구현

    • 01 메인 상품 리스트 레이아웃 구성
    • 02 상품 리스트 로딩 컴포넌트 만들기
    • 03 React-query의 Infinite Queries를 이용해 무한 스크롤을 구현한다
    • 04 검색바 컴포넌트 만들기
    • Ch 03 코드 정리

    • 01 Cursor AI로 만든 코드 리뷰 및 개선
    • Ch 03 상품 상세 화면 구현

    • 01 Dynamic Route 설정과 SEO 기초
    • 02 상품 정보 컴포넌트와 장바구니 버튼
    • 03 상세 정보 컴포넌트와 리뷰 영역
    • Ch 04 코드 정리

    • 01 Cursor AI로 만든 코드 리뷰 및 개선
    • Ch 05 인증과 세션 관리

    • 01 Supabase Auth로 이메일 로그인 구현
    • 02 Next.js 미들웨어로 보호 라우트 구성
    • 03 Supabase Auth에 대응하는 1:1 유저 프로필 만들기
    • 04 Supabase RLS 설정 및 인증된 경로 적용
  • Part 05 커머스 핵심 기능 구현

      Ch 01 찜하기 기능 구현

    • 01 찜하기 기능 구현
    • 02 찜한 상품 모아보기
    • Ch 02 리뷰 기능 구현

    • 01 리뷰 생성하기
    • 02 리뷰 수정/삭제하기
    • Ch 03 장바구니

    • 01 API로 장바구니 기능 작업하기
    • 02 수량 변경과 삭제 및 합계 계산
    • Ch 04 주문 및 결제

    • 01 결제 페이지와 가격 계산 검증
    • 02 TossPayments 연동과 테스트 결제 플로우
    • 03 결제 성공과 실패 처리
    • Ch 05 주문 내역

    • 01 주문 리스트 페이지와 필터 구성
    • 02 주문 상세 페이지에서 결제와 배송 정보 표시
    • Ch 06 마이페이지

    • 01 마이페이지 내 정보 작업하기
    • 02 마이페이지 주문 내역 작업하기
    • 03 마이페이지 리뷰 내역 작업하기
  • Part 06 커머스 핵심 기능과 AI 기능 통합

      Ch 01 리뷰 요약 AI 기능 추가

    • 01 Gemini API 알아보기
    • 02 리뷰 요약 AI 기능 설계
    • 03 Gemini API로 리뷰 요약 서버 액션 구현
    • 04 상품 상세에 AI 리뷰 요약 섹션 추가하기
    • Ch 02 AI 친화적 UI 패턴

    • 01 비동기 UI와 Suspense 기반 로딩 경험 설계
    • 02 Retry Diff Confidence UI 설계
    • 03 Agent step UI와 로딩 경험 최적화
  • Part 07 관리자 대시보드

      Ch 01 관리자 접근 제어

    • 01 Admin 역할 기반 라우팅과 보호 페이지
    • Ch 02 대시보드 메인 페이지와 리스트

    • 01 Admin에 들어가는 공통 페이지
    • 02 Admin에 들어가는 리스트 페이지
    • Ch 03 상품 관리

    • 01 관리자용 상품 리스트 테이블 구성
    • 02 상품 등록과 수정 폼 Supabase 연동
    • 03 AI로 상품 설명과 태그 자동 제안
    • Ch 04 주문 관리와 고객 리뷰

    • 01 주문 리스트와 상태별 필터
    • 02 주문 상세
    • 03 고객 리뷰
  • Part 08 관리자 대시보드 MCP 통합 자동화

      Ch 01 Slack MCP로 운영 알림 자동화

    • 01 Slack MCP 연결과 채널 설정
    • 02 결제 완료 시 Slack 알림 보내기
    • Ch 02 Notion MCP로 리포트 자동화

    • 01 Notion MCP OAuth와 데이터 모델 설계
    • 02 일간과 주간 결제 리포트 자동 생성
  • Part 09 반응형 디자인과 스타일링

      Ch 01 기본 스타일링과 테마 전략

    • 01 디자인 토큰 기반 모바일 UX 전역 스타일 설정
    • 02 반응형 레이아웃과 모바일 UX 최적화: 메인 페이지
    • 03 반응형 레이아웃과 모바일 UX 최적화: 상품 상세 페이지
    • 04 반응형 레이아웃과 모바일 UX 최적화: 주문 및 결제 페이지
    • 05 반응형 레이아웃과 모바일 UX 최적화: 마이페이지
    • Ch 02 tailwindcss와 컴포넌트 아키텍처

    • 01 페이지와 컴포넌트 단위 스타일 분리
    • 02 AI가 생성한 CSS를 리팩토링하는 패턴
  • Part 10 운영과 테스트 및 배포 자동화

      Ch 01 배포와 환경 구성

    • 01 Vercel 배포 파이프라인 구성
    • 02 GitHub Actions로 CI CD 파이프라인 만들기
    • Ch 02 테스트와 품질 보증

    • 01 Playwright 알아보기
    • 02 Playwright로 핵심 시나리오 E2E 테스트 작성
    • 03 AI로 테스트 케이스 생성과 유지보수하기
    • Ch 03 개발자 워크플로우용 MCP

    • 01 GitHub MCP로 PR 자동 요약 만들기
    • 02 Playwright MCP 기반 GitHub Actions 자동 테스트
    • Ch 04 운영 자동화와 마무리

    • 01 MCP와 GitHub Actions를 활용한 배포 후 체크 자동화
    • 02 강의 전체 정리와 실무 확장 로드맵
 영상공개 일정 D-152
해당 강의는 총 5회에 걸쳐 공개됩니다.
1차2026.01.05(월)
2차2026.02.05(목)
3차2026.03.05(목)
4차2026.04.06(월)
최종2026.05.06(수)

커뮤니티

수강생들은 어떤 질문을 하고, 어떤 이야기를 나누고 있을까요?

패스트캠퍼스 커뮤니티에서 다른 수강생들과 함께 궁금했던 주제에 대해 다양한 관점과 답변을 찾아보세요.

커뮤니티 바로가기

학습 규정 및 환불 규정

학습 규정


* 본 상품은 동영상 형태의 강의를 수강하는 상품입니다.

* 상황에 따라 사전 공지 없이 할인이 조기 마감되거나 연장될 수 있습니다.

* 해당 강의는 사전 예약 상품으로, 강의 영상이 공개 일정에 따라 순차적으로 제작되어 오픈됩니다.


총 학습기간:

  • 정상 수강기간(유료 수강기간) 최초 30일, 무료 수강 기간은 31일 일차 이후로 무제한이며, 유료 수강기간과 무료 수강기간 모두 동일하게 시청 가능합니다.

  • 본 패키지는 약 18시간 분량으로, 일 1시간 내외의 학습 시간을 통해 정상 수강 기간(=유료 수강 기간) 내에 모두 수강이 가능합니다.

  • 수강시작일: 수강 시작일은 결제일로부터 기간이 산정되며, 결제를 완료하시면 마이페이지를 통해 바로 수강이 가능합니다. (사전 예약 강의는 1차 강의 오픈일)

  • 패스트캠퍼스의 사정으로 수강시작이 늦어진 경우에는 해당 일정 만큼 수강 시작일이 연기됩니다.

  • 일부 강의는 아직 모든 영상이 공개되지 않았습니다. 각 상세페이지 하단에 공개 일정이 안내되어 있습니다.


[혜택자료(AI 워크플로우 10종) 관련 안내사항]

  • 이 자료는 수강생들에게 풍부한 혜택을 주고자 이 강의를 위해 따로 만들어진 자료입니다. 질의응답 대상이 되지 않음은 양해부탁드립니다.

  • 강의를 진행하는 강사님과 본 강의 자료를 만든 강사님은 다른 분입니다. 본 자료 담당 강사님은 현재 9년 이상의 경력을 가진 프론트엔드 개발자로서 카카오부터 국내 대기업까지 거치신 분입니다.

  • 제공 시기 : 본 강의의 최종 영상 공개일에 맞춰 제공됩니다.


주의 사항


  • 상황에 따라 사전 공지 없이 할인이 조기 마감되거나 연장될 수 있습니다.

  • 천재지변, 폐업 등 서비스 중단이 불가피한 상황에는 서비스가 종료될 수 있습니다.

  • 본 상품은 기수강생 할인, VIP CLUB 제도 (구 프리미엄 멤버십), 기타 할인 이벤트 적용이 불가할 수 있습니다.

  • 커리큘럼은 제작 과정에서 일부 추가, 삭제 및 변경될 수 있습니다.

  • 쿠폰 적용이나 프로모션 등으로 인해 5만원 이하의 금액으로 강의를 결제할 경우, 할부가 적용되지 않습니다.


환불 규정


  • 환불금액은 정가가 아닌 실제 결제금액을 기준으로 계산됩니다.

  • 쿠폰을 사용하여 강의를 결제하신 후 취소/환불 시 쿠폰은 복구되지 않습니다.


  • 수강시작 후 7일 이내, 5강 미만 수강 시에는 100% 환불 가능합니다.

  • 수강시작 후 7일 이내, 5강 이상 수강 시 전체 강의에서 수강한 강의의 비율에 해당하는 수강료를 차감 후 환불 가능합니다.


  • 수강시작 후 7일 초과 시 정상 수강기간 대비 잔여일에 대해 아래 환불규정에 따라 환불 가능합니다.

    • 환불요청일 시 기준

    • : 수강시작 후 1/3 경과 전, 실 결제금액의 2/3에 해당하는 금액 환불

    • : 수강시작 후 1/2 경과 전, 실 결제금액의 1/2에 해당하는 금액 환불

    • : 수강시작 후 1/2 경과 후, 환불 금액 없음


* 보다 자세한 환불 규정은 홈페이지 취소/환불 정책에서 확인 가능합니다.


패스트캠퍼스 정책 안내


[패스트캠퍼스 아이디 공유 금지 정책]

패스트캠퍼스의 모든 온라인 강의에서는 1개의 아이디로 여러명이 공유하는 형태를 금지하고 있습니다.

동시접속에 대한 기록은 내부 시스템을 통해 자동으로 누적되며, 이후 서비스 이용이 제한될 수 있습니다.


[기기제한 정책]

패스트캠퍼스 온라인 강의 시청을 위해서는 ID별 최대 4개의 기기를 등록할 수 있으며, 기기 등록은 온라인 강의장 접속 시 자동 등록됩니다.

최대 갯수를 초과하였을 경우 등록된 기기 해제가 필요합니다.


[저작권 정책]

패스트캠퍼스의 모든 강의는 무단 배포 및 가공하는 행위, 캡쳐 및 녹화하여 공유하는 행위, 무단으로 판매하는 행위 등 일체의 저작권 침해 행위를 금지합니다.

부정 사용이 적발될 경우 저작권법 위반에 의한 법적인 제재를 받으실 수 있습니다.

국내 7개 카드사 12개월 무이자 할부 지원! (간편 결제 제외)

  • 삼성카드
  • 신한카드
  • 롯데카드
  • 현대카드
  • 하나카드
  • KB국민은행
  • NH농협카드
  • 회사소개
  • 강사지원
  • 채용안내
  • 광고문의
올해의 브랜드 대상 2021올해를 빛낸 브랜드 대상 2021
대표이사
이강민
개인정보책임관리자
이강민
사업자번호
810-86-00658
사업자정보확인
사무실
서울특별시 강남구 테헤란로 231, 센터필드 WEST 6층, 7층
교육장
서울특별시 강남구 강남대로 364 미왕빌딩 10, 11층
패스트캠퍼스분점 원격평생교육원ㅤ
사업자번호
325-85-02734
사업장 소재지
서울특별시 강남구 역삼로15길 9, 지하1층(역삼동)
패스트캠퍼스강북학원ㅤ
사업자번호
344-85-02768
사업장 소재지
서울특별시 중랑구 망우로 244, 본관 3층 전면부(상봉동, 덕화빌딩)
  • 이용약관
  • 개인정보처리방침
  • FAQ
  • 취소/환불 정책
  • 자료실
  • 공지사항
  • 고객센터 바로가기
  • 전화번호 02-501-9396
  • 이메일 help@fastcampus.co.kr
  • 주중 10시~18시 (점심시간 12~13시 / 주말 및 공휴일 제외)
호스팅 서비스 제공
(주) 데이원컴퍼니
통신판매업 신고번호
제 2017-서울강남-01977호
학원설립 운영등록번호
제12484호(강남)
원격평생교육원
제 572호