React + GPT APIでAI回顧録サービス開発（ワンデイクラス）

1時間で終えるReactベースのGPT AIサービス講義受講後、自分だけのAI GPT SASSソリューションを構築してみましょう。

（4.9）受講レビュー 35件

受講生 2,055名

dodocoding

토이프로젝트

gpt

api

React

ChatGPT

JavaScript

HTML/CSS

Node.js

学習した受講者のレビュー

こんなことが学べます

チャットGPT プロンプト
ウェブ開発 (基礎)
React ( Vite, Styled-component, Antd )
GPT API 連携

GPT APIを使用して作成
ReactベースのAIサービス💻

最近、フロントはReactが大勢だったのですが、1時間で使えるサービスを作ることはできませんか？

GPT APIを使用して、ReactベースのAIサービス - 心理カウンセラーGPT、AI回顧録を作成します。
たった1時間で、無料で最新技術を活用します！

こんな方へ
おすすめです。

_{Webベース
GPTサービス
作りたい人}

_{Web開発
興味深い
始めたい人}

_{リアクト開発
味見
したい人}

この講義を通して学べるもの

ReactベースのWebアプリケーションを作成
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チャンネルを運営しています。

トピック：就職/ウェブ開発講義

こんな方に
おすすめです

学習対象は
誰でしょう？

初めてReactを楽しく学びたい人
GPTベースの自分だけのウェブサービスを作りたい人

前提知識、
必要でしょうか？

少しの HTML/CSS/JS の基本

こんにちは
です。

3,852

受講生

155

受講レビュー

回答

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 基礎 - 設置、カウンター

3件 ∙ (11分)

5. リアクト環境構築
02:55
6. React プロジェクト構造
02:39
7. リアクトカウンター例
05:36

セクション 4．React 開発 - GPT API 連携, AI回顧録サービス完成

5件 ∙ (32分)

講座掲載日:

最終更新日:

受講レビュー

全体

35件

4.9

35件の受講レビュー

조대일
受講レビュー 2
∙
平均評価 4.5
5
67% 受講後に作成
1027.bmy
受講レビュー 1
∙
平均評価 5.0
5
33% 受講後に作成
황유민
受講レビュー 2
∙
平均評価 5.0
5
33% 受講後に作成
moonni99
受講レビュー 3
∙
平均評価 5.0
5
33% 受講後に作成
무료 공유 감사합니다.
현성
受講レビュー 5
∙
平均評価 3.6
4
100% 受講後に作成
좀 더 깊은 이해를 하고 싶었는데 겉핡기만 하는 느낌이네여.

無料

dodocodingの他の講座

知識共有者の他の講座を見てみましょう！

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

도도(코딩루팡)

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

Basic

Next.js, supabase, React

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

도도(코딩루팡)

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

도도(코딩루팡)

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

Beginner

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 중점으로 웹프론트 기초를 마스터 할 수 있어요.!

Basic

Next.js, React, TailwindCSS

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

도도(코딩루팡)

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

도도(코딩루팡)

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

Beginner

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

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

도도(코딩루팡)

似ている講座

同じ分野の他の講座を見てみましょう！

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

코딩의세계 한태재

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

Basic

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

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

코딩의세계 한태재

Cursor AI로 만들면서 배우는 Web & Javascript

주말코딩

나만의 기술을 가지고 싶으신 분, 웹 개발을 차근차근 배워보고 싶으신 분에게 추천드립니다. 웹 브라우저와 언어의 역사부터 가르쳐드립니다.

Beginner

HTML/CSS, JavaScript, LLM

Cursor AI로 만들면서 배우는 Web & Javascript

주말코딩

[자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)

닭강정

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

Basic

React, Electron, GUI

[자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)

닭강정

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

더코딩클럽

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

Basic

HTML/CSS, JavaScript, 클론코딩

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

더코딩클럽

누구나 쉽게 시작하는 웹개발 기초 (Basic Web Development Course)

부산대학교 소프트웨어융합교육원

기본적인 웹사이트 구축 방법을 습득하고, 공공데이터 Open API를 연계한 실전 프로젝트를 통해 웹 개발의 기초부터 실무 적용 능력까지!

Beginner

HTML/CSS, JavaScript, openAI API

누구나 쉽게 시작하는 웹개발 기초 (Basic Web Development Course)

부산대학교 소프트웨어융합교육원

제대로 배우는 JavaScript: 객체지향 프로그래밍 완성 & 전략형 AI 틱택토 실전 Part2 [중급편]

nhcodingstudio

