강의

N
챌린지

멘토링

로드맵

Inflearn brand logo image
Programming

/

Front-end

Developing AI Memoir Service with React + GPT API (One-Day Class)

React-based GPT AI Service: Complete in 1 Hour After taking the lecture, build your own AI GPT SASS solution.

(4.9) 34 reviews

2,039 learners

  • dodocoding
토이프로젝트
gpt
api
React
ChatGPT
JavaScript
HTML/CSS
Node.js

Reviews from Early Learners

What you will learn!

  • ChatGPT Prompt

  • Web Development (Basic)

  • React ( Vite, Styled-component, Antd )

  • GPT API Integration

Created using GPT API
React-based AI service 💻

I heard React is the trend these days for front-end development. Is it possible to create a usable service in just an hour?

Let's create a React-based AI service using the GPT API - GPT, a psychological counselor, and an AI memoir.
Get access to cutting-edge technology for free, in just one hour!

To these people
I recommend it.

Web-based
GPT service
The person I want to create

Web development
Interestingly
People who want to start

React development
Taste it
People who want to

What you will learn from this course

  • Build a React-based web application
  • Integrate Chat GPT's prompts with your development service
  • Learn the entire React development process (events, input processing, styling, API integration).

Lecture Features ✨

  • I write code with a focus on practice.
  • Learn only the concepts needed to create a service right away without lengthy explanations.
  • We will create a backend API using simple service planning and GPT Prompt.
  • Even if you don't know React, you can create a service based on simple web knowledge.

What you'll learn 📚

A service to create! Preview

  • 1. The user writes down what happened today.
  • 2. GPT, a psychological counselor, completes the writing.
  • 3. We provide psychological analysis and advice.

Expected Questions Q&A 💬

Q. Are GPT API calls paid?
A. When you first sign up, you'll receive free credits. After that credit expires, you'll need to pay for it.

Q. I missed the code.
A. You can use the source code published on GitHub.

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

Things to note before taking the course 📢

Practice environment

  • We will conduct hands-on training in an M1 Mac Book Air environment.

Player Knowledge and Precautions

  • Lectures created based on some HTML/CSS/JS knowledge.
  • Anyone can take this course even if they are not very perceptive!

Introducing the Knowledge Sharer ✒️

I am currently working as a web developer at a major IT service company.!
I run a YouTube channel called Coding Lupin .

  • Topic: Employment/Web Development Lecture

Recommended for
these people

Who is this course right for?

  • Beginners who want fun React learning.

  • A person who wants to create their own GPT-based web service

Need to know before starting?

  • Basic HTML/CSS/JS

Hello
This is

3,707

Learners

146

Reviews

85

Answers

4.8

Rating

5

Courses

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

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

  • 🚀 Naver Boostcamp BE 멘토 경험

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

Curriculum

All

12 lectures ∙ (59min)

Published: 
Last updated: 

Reviews

All

34 reviews

4.9

