개발 · 프로그래밍

프론트엔드

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

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

(4.8) 수강평 29개

수강생 1,959명

도도(코딩루팡)

React ChatGPT JavaScript HTML/CSS Node.js

초급자를 위해 준비한
[AI · ChatGPT 활용] 강의입니다.

이런 걸 배울 수 있어요

ChatGPT Prompt
웹개발 (기초)
React ( Vite, Styled-component, Antd )
GPT API 연동

GPT API를 이용하여 만드는
React 기반 AI 서비스 💻

요즘 프론트는 React가 대세라던데, 1시간만에 쓸만한 서비스를 만들어 볼 수는 없을까요?

GPT API 를 이용해서 React 기반의 AI 서비스 - 심리 상담사 GPT, AI 회고록을 만들어봅니다.
단 한 시간만에, 무료로 최신 기술을 활용합니다!

이런 분들께
추천합니다.

_{웹 기반의
GPT 서비스를
만들고 싶은 사람}

_{웹 개발을
흥미롭게
시작하고 싶은 사람}

_{리액트 개발을
맛보고
싶은 사람}

이 강의를 통해 배울 수 있는 것

React 기반의 웹 어플리케이션을 제작
Chat GPT의 프롬프트를 개발 서비스와 연동
React 개발 전반의 과정을 학습. ( 이벤트, 입력처리, 스타일링, API 연동 )

강의 특징 ✨

실습 위주로 코드를 작성합니다.
긴 설명없이 바로 서비스를 제작하는데 필요한 개념만 학습합니다.
간단한 서비스 기획과 GPT Prompt을 이용해서 Backend API를 제작합니다.
리액트를 몰라도 간단한 웹지식을 기반으로 서비스를 제작할 수 있습니다.

학습 내용 📚

만들어볼 서비스! 미리보기

1. 사용자가 오늘 있던 일을 적습니다.
2. 심리상담사 GPT가, 글을 완성해 줍니다.
3. 심리분석과 조언까지 해드려요.

예상 질문 Q&A 💬

Q. GPT API 호출은 유료 인가요?
A. 처음 회원가입하면 무료로 사용할 수 있는 크레딧을 줍니다. 그 기간이 끝나면 결제가 필요해요.

Q. 코드를 놓쳤어요.
A. 깃허브에 공개된 소스코드를 가져다 쓰시면 됩니다.!

github : https://github.com/dodokyo/gpt-diary-service

수강 전 참고 사항 📢

실습 환경

M1 Mac Book Air 환경에서 실습을 진행합니다.

선수 지식 및 유의사항

약간의 HTML/CSS/JS 지식을 바탕으로 강의 제작.
눈치가 좋은 사람은 없어도 수강 가능!

지식공유자 소개 ✒️

IT 서비스 대기업에 웹개발자로 재직중 입니다.!
코딩 루팡이라는 Youtube 채널을 운영하고 있어요.

주제 : 취업 / 웹개발 강의

이런 분들께
추천드려요!

학습 대상은
누구일까요?

처음 리액트를 재밌게 배우고 싶은 사람
GPT기반의 나만의 웹서비스를 만들고 싶은 사람

선수 지식,
필요할까요?

약간의 HTML/CSS/JS 기본

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

3,343

명

수강생

125

개

수강평

개

답변

4.8

점

강의 평점

개

강의

프론트 개발자로 네카라쿠배 중 하나의 IT서비스 기업에 재직하고 있습니다. 😀
🚀 SW마에스트로 Expert 취업 멘토링
🚀 Naver Boostcamp BE 멘토 경험
🚀 FE 7Code 로드맵 강의 제작

커리큘럼

전체

12개 ∙ (59분)

섹션 1. 소개영상

1개 ∙ (2분)

1. 소개 영상
02:29

섹션 2. GPT Prompt 개발 및 서비스 정의

3개 ∙ (13분)

2. GPT Prompt 사용법 1
04:34
3. GPT Prompt 사용법 2
04:58
4. GPT AI 회고록 서비스 기획
03:53

섹션 3. React 기초 - 설치, Counter

3개 ∙ (11분)

5. 리액트 개발환경 및 설치
02:55
6. 리액트 프로젝트 구조
02:39
7. 리액트 Counter 예제
05:36

