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

Name: React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)
Rating: 4.9 (39 reviews)

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

(4.9) 수강평 39개

수강생 2,122명

난이도 초급

수강기한 무제한

도도(코딩루팡)

토이프로젝트

gpt

api

토이프로젝트

gpt

api

먼저 경험한 수강생들의 후기

4.9

5.0

moonni99

33% 수강 후 작성

무료 공유 감사합니다.

5.0

김민호

33% 수강 후 작성

1. 짧게 요약해서 듣는 느낌입니다. 2. 전체적인 부분들을 조금씩 다루고 있는 것 같습니다. 3. 1시간에 전반적인 내용을 다루어서 가볍게 보기 좋을 듯 합니다.

5.0

parkang

100% 수강 후 작성

쉽고 간결하게 설명해 주셨네요 속도가 조금 빠른감이 있긴 하지만, 리액트를 안 해본 사람도 이해하기 쉬웠습니다. 너무 감사합니다.

수강 후 이런걸 얻을 수 있어요

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 기본

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

4,248

명

수강생

180

개

수강평

개

답변

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.

수강평

전체

39개

4.9

39개의 수강평

김민호
수강평 2
∙
평균 평점 5.0
2024. 10. 31.
5
33% 수강 후 작성
1. 짧게 요약해서 듣는 느낌입니다. 2. 전체적인 부분들을 조금씩 다루고 있는 것 같습니다. 3. 1시간에 전반적인 내용을 다루어서 가볍게 보기 좋을 듯 합니다.
마음을 녹이는 백로
수강평 5
∙
평균 평점 5.0
2024. 08. 07.
5
83% 수강 후 작성
감사합니다.
parkang
수강평 11
∙
평균 평점 5.0
2024. 10. 05.
5
100% 수강 후 작성
쉽고 간결하게 설명해 주셨네요 속도가 조금 빠른감이 있긴 하지만, 리액트를 안 해본 사람도 이해하기 쉬웠습니다. 너무 감사합니다.
moonni99
수강평 3
∙
평균 평점 5.0
2025. 06. 03.
5
33% 수강 후 작성
무료 공유 감사합니다.
ANNA
수강평 1
∙
평균 평점 5.0
2024. 08. 08.
5
100% 수강 후 작성
gpt를 활용해서 어떤식으로 프롬프트를 짜고 api를 어떻게 적용하는지 궁금했는데, 전체 과정을 쭉 볼 수 있어서 짧은 시간안에 너무 유익했습니다. 바로 활용해서 간단하게 만들어 볼 수 있을 것 같아요. 좋은 강의 감사합니다!
- 도도(코딩루팡)
  지식공유자
  2024. 08. 08.
  안녕하세요! 수강평 남겨주셔서 정말 감사해요! GPT를 활용해서 프롬프트 짜는 방법과 API 적용 방법에 대해 궁금하셨다니 반갑네요. 전체 과정을 쭉 볼 수 있어서 짧은 시간 안에 유익했다니 저도 기쁩니다. 바로 활용해서 간단한 프로젝트를 만들어 볼 수 있을 것 같다는 말씀도 너무 좋네요! 강의가 도움이 되었다니 정말 보람차고, 앞으로도 여러분들이 쉽게 따라할 수 있도록 더 좋은 강의 만들기 위해 노력할게요. 혹시나 더 궁금한 점이 생기거나 도움이 필요하시면 언제든지 질문해 주세요! 항상 여러분의 학습을 응원합니다. 다시 한번 감사드리고, 좋은 하루 보내세요!

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

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

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

도도(코딩루팡)

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

초급

Next.js, supabase, React

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

도도(코딩루팡)

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

도도(코딩루팡)

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

입문

nextjs, ChatGPT, React

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

도도(코딩루팡)

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

도도(코딩루팡)

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

초급

Next.js, React, TailwindCSS

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

도도(코딩루팡)

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

도도(코딩루팡)

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

입문

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

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

도도(코딩루팡)

비슷한 강의

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

React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발

코딩의세계 한태재

React와 Three.js 를 한번에! 3D 기초부터 현업에 사용할 수 있는 프로젝트 그리고 최적화 팁 까지 !

초급

인터랙티브 웹, react-three-fiber, Three.js

React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발

코딩의세계 한태재

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)

코딩웍스(Coding Works)

HTML+CSS+JS 실전 포트폴리오(시즌2)는 중급 퍼블리싱으로 다양한 실전 예제 학습을 통해 퍼블리싱 중급 실력을 위한 퍼블리싱 기본기를 익히시게 됩니다. 특히, 다양한 실전 예제와 전체 반응형 웹사이트 제작을 통해 중급 퍼블리싱에 자신감이 생기고 수업한 작업물을 통해 취업을 위한 개인 포트폴리오로 귀중한 자료가 툅니다. 38시간 가까운 충분한 학습량과 실전 예제를 통한 중급 퍼블리시 노하우를 익히게 되는 퍼블리싱 수업입니다.

