요즘 새로운 과정을 기획하면서 react.js + next.js를 OpenAI API와 같이 사용하는 과정을 만들고 있습니다. ㅎㅎ

 오랜만에 웹 기술들을 공부하니 재미있네요. ㅎㅎ 

쭉 파이썬 과정들을 운영하고 있었는데 좀 더 범위를 넓혀서 아이폰 앱 개발과정 with ChatGPT, 

웹 프로그래밍 with ChatGPT, AI시대의 AI어시스턴트 활용하기와 같은 글을 쓰고, 온라인 과정들을 만들고 있습니다. 

리딩머신, 학습기계로 남은 삶을 살기로 결심했습니다. ㅎㅎ 죽는날까지 책을 읽고 공부하기 ~~ 

"use client";

import {useState} from 'react';

export default function Home() {

  const [input,setInput] = useState('');

  const [prompt, setPrompt] = useState('');

  const [assistant, setAssistant] = useState('');

  const doChange = (event) => {

    setInput(event.target.value);

  };

  async function doAction() {

    setAssistant('wait...');

    fetch('/rh', {

        method: 'POST',

        body: JSON.stringify({prompt: input})

    })

    .then(resp => resp.json())

    .then((value) => {

        setPrompt(input);

        setInput('');

        setAssistant(value.content);

    })

    .catch(error => {

        console.log(error);

    });

  }

  return (

    <main>  

        <h1 className="title">Index Page</h1>

        <p className="msg font-bold">

            프롬프트를 입력:</p>

        <div className="m-5">

            <input type="text" className="input" name="input"

                value={input} onChange={doChange} />

            <button className="btn" onClick={doAction}>Send</button>

            </div>

        <div className="prompt">

            <p className="">PROMPT: {prompt}</p>

            <p className="">ASSISTANT: {assistant}</p>

        </div>

    </main>

  );

}