인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
개발 · 프로그래밍

/

웹 개발

1시간만에 Chat GPT 클론 with Cursor (원데이 클래스)

Next.js + Cursor IDE 로 챗 프로그램을 한시간만에 구현하는 능력을 가질 수 있어요.

(4.8) 수강평 19개

수강생 451명

nextjsChatGPTReactTypeScriptTailwindCSS
Thumbnail

입문자를 위해 준비한
[웹 개발, 프론트엔드] 강의입니다.

이런 걸 배울 수 있어요

  • Chat Application MVP 제작 with Cursor IDE

  • UI 프로토 타이핑 with Cursor IDE

  • 코드리뷰 with Cursor IDE

1시간만에 Chat GPT 클론 with Cursor (원데이 클래스)


🎯 이 강의에서 배울 것

✔ ChatGPT 클론 개발 – OpenAI API를 활용해 실제로 동작하는 AI 챗봇을 만듭니다.

✔ Cursor 활용법 – AI 기반의 코드 에디터 Cursor를 사용해 빠르고 효율적으로 개발하는 법을 배웁니다.

✔ React + Next.js 기본 구조 – Chatbot UI를 구축하며 프론트엔드 기술까지 익힙니다.

✔ 서버와 API 연동 – OpenAI API를 불러와 사용자 입력을 처리하는 핵심 로직을 구현합니다.

✔ 배포까지 완성 – 만든 챗봇을 Vercel에 배포해 실제 서비스처럼 동작하게 만듭니다.


💡 이 강의가 필요한 분들

✅ AI 챗봇을 직접 만들어 보고 싶은 개발자 및 기획자

✅ OpenAI API 활용법을 배우고 싶은 사람

✅ 프론트엔드/백엔드 기본 개념을 익히고 싶은 초보 개발자

✅ 실전 프로젝트 경험이 필요한 부트캠프 수강생 & 취업 준비생

✅ 빠르게 MVP(최소 기능 제품)를 개발해 보고 싶은 스타트업 창업자

​

  • Cursor IDE를 활용해서 빠르게 Web Application 제작 (1시간만에 1프로젝트)

    • AI Agent 기능을 이용한 빠른 프로토타이핑 with cursor IDE


💡 결과 미리 보기

Live Demo : https://clone-chat-gpt-cursor.vercel.app

강의 수업 자료 : https://dodokyo.github.io/docs/free-lectures/chat-gpt-cursor/chat-gpt-cursor-1​

사용하는 기술 스택, 선행지식​

  • React, Typescript

  • Next.js AppRouter

  • TailwindCss

  • RadixUI

  • Shadcn

  1. Next.js AppRouter : https://nextjs.org/

  2. TailwindCSS : https://tailwindcss.com/

  3. Radix UI : https://www.radix-ui.com/

  4. Shadcn : https://ui.shadcn.com/docs/dark-mode/next

이런 내용을 배워요

스크린샷 2025-03-12 오후 10.36.57
image

수강 전 참고 사항

주의 사항

  • 이 강의는 AI Agent와 함께하는 강의 입니다. 강의를 따라 하더라도 결과물이 다를 수 있습니다.

  • 이 강의를 수강하시는데 Cursor IDE는 무료 버전 -> 유료 버전이 필요할 수 있습니다.

  • GPT API에 비용 발생 가능합니다.

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • AI로 1일 1프로젝트 하고싶은 사람!

  • Next.js + AI Application 만들고 싶은 사람

선수 지식,
필요할까요?

  • React

  • Next

  • Typescript

안녕하세요
도도(코딩루팡)입니다.

3,336

명

수강생

125

개

수강평

77

개

답변

4.8

점

강의 평점

5

개

강의

  • 프론트 개발자로 네카라쿠배 중 하나의 IT서비스 기업에 재직하고 있습니다. 😀

  • 🚀 SW마에스트로 Expert 취업 멘토링

  • 🚀 Naver Boostcamp BE 멘토 경험

  • 🚀 FE 7Code 로드맵 강의 제작

커리큘럼

전체

16개 ∙ (56분)

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

수강평

전체

19개

4.8

19개의 수강평

  • ggamjige8888님의 프로필 이미지
    ggamjige8888

    수강평 13

    ∙

    평균 평점 5.0

    5

    31% 수강 후 작성

    • m.k lee님의 프로필 이미지
      m.k lee

      수강평 7

      ∙

      평균 평점 5.0

      5

      31% 수강 후 작성

      • Sunny kim님의 프로필 이미지
        Sunny kim

        수강평 5

        ∙

        평균 평점 4.4

        4

        31% 수강 후 작성

        • sund0410님의 프로필 이미지
          sund0410

          수강평 2

          ∙

          평균 평점 5.0

          5

          31% 수강 후 작성

          • 대성님의 프로필 이미지
            대성

            수강평 2

            ∙

            평균 평점 5.0

            5

            31% 수강 후 작성

            cursor ai 를 시작하기 좋아요

            도도(코딩루팡)님의 다른 강의

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

            기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)강의 썸네일

            기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

            도도(코딩루팡)

            React, Next.JS 14, TailwindCss, RadixUI, Shadcn, zustand 으로 YoutubeMusic 웹사이트를 클론합니다. NextJS 기초부터 UI 중점으로 웹프론트 기초를 마스터 할 수 있어요.!

            초급

            초급

            Next.js, React, TailwindCSS

            Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)강의 썸네일

            Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)

            도도(코딩루팡)

            Firebase의 SQL버전! Supabase를 통해 Next.js 풀 스택 기초를 마스터 할 수 있어요.!

            초급

            초급

            Next.js, supabase, React

            React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)강의 썸네일

            React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)

            도도(코딩루팡)

            1시간안에 끝내는 React기반의 GPT AI서비스 강의 수강 후 나만의 AI GPT SASS 솔루션을 만들어 보세요.

            초급

            초급

            React, ChatGPT, JavaScript

            개발자 취업 전략 시크릿 - 7CODE (네카라쿠배 로드맵 완성)강의 썸네일

            개발자 취업 전략 시크릿 - 7CODE (네카라쿠배 로드맵 완성)

            도도(코딩루팡)

            프론트 개발자 취업에 필요한 단계를 7가지 코드로 정리했습니다. 저는 개발자 선배가 없어서 취준때 막연했는데, 이제 걱정하지 마세요. 😀

            입문

            입문

            면접, 기술면접, 포트폴리오

            비슷한 강의

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

            기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)강의 썸네일

            기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

            도도(코딩루팡)

            React, Next.JS 14, TailwindCss, RadixUI, Shadcn, zustand 으로 YoutubeMusic 웹사이트를 클론합니다. NextJS 기초부터 UI 중점으로 웹프론트 기초를 마스터 할 수 있어요.!

            초급

            초급

            Next.js, React, TailwindCSS

            React와 Next.js로 배우는 입문용 프론트엔드 프로젝트: Tailwind CSS와 정적 배포까지 완성하기강의 썸네일

            React와 Next.js로 배우는 입문용 프론트엔드 프로젝트: Tailwind CSS와 정적 배포까지 완성하기

            ludgi

            Next.js와 Tailwind CSS를 활용한 프론트엔드 입문 강의입니다. 백엔드 없이 정적 배포까지 완료하며, 초보자도 완성의 성취감을 느낄 수 있도록 설계되었습니다

            입문

            입문

            Next.js, TailwindCSS, aws-s3

            2시간으로 끝내는 프론트엔드 테스트 기본기강의 썸네일

            2시간으로 끝내는 프론트엔드 테스트 기본기

            강병진

            테스트코드! 어디서부터 시작해야할지 막막한 분들을 위해 준비했어요. 테스트 작성부터, 자동화를 통한 배포까지 한번에!

            초급

            초급

            React, Cypress, Jest

            [풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)강의 썸네일

            [풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)

            로펀

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

            초급

            초급

            Next.js, supabase, TailwindCSS

            Next.js 15로 완성하는 실전 YouTube 클론 개발강의 썸네일

            Next.js 15로 완성하는 실전 YouTube 클론 개발

            antonio

            이 24시간 튜토리얼에서는 자신만의 유튜브 클론을 만드는 방법을 배우게 됩니다. Next 15와 React 19(tRPC 포함), 서버 컴포넌트에서의 프리페칭, 클라이언트 컴포넌트에서의 서스펜스 활용, 비디오 처리, 백그라운드 작업, AI 기능 등 고급 주제들을 다룰 것입니다.

            초급

            초급

            Next.js, React, PostgreSQL

            부트캠프에서 알려주지 않는 것들 (리액트 렌더링 최적화 편) 2편강의 썸네일

            부트캠프에서 알려주지 않는 것들 (리액트 렌더링 최적화 편) 2편

            애프터캠프

            React 렌더링 원리, 최적화를 마스터해서 실전 활용 및 면접 준비를 해보세요!

            중급이상

            중급이상

            React, react-usememo, 기술면접

            따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)강의 썸네일

            따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

            John Ahn

            이 강의를 통해서 레딧 웹사이트를 처음부터 하나하나 만들어 보실 수 있습니다.

            초급

            초급

            클론코딩, Node.js, React

            [풀스택 입문] Firebase보다 10배 좋은 Supabase강의 썸네일

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

            로펀

            풀스택 개발에 날개를 달아줄 Supabase! Firebase의 상위호환인 Supabase로 풀스택 개발을 2시간만에 완성합니다.

            초급

            초급

            PostgreSQL, Next.js, TailwindCSS

            [2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스강의 썸네일

            [2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스

            정현우

            아이디어는 있는데 앱을 어떻게 개발해야할지 몰랐던 분들, 실전 프로젝트 4개를 만들어보면서 앱 개발을 마스터해봅시다!

            입문

            입문

            JavaScript, React, Node.js

            iOS/Android 앱 개발을 위한 실전 React Native - Basic강의 썸네일

            iOS/Android 앱 개발을 위한 실전 React Native - Basic

            Wintho

            Mobile App Front-End 개발을 위한 React Native의 기초 지식 습득을 목표로 하고 있습니다. 진입장벽이 낮은 언어/API의 활용을 통해 비전문가도 쉽게 Native Mobile App을 개발할 수 있도록 제작된 강의입니다.

            초급

            초급

            React Native, React, ES6

            멀티패러다임 프로그래밍 1편: 반복자 패턴 & LISP (with TypeScript, Clojure, Kotlin)강의 썸네일

            멀티패러다임 프로그래밍 1편: 반복자 패턴 & LISP (with TypeScript, Clojure, Kotlin)

            MDU 유인동

            중고급 개발자로 성장하기 위한 고급 프로그래밍 언어 활용 능력과, 함수형, 객체 지향, LISP 패러다임이 결합된 소프트웨어 설계 및 구현 능력을 기릅니다.

            중급이상

            중급이상

            멀티 패러다임 프로그래밍, TypeScript, 함수형 프로그래밍

            찍어먹는 Next.js 풀코스 (영어 음성 & 한글 자막)강의 썸네일

            찍어먹는 Next.js 풀코스 (영어 음성 & 한글 자막)

            ludgi

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

            중급이상

            중급이상

            Next.js, React, GraphQL

            입문강의 타입스크립트부터 ionic6 (앵귤러 기반)강의 썸네일

            입문강의 타입스크립트부터 ionic6 (앵귤러 기반)

            깊알못nodeep

            쉽게 안드로이드 앱, 윈도우 앱, ios 앱을 만들어보고 배포하는 방법까지 알고 싶은 분들에게 추천드립니다. 자바스크립트와 앵귤러보다는 타입스크립트의 기초부터 알려드립니다!

            입문

            입문

            TypeScript, IONIC, 하이브리드 앱

            타입스크립트의 모든 것강의 썸네일

            타입스크립트의 모든 것

            yongsoocho

            Node.js 진영의 표준, TypeScript 어떻게 쓰고 계신가요? 타입 주석만 달고 계신다면 진짜 타입스크립트가 아닙니다. 무엇을 좋아할지 몰라서 다 준비했습니다. 타입스크립트 A to Z를 알아봅시다 :)

            초급

            초급

            TypeScript, NestJS, Deno

            Node.js에 TypeScript 적용하기(feat. NodeBird)강의 썸네일

            Node.js에 TypeScript 적용하기(feat. NodeBird)

            제로초(조현영)

            Node.js에 타입스크립트를 적용해보고, 기존 npm 패키지에 타이핑을 추가하거나, 직접 타입스크립트 라이브러리를 만들어봅시다.

            중급이상

            중급이상

            웹앱, TypeScript, Node.js

            타입스크립트 코리아 : React with TypeScript 세미나강의 썸네일

            타입스크립트 코리아 : React with TypeScript 세미나

            이웅재

            타입스크립트와 리액트 관련 강좌입니다.

            중급이상

            중급이상

            React, TypeScript

            차세대 Node.js 백엔드 서버 개발(Fastify & Prisma & Typescript와 함께하는)강의 썸네일

            차세대 Node.js 백엔드 서버 개발(Fastify & Prisma & Typescript와 함께하는)

            Indie Coder

            빠른 속도를 자랑하는 Node.js 프레임워크 fastify 와 orm Prisma 그리고 Typescirpt를 활용한 최신 Node.js 백엔드 REST API를 학습하는 코스

            초급

            초급

            Node.js, TypeScript, Prisma

            Tailwind CSS 실전 포트폴리오 퍼블리싱강의 썸네일

            Tailwind CSS 실전 포트폴리오 퍼블리싱

            코딩웍스(Coding Works)

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

            초급

            초급

            TailwindCSS, HTML/CSS

            무료