초급

HTML/CSS, jQuery, JavaScript

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)

코딩웍스(Coding Works)

HTML5 + CSS3 + JavaScript

엘리홍

이 강의는 웹 개발의 기초인 HTML5, CSS3, JavaScript를 중심으로 프론트엔드 개발의 핵심 기술을 체계적으로 익히는 과정입니다. 수강생은 웹 페이지의 구조 설계부터 스타일링, 동적 기능 구현까지의 전체 흐름을 실습을 통해 배우며, 실제 프로젝트 기반 학습을 통해 실무 역량을 강화할 수 있습니다.

입문

JavaScript, html5, css3

HTML5 + CSS3 + JavaScript

엘리홍

제임스코딩 풀스택 개발 입문 5주 완성

제임스코딩

제임스코딩 과정은 풀스택 심화 커리큘럼 시작 전, 웹 개발의 기본기를 함양할 수 있는 풀스택 개발 입문 과정입니다. 여러분은 제임스코딩 풀스택 개발 입문 5주 완성을 통해 프로그래밍과 자바스크립트의 기초를 탄탄하게 다질 수 있습니다.

입문

HTML/CSS, JavaScript, Git

제임스코딩 풀스택 개발 입문 5주 완성

제임스코딩

모던 자바스크립트(ES6+) 기본

김영보

4개 강좌로 구성된 자바스크립트 바이블 강좌의 3번째 강좌입니다. 자바스크립트 스펙의 95% 이상을 다룹니다. ES6+ 환경에서 새로운 패러다임의 프로그램을 개발할 수 있습니다.

초급

JavaScript, ES6

모던 자바스크립트(ES6+) 기본

김영보

따라하며 배우는 타입스크립트 A-Z

John Ahn

이 강의를 통해 타입스크립트에 대해서 배울 수 있습니다.

초급

TypeScript, JavaScript

따라하며 배우는 타입스크립트 A-Z

John Ahn