섹션 4. React 개발 - GPT API 연동, AI회고록 서비스 완성

5개 ∙ (32분)

강의 게시일: 2023. 09. 25.

마지막 업데이트일: 2023. 09. 26.

수강평

전체

29개

4.8

29개의 수강평

박성재
수강평 1
∙
평균 평점 5.0
2025. 05. 05.
5
67% 수강 후 작성
angelwan001
수강평 61
∙
평균 평점 4.6
2025. 04. 13.
5
100% 수강 후 작성
김민호
수강평 2
∙
평균 평점 5.0
2024. 10. 31.
5
33% 수강 후 작성
1. 짧게 요약해서 듣는 느낌입니다. 2. 전체적인 부분들을 조금씩 다루고 있는 것 같습니다. 3. 1시간에 전반적인 내용을 다루어서 가볍게 보기 좋을 듯 합니다.
유니
수강평 11
∙
평균 평점 5.0
2025. 01. 19.
5
25% 수강 후 작성
ksw Ko
수강평 2
∙
평균 평점 4.5
2024. 10. 08.
5
100% 수강 후 작성
- 도도(코딩루팡)
  지식공유자
  2024. 10. 10.
  수강평 감사합니다.~

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

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

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

도도(코딩루팡)

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

초급

Next.js, supabase, React

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

도도(코딩루팡)

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

입문

nextjs, ChatGPT, React

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

도도(코딩루팡)

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

입문

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

비슷한 강의

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

Electron과 NodeJS 그리고 Socket.io를 이용한 채팅 어플리케이션 개발

김지운

강의의 내용을 바탕으로 기본적인 채팅어플리케이션 작성과 Electron 과 NodeJS의 기본적인 구조에 대해 알아간다.

초급

Node.js, Electron, Socket.io

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

antonio

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

초급

Next.js, React, PostgreSQL

리액트(React.js)를 이용한 나만의 유튜브 사이트 만들기 프로젝트

webstoryboy

강의를 통해 React 프레임워크와 YouTube API를 이용하여 자신만의 리액트 유튜브 영상 사이트를 만들어봅니다. React의 기본 개념을 이해하고, 컴포넌트를 구조화하고 상태를 관리하는 방법을 학습하게 될 것입니다. 또한 YouTube Data API를 활용하여 외부 데이터를 가져오는 방법을 익히고, API 응답을 처리하여 사용자에게 의미 있는 정보를 제공하는 방법을 이해하게 됩니다. 이로써 자신만의 유튜브 사이트를 만들고, 활용하는 것을 목표로 합니다.

초급

React, HTML/CSS, JavaScript

생성AI로 마케팅 쉽고 빠르게 끝장내기

박형주

쉽고 빠르게 마케팅을 추진하고 싶나요? 빠르고 비용효율적으로 마케팅을 하고 싶은데 디자이너, 개발자, 기획자 등과 협업이 어렵나요? 부족한 예산으로 최대 마케팅 효과를 내야 하는 상황인가요? 이제 고민하지 말고 생성AI와 함께 협업하세요.

입문

ChatGPT, RPA, 디지털 마케팅

React와 Vue로 배우는 TypeScript 필수 개념 (feat. ChatGPT)

장기효(캡틴판교)

실무에서 많이 사용되는 React와 Vue의 코드를 작성하면서 타입스크립트 필수 개념을 익히는 강의입니다. React와 Vue에 타입을 입히는 방법, ChatGPT 사용법까지 모두 잡는 실무자와 입문자 모두를 위한 강의!

초급

React, TypeScript, Vue.js

닮은 연예인 찾기 서비스 제작 With 티처블머신

제주코딩베이스캠프

머신러닝에 대한 이해가 전혀 없어도! Google의 티처블머신과 HTML, CSS, JS로 있어보이는 프로젝트를 만드실 수 있습니다. 함께 비슷한 연예인 찾는 서비스를 만들어봐요!

초급

HTML/CSS, 머신러닝, Teachable Machine

챗 GPT를 활용한 파이썬 프로그래밍

쌤즈(SSAMZ)

파이썬의 기본 문법과 인기 있는 라이브러리를 활용 챗GPT를 활용한 파이썬 문법과 라이브러리 코드 자동 생성

초급

Python, ChatGPT, 웹 크롤링

