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

/

웹 개발

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

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

(4.8) 수강평 17개

수강생 435명

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,309

명

수강생

120

개

수강평

77

개

답변

4.8

점

강의 평점

5

개

강의

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

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

  • 🚀 Naver Boostcamp BE 멘토 경험

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

커리큘럼

전체

16개 ∙ (56분)

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

수강평

전체

17개

4.8

17개의 수강평

  • ggamjige8888님의 프로필 이미지
    ggamjige8888

    수강평 13

    ∙

    평균 평점 5.0

    5

    31% 수강 후 작성

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

      수강평 2

      ∙

      평균 평점 5.0

      5

      31% 수강 후 작성

      cursor ai 를 시작하기 좋아요

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

        수강평 7

        ∙

        평균 평점 5.0

        5

        31% 수강 후 작성

        • sund0410님의 프로필 이미지
          sund0410

          수강평 2

          ∙

          평균 평점 5.0

          5

          31% 수강 후 작성

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

            수강평 5

            ∙

            평균 평점 4.4

            4

            31% 수강 후 작성

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

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

            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

            기초부터 배우는 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

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

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

            도도(코딩루팡)

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

            입문

            입문

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

            비슷한 강의

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

            Next.js 완벽 마스터 (v15): Notion 기반 개발자 블로그 만들기 (with Cursor AI)강의 썸네일

            Next.js 완벽 마스터 (v15): Notion 기반 개발자 블로그 만들기 (with Cursor AI)

            짐코딩

            최신 Next.js v15 App Router를 학습하며 Notion 기반의 실용적인 개발자 블로그를 함께 구축하는 강의입니다. 추가로 Cursor AI 활용법 등 다양한 인사이트도 얻을 수 있습니다.

            초급

            초급

            Next.js, CursorAI, React

            React Router 완전 정복강의 썸네일

            React Router 완전 정복

            이웅재

            React 로 SPA를 만드는 모든 사람들에게 필수인 React Router를 함께 정복해보아요 💪

            초급

            초급

            react-router-dom, react-router, React

            [리액트 1부] 만들고 비교하며 학습하는 리액트 (React)강의 썸네일

            [리액트 1부] 만들고 비교하며 학습하는 리액트 (React)

            김정환

            리액트는 실무에서 가장 많이 찾는 인기있는 프론트엔드 기술입니다. 리액트 기술을 이용해 어플리케이션을 빠르게 개발하고 유지 보수 가능한 코드를 만들어 보세요.

            초급

            초급

            React, MVC

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

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

            깊알못nodeep

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

            입문

            입문

            TypeScript, IONIC, 하이브리드 앱

            아바타 커뮤니티앱 만들기 (React Native)강의 썸네일

            아바타 커뮤니티앱 만들기 (React Native)

            Kyo

            리액트 네이티브로 아바타 기반 커뮤니티앱을 개발합니다. 글작성 뿐만아니라 댓글/대댓글, 좋아요, 투표, 아바타 생성 등 완성도 있는 커뮤니티앱을 만드는 과정을 배우게 됩니다.

            초급

            초급

            React Native, TypeScript, react-query

            찍어먹는 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

            비전공자를 위한 진짜 입문 올인원 개발 부트캠프강의 썸네일

            비전공자를 위한 진짜 입문 올인원 개발 부트캠프

            그랩

            왕초보도 할 수 있는 웹, 서버, 모바일 앱, 머신러닝까지 익히는 끝판왕 풀스택 강의!! 개발을 어디서부터 시작할지 막막했다면 이 강의를 강력 추천할게요. Javascript 하나로 진행합니다!

            입문

            입문

            JavaScript, React, Node.js

            React Native with Expo: 제로초에게 제대로 배우기강의 썸네일

            React Native with Expo: 제로초에게 제대로 배우기

            제로초(조현영)

            웹 개발자가(특히 React 개발자라면) 정말 손쉽게 앱을 출시할 수 있는 시대가 되었습니다. Expo와 함께라면 더더욱 빠르게 Android와 iOS 앱 모두를 출시할 수 있습니다. Expo를 통해 빠르게 앱까지 출시할 수 있는 개발자가 되어봅시다.

            초급

            초급

            React, React Native, 하이브리드 앱

            파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)강의 썸네일

            파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)

            이진석

            파이썬/장고 웹서비스 개발의 기초를 탄탄히 다져보세요. 장고 학습에는 시간도 걸리지만, 반복되는 개발 속에 여러분의 생산성을 극대화하실 수 있습니다. 여러분의 상상을 현실로 만들어보세요.

            초급

            초급

            Python, Django, React

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

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

            도도(코딩루팡)

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

            초급

            초급

            React, ChatGPT, JavaScript

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

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

            John Ahn

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

            초급

            초급

            클론코딩, Node.js, React

            한 입 크기로 잘라먹는 타입스크립트(TypeScript)강의 썸네일

            한 입 크기로 잘라먹는 타입스크립트(TypeScript)

            이정환 Winterlood

            문법을 넘어 동작 원리와 개념 이해까지 배워도 배워도 헷갈리는 타입스크립트 이제 제대로 배워보세요! 여러분을 타입스크립트 마법사🧙🏻‍♀️로 만들어드립니다.

            초급

            초급

            TypeScript

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

            타입스크립트의 모든 것

            yongsoocho

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

            초급

            초급

            TypeScript, NestJS, Deno

            공식문서로 배우는 실전 타입스크립트강의 썸네일

            공식문서로 배우는 실전 타입스크립트

            어쩔코딩

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

            입문

            입문

            TypeScript, JavaScript, ES6

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

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

            코딩웍스(Coding Works)

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

            초급

            초급

            TailwindCSS, HTML/CSS

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

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

            제로초(조현영)

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

            중급이상

            중급이상

            Node.js, 웹앱, TypeScript

            무료