[Electron #1] Electron + React로 만드는 타이머 앱 (With Zustand)

닭강정

React, Electron, Zustand를 활용해 타이머 앱을 직접 제작하고 크로스 플랫폼(윈도우, 맥 OS, 리눅스)으로 배포까지 하는 실전 강의입니다. 익숙한 React 웹 개발을 시작으로, Zustand를 통한 전역 상태 관리와 최종 GUI 배포까지, 데스크톱 앱 개발의 전체 흐름을 배우실 수 있습니다!

초급

React, Electron, GUI

[Electron #1] Electron + React로 만드는 타이머 앱 (With Zustand)

닭강정

웹 프로그래밍(HTML5+CSS+javaScript)

국립안동대학교 SW융합교육원

초급자를 위한 웹 프로그래밍 강의입니다. HTML, CSS, JavaScript의 기본 문법과 활용법을 단계적으로 학습할 수 있도록 구성되었습니다. 웹 페이지 구조 및 디자인, 상호작용 기능 구현 등 웹 개발의 핵심 요소를 다루고 있습니다.

입문

HTML/CSS, JavaScript, 반응형 웹

웹 프로그래밍(HTML5+CSS+javaScript)

국립안동대학교 SW융합교육원

자바스크립트 ES6+ 기초 핵심 문법

이룸코딩

자바스크립트에 처음 입문하시는 분들이 모던 자바스크립트에 대해 알아야 하는 핵심 문법을 짧고 굵게 정리했습니다. 문법 공부는 한 번에 확실하게 그리고 짧게 끝내고, 소중한 시간은 무언가 만드는데 투자하세요!

초급

JavaScript, ES6

자바스크립트 ES6+ 기초 핵심 문법

이룸코딩

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

이진석

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

초급

Python, Django, React

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

이진석

모바일, 태블릿, pc 반응형 인스타그램 클론코딩

더코딩클럽

이 강의를 통해 수강생은 HTML, CSS, JS로 인스타그램과 비슷한 웹서비스를 만들 수있습니다. ( 프론트만 구현했습니다! 백엔드 서버 구축은 차후 강의 촬영 예정입니다.)

초급

HTML/CSS, JavaScript, 클론코딩

모바일, 태블릿, pc 반응형 인스타그램 클론코딩

더코딩클럽

[VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)

코드캠프

10분만에 바이브코딩으로 만들 수 있는 단순한 서비스는 이제 버리세요! '진짜' 실무적용 바이브코딩을 배울 수 있습니다. 기획과 디자인대로 실서비스 수준의 고도화된 서비스를 커서AI NCOP로 만들어보시죠. No Code, Only Prompt

중급이상

React, Next.js, cursor

[VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)

코드캠프

카페 24 베스트 쇼핑몰 디자인 클론코딩하기 (HTML + CSS)

같이코딩

카페 24에 올라온 베스트 쇼핑몰 디자인을 직접 클론코딩해보며 빠르게 HTML과 CSS를 학습할 수 있습니다. HTML + CSS에 대한 기본적인 이론을 학습하고 직접 클론코딩을 통해 쇼핑몰 디자인을 완성하여 이론에서 배웠던 내용을 적용하고 견고하게 HTML과 CSS의 틀을 잡을 수 있게 강의를 구성했습니다

입문

클론코딩, HTML/CSS, 웹 디자인

카페 24 베스트 쇼핑몰 디자인 클론코딩하기 (HTML + CSS)

같이코딩

코로나맵 개발자가 알려주는 React + Express로 지도서비스 만들기 (Typescript)

이동훈

MERN stack (feat. TypeScript) 을 활용한 지도 서비스를 처음부터 끝까지 만들어보는 강의입니다. API 공식 문서를 보며 차근차근 하나씩 만들어 봅시다.

초급

MongoDB, Express, React

코로나맵 개발자가 알려주는 React + Express로 지도서비스 만들기 (Typescript)

이동훈

코알못에서 웹서비스 런칭까지 : 2021 제주 코딩 베이스캠프(Django)

제주코딩베이스캠프

제주에서 진행하는 부트캠프를 온라인으로! 빠르게 자신만의 서비스를 만들어보세요! :)

입문

Python, HTML/CSS, JavaScript

코알못에서 웹서비스 런칭까지 : 2021 제주 코딩 베이스캠프(Django)

제주코딩베이스캠프

테스트주도개발(TDD)로 만드는 NodeJS API 서버

김정환

이 강의에서는 Javascript 언어로 백엔드 개발을 할 수 있는 NodeJS를 학습하고, 테스트 주도 개발(TDD) 방법으로 NodeJS를 이용해 API 서버 개발을 할 수 있습니다. 또한 NodeJS의 대표적인 웹 프레임워크 ExpressJS의 기초 원리를 이해하고, 모바일과 웹 서비스에서 사용하는 REST API 개발 방법을 학습할 수 있습니다.

초급

TDD, Node.js, Express

테스트주도개발(TDD)로 만드는 NodeJS API 서버

김정환

AI 웹개발 실전 프로젝트 (Stitch · Figma Make · React)

이지웹

"생성형 AI를 활용해 기획·디자인·구현·배포까지 완성하는 웹개발 실전 프로젝트 강의" 아이디어 구상부터 시작해서, AI로 디자인 뚝딱 만들고, React로 실제 작동하는 웹사이트 구현, 그리고 인터넷에 배포까지 - 모든 과정을 차근차근 함께 완성합니다. Stitch와 Figma Make 같은 최신 AI 도구들이 디자인 작업을 도와주고, 복잡한 코딩도 단계별로 쉽게 따라할 수 있게 알려드려요.

초급

React, Figma, stitch

AI 웹개발 실전 프로젝트 (Stitch · Figma Make · React)

이지웹

SpringAI + React로 만들어보는 나만의 감정일기 서비스

Neo

SpringAI + React로 만들어보는 나만의 감정일기 서비스 Neo + Essential과 함께 만들어보는 4번째 프로젝트 시간입니다!

초급

React, Kotlin, Spring Boot

SpringAI + React로 만들어보는 나만의 감정일기 서비스

Neo

실무중심의 HTML5 시각화 프로그래밍

트레이딩온

데이터를 가공하여 표의 형태로 표현할 수도 있지만 가장 중요한 것은 데이터를 인간이 한 눈에 알아 볼 수 있게 표현하는 것입니다.

초급

HTML/CSS

실무중심의 HTML5 시각화 프로그래밍

트레이딩온

[PROKIT] 바이브코딩/프론트엔드 연습용 문제집: 타이머 앱 만들기

닙스(NYBS)

개발 프로젝트를 위한 미션 콘텐츠입니다. DevTime이라는 타이머 앱을 직접 구현해보면서 프로젝트 실습을 해볼 수 있도록 PRD 기획 문서, Figma 시안, API 엔드포인트를 제공합니다. 실제 서비스와 유사한 수준의 프로젝트를 구현해 보면서 그동안 학습한 지식을 완벽하게 자신의 것으로 만들어 보세요 🚀

입문

React

[PROKIT] 바이브코딩/프론트엔드 연습용 문제집: 타이머 앱 만들기

닙스(NYBS)

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

먼저 경험한 수강생들의 후기

4.9

수강 후 이런걸 얻을 수 있어요

이런 분들께추천합니다.

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

강의 특징 ✨

학습 내용 📚

예상 질문 Q&A 💬

수강 전 참고 사항 📢

실습 환경

선수 지식 및 유의사항

지식공유자 소개 ✒️

이런 분들께 추천드려요

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

커리큘럼

수강평

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

비슷한 강의

이런 분들께
추천합니다.

이런 분들께
추천드려요

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