왕초보를 위한 ChatGPT로 배우는 파이썬

SKm&service

ChatGPT에게 받는 맞춤형 일대일 파이썬 코딩 과외! 코드를 읽고 쓸 수 있는 힘, 코딩 리터러시(Coding literacy) 역량을 키워보셔요!

입문

Python, ChatGPT

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

그랩

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

입문

JavaScript, React, Node.js

생성형 AI를 활용한 세상에서 제일 쉬운 파이썬 개발 클래스

Masocampus

코딩은 AI가, 성과는 내가! 입문자도 가능한 실무 프로그래밍 역량 극대화!

입문

ChatGPT, Python, github-copilot

순수 html/css/js만을 활용한 반응형웹 제작[실전편] 부트캠프

영코디 킴쌤

부트스트랩(BOOTSTRAP)을 사용하지 않고 순수하게 html/css/js 만을 활용하여 디바이스별로 다양한 레이아웃을 구현할 수 있는 반응형 웹페이지 만들기[2024년 최신판] 수업의 실전 제작수업입니다.

초급

HTML/CSS, 반응형 웹, 인터랙티브 웹

공식으로 배우는 챗GPT 프롬프트 만들기 사용법 강의

감자나라ai

챗GPT의 프롬프트를 만드는 "공식"을 알려드립니다. 이 공식에만 적용하면 좋은 프롬프트가 쏟아져 나옵니다.

초급

인공지능(AI), ChatGPT, 프롬프트엔지니어링

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

이진석

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

초급

Python, Django, React

[개발부터 수익화까지] AI로 코드 한 줄 짜지 않고 만드는 IT 올인원 실전 프로젝트!

치트키 알려주는 남자

AI와 그누보드를 활용해, IT 초보라도 아이디어 하나로 ‘나만의 플랫폼 CEO’가 되는 시대! 기획부터 배포까지 실제 개발 과정을 낱낱이 시연하고, 광고·쇼핑몰 등 다양한 수익화 방법까지 알려드립니다. 지금 바로 온라인 비즈니스를 시작하세요!

초급

Java, PHP, HTML/CSS

ChatGPT 실무에 100% 활용하기

longvacation

불필요한 내용은 전부 제외하고, ChatGPT 100% 활용법을 "핵심"만 알려드립니다. 잘 활용한다면 MD, 마케팅 업무를 10배 빠르게 하실 수 있을 거예요.

입문

ChatGPT, Python, 웹 크롤링

[ChatGPT 실무 데이터 분석] 런던 MBA 학생들이 열광한 수강평 5.0 만점 강의: 문과출신 비전공자도 현업에서 바로 써먹는 데이터분석 실무 역량과 취준 완성!

영국교수

"아직도 코딩 책 보고 공부하세요?" 현직 런던 경영대에서 MBA 대학원생들과 경영학부 대학생들에게 수강평 5.0 만점 받은 강의. AI 데이터 분석 강의를 집에서 들으실 수 있습니다. 문과출신 비전공자도 현업에서 바로 써먹는 데이터분석 실무 역량과 취준 완성을 위한 데이터 분석 포트폴리오까지. 코딩에 대한 지식 없이도 ChatGPT를 활용해서 데이터 분석 및 프로젝트 수업을 가르치고 있는 영국교수(British Professor)입니다.

초급

Python, 업무 생산성, EDA

ChatGPT 100% 활용하여 배우는 파이썬 네트워크 프로그래밍 A to Z

고카

파이썬과 ChatGPT를 100% 활용하여 네트워크 프로그래밍을 처음부터 배웁니다. 지루한 개념 설명보다는 실습을 통해 수강생들이 직접 네트워크 코드를 작성하고, 작성한 프로그램이 어떻게 동작하는지 직접 확인하는 데 초점을 맞추고 있습니다. 기본적인 네트워크 실습부터 실무에서 적용 가능한 네트워크 기술까지 습득할 수 있으며, 다양한 프로토콜과 도구를 다루는 실습을 통해 깊이 있는 이해와 실력을 쌓을 수 있습니다. 또한, ChatGPT를 활용함으로써, 수강생들은 어려움과 지루함을 느끼지 않고, 기억에 오래 남는 학습 경험을 할 수 있습니다.

초급

Python, ChatGPT, 네트워크