34 reviews

  • 조대일님의 프로필 이미지
    조대일

    Reviews 2

    ∙

    Average Rating 4.5

    5

    67% enrolled

    • 1027.bmy님의 프로필 이미지
      1027.bmy

      Reviews 1

      ∙

      Average Rating 5.0

      5

      33% enrolled

      • 황유민님의 프로필 이미지
        황유민

        Reviews 2

        ∙

        Average Rating 5.0

        5

        33% enrolled

        • moonni99님의 프로필 이미지
          moonni99

          Reviews 3

          ∙

          Average Rating 5.0

          5

          33% enrolled

          무료 공유 감사합니다.

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

            Reviews 5

            ∙

            Average Rating 3.6

            4

            100% enrolled

            좀 더 깊은 이해를 하고 싶었는데 겉핡기만 하는 느낌이네여.

            Free

            dodocoding's other courses

            Check out other courses by the instructor!

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

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

            도도(코딩루팡)

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

            입문

            입문

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

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

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

            도도(코딩루팡)

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

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

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

            도도(코딩루팡)

            1시간만에 Chat GPT 클론 with Cursor (원데이 클래스)강의 썸네일

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

            도도(코딩루팡)

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

            입문

            입문

            nextjs, ChatGPT, React

            1시간만에 Chat GPT 클론 with Cursor (원데이 클래스)강의 썸네일

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

            도도(코딩루팡)

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

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

            도도(코딩루팡)

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

            초급

            초급

            Next.js, supabase, React

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

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

            도도(코딩루팡)

            Similar courses

            Explore other courses in the same field!

            R3F(React + Three.js / Typescript)로 인터렉티브 포트폴리오 만들기강의 썸네일

            R3F(React + Three.js / Typescript)로 인터렉티브 포트폴리오 만들기

            코딩의세계 한태재

            React와 Three.js 를 한번에! 인터렉티브 웹의 기초인 Vector부터 GSAP까지 배울 수 있어요. 3가지 예제를 하나의 포트폴리오로 통합하는 팁과 노하우!

            초급

            초급

            인터랙티브 웹, Three.js, TypeScript

            R3F(React + Three.js / Typescript)로 인터렉티브 포트폴리오 만들기강의 썸네일

            R3F(React + Three.js / Typescript)로 인터렉티브 포트폴리오 만들기

            코딩의세계 한태재

            모던 자바스크립트(ES6+) 기본강의 썸네일

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

            김영보

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

            초급

            초급

            JavaScript, ES6

            모던 자바스크립트(ES6+) 기본강의 썸네일

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

            김영보

            [React / VanillaJS] UI 요소 직접 만들기 Part 2강의 썸네일

            [React / VanillaJS] UI 요소 직접 만들기 Part 2

            정재남

            대표적인 UI 요소들을 React 버전 및 순수 JavaScript 버전으로 만들어 보면서, Web API를 활용한 다양한 관점과 방법을 경험하고, 프론트엔드 개발 실력을 한층 끌어올려 보세요.

            초급

            초급

            React, vanilla-js, ui

            [React / VanillaJS] UI 요소 직접 만들기 Part 2강의 썸네일

            [React / VanillaJS] UI 요소 직접 만들기 Part 2

            정재남

            1시간만에 Chat GPT 클론 with Cursor (원데이 클래스)강의 썸네일

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

            도도(코딩루팡)

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

            입문

            입문

            nextjs, ChatGPT, React

            1시간만에 Chat GPT 클론 with Cursor (원데이 클래스)강의 썸네일

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

            도도(코딩루팡)

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

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

            더코딩클럽

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

            초급

            초급

            HTML/CSS, JavaScript, 클론코딩

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

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

            더코딩클럽

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

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

            nhcodingstudio

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

            초급

            초급

            JavaScript, HTML/CSS, 객체지향

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

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

            nhcodingstudio

            풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]강의 썸네일

            풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]

            잔재미코딩 DaveLee

            현업에서 실제 웹서비스를 개발한 경험을 기반으로, 입문자를 위한 실제 상용화도 가능한 수준의 웹과 앱서비스를 개발하는 것을 목표로 하는 풀스택 시리즈 강의입니다. 이를 위한 Part2 강의로 다양한 기술이 존재하는 프런트엔드 기술에서 반응형, 호환성까지 고려한 최신 HTML5, CSS3, 바닐라 자바스크립트 (Javascript) + ES6 를 모두 견고하게 싹 정리하는 강의입니다.

            입문

            입문

            HTML/CSS, JavaScript, ES6

            풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]강의 썸네일

            풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]

            잔재미코딩 DaveLee

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

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

            그랩

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

            입문

            입문

            JavaScript, React, Node.js

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

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

            그랩

            자바스크립트 머신러닝 TensorFlow.js강의 썸네일

            자바스크립트 머신러닝 TensorFlow.js

            김영보

            자바스크립트 환경에서 머신러닝 개념을 다룹니다. 자바스크립트와 TensorFlow.js로 머신러닝을 구현하는 형태와 코드를 다룹니다.

            중급이상

            중급이상

            Tensorflow, JavaScript, 머신러닝

            자바스크립트 머신러닝 TensorFlow.js강의 썸네일

            자바스크립트 머신러닝 TensorFlow.js

            김영보

            이거 하나로 종결-스프링 기반 풀스택 웹 개발 무료 강의강의 썸네일

            이거 하나로 종결-스프링 기반 풀스택 웹 개발 무료 강의

            그린코딩

            꽉 찬 40시간 스프링 기반 풀스택 웹 개발 전면 무료 강의

            입문

            입문

            HTML/CSS, JavaScript, JSP

            이거 하나로 종결-스프링 기반 풀스택 웹 개발 무료 강의강의 썸네일

            이거 하나로 종결-스프링 기반 풀스택 웹 개발 무료 강의

            그린코딩

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

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

            같이코딩

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

            입문

            입문

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

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

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

            같이코딩

            Javascript ES6+ 제대로 알아보기 - 중급강의 썸네일

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

            정재남

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

            중급이상

            중급이상

            JavaScript, ES6

            Javascript ES6+ 제대로 알아보기 - 중급강의 썸네일

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

            정재남

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

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

            도도(코딩루팡)

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

            초급

            초급

            Next.js, supabase, React

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

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

            도도(코딩루팡)

            테스트주도개발(TDD)로 만드는 NodeJS API 서버강의 썸네일

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

            김정환

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

            초급

            초급

            TDD, Node.js, Express

            테스트주도개발(TDD)로 만드는 NodeJS API 서버강의 썸네일

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

            김정환

            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

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

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

            Wintho

            mongoDB 기초부터 실무까지(feat. Node.js)강의 썸네일

            mongoDB 기초부터 실무까지(feat. Node.js)

            김시훈 (도도소프트)

            mongoDB, NoSQL 요즘 많이 들리지만 아직은 낯선 데이터베이스인가요? 관계형 데이터베이스(RDS/SQL)처럼 사용하고 계시지는 않으신가요? 아무리 좋은 기술도 올바르게 사용하지 않으면 역효과가 발생합니다. 그래서 몽고디비 사용 실패 사례도 종종 보이는데요. 이 강의는 mongoDB를 최대한 mongoDB스럽게 사용할 수 있도록 기본 개념부터 실무 노하우까지 가르쳐드려요.

            초급

            초급

            MongoDB, REST API, Node.js

            mongoDB 기초부터 실무까지(feat. Node.js)강의 썸네일

            mongoDB 기초부터 실무까지(feat. Node.js)

            김시훈 (도도소프트)

            웹디자인기능사 자격증 대비(2023년 출제기준 반영버전)강의 썸네일

            웹디자인기능사 자격증 대비(2023년 출제기준 반영버전)

            webstoryboy

            웹디자인기능사 출제기준 2023년 버전에 맞추어 누구나 합격할 수 있도록 제작하였습니다. 5가지 유형을 배우고 빠르게 합격합시다!

            초급

            초급

            HTML/CSS, jQuery, JavaScript

            웹디자인기능사 자격증 대비(2023년 출제기준 반영버전)강의 썸네일

            웹디자인기능사 자격증 대비(2023년 출제기준 반영버전)

            webstoryboy

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

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

            닭강정

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

            초급

            초급

            React, Electron, GUI

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

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

            닭강정

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

            깡코딩

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

            초급

            초급

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

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

            깡코딩

            실무중심의 HTML5 시각화 프로그래밍강의 썸네일

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

            트레이딩온

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

            초급

            초급

            HTML/CSS

            실무중심의 HTML5 시각화 프로그래밍강의 썸네일

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

            트레이딩온