📌 이 강의는 전략형 AI 틱택토 프로젝트로 시작해, 객체지향 프로그래밍의 핵심 개념까지 실전 예제로 완성하는 커리큘럼입니다. 게임 구현으로 로직 설계와 AI 전략 사고를 훈련하고, 이어서 상속, 조합, 위임, 캡슐화 같은 OOP 설계 기술을 직접 코드로 경험합니다. 실제 프로젝트로 문법을 넘어서 ‘설계하는 개발자’로 성장하고 싶은 분께 추천드립니다.

Basic

JavaScript, HTML/CSS, 객체지향

제대로 배우는 JavaScript: 객체지향 프로그래밍 완성 & 전략형 AI 틱택토 실전 Part2 [중급편]

nhcodingstudio

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

이진석

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

Basic

Python, Django, React

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

이진석

리액트 기초 (Introduction to React)

부산대학교 소프트웨어융합교육원

리액트를 활용한 웹 애플리케이션 개발 능력을 갖추고 실무에 적용할 수 있는 역량을 키워보자!

Basic

React, hook, react-router

리액트 기초 (Introduction to React)

부산대학교 소프트웨어융합교육원

Javascript ES6+ 제대로 알아보기 - 초급

정재남

ES6+ 제대로 알아보기 강좌는 Javascirpt의 ES6 및 이후의 표준 ECMAScript 명세에 대하여 이론을 바탕으로 ES5와 달라진 점 및 개념과 동작 원리를 깊이 있게 알려드립니다.

Basic

JavaScript, ES6

Javascript ES6+ 제대로 알아보기 - 초급

정재남

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

Jiwoon Jeong

내가 좋아하는 유튜버의 맛집지도를 만들면서 프론트엔드, 백엔드, 카카오맵 API 사용법, 배포까지 한번에 배울 수 있는 풀스택 맛집지도 강의입니다.

Basic

HTML/CSS, JavaScript, REST API

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

Jiwoon Jeong

웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT

깡코딩

웹게임도 만들고, 프론트엔드 웹 개발 스킬도 배우는 1석 3조 수업! 독자적인 아이디어로 JavaScript, CSS, HTML을 활용해 게임을 만들 수 있는 방법을 수업으로 만들었습니다!

Basic

인터랙티브 웹, JavaScript, HTML/CSS

웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT

깡코딩

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

도도(코딩루팡)

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

Beginner

nextjs, ChatGPT, React

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

도도(코딩루팡)

따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]

John Ahn

이 강의를 통해서 리액트와 파이어베이스를 이용해서 채팅 어플리케이션을 만들수 있습니다.

Basic

React, Firebase, 웹앱

따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]

John Ahn

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

제로초(조현영)

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

Basic

React, React Native, 하이브리드 앱

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

제로초(조현영)

아직도 살아 있는 불사의 jQuery - 기초 부터 실무까지

이지웹

전세계 웹사이트에서 75%이상이 사용하고 있는 javascript 라이브러리 jQuery ! 화려한 효과보다는 원리를 이해하며 기본기를 다질수 있도록 구성했습니다. 제이쿼리 기초부터 활용까지 학습하여 여러분만의 포트폴리오를 완성하거나, 현업에서 바로 활용해보세요.

Basic

HTML/CSS, JavaScript, jQuery

아직도 살아 있는 불사의 jQuery - 기초 부터 실무까지

이지웹

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

코드캠프

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

Intermediate

React, Next.js, cursor

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

코드캠프

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

같이코딩

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

Beginner

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

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

같이코딩

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

김정환

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

Basic

TDD, Node.js, Express

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

김정환

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

김지운

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

Basic

Node.js, Electron, Socket.io

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

김지운

Javascript ES6+ 제대로 알아보기 - 보너스

정재남

Basic

JavaScript, ES6

Javascript ES6+ 제대로 알아보기 - 보너스

정재남

React + GPT APIでAI回顧録サービス開発（ワンデイクラス）

学習した受講者のレビュー

こんなことが学べます

こんな方へおすすめです。

この講義を通して学べるもの

講義の特徴✨

学習内容📚

予想される質問 Q&A 💬

受講前の注意事項📢

練習環境

選手の知識と注意事項

知識共有者の紹介✒️

こんな方に おすすめです

こんにちは .css-1q3zd4q{text-decoration-line:underline;text-underline-position:under;text-underline-offset:1px;}です。

カリキュラム

受講レビュー

dodocodingの他の講座

似ている講座

こんな方へ
おすすめです。

こんな方に
おすすめです

こんにちは
です。