[ChatGPT 활용 앱제작] Node.js, React.js를 이용한 ChatGPT 앱 만들기

1. Node.js 설치 및 Axios 설치

 

$ npm init
// 패키지 이름 설정 

// axios 라이브러리 설치
$ npm install --save axios

 
 
Axios 라이브러리란?
Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리로, 백엔드와 프론트엔드가 통신을 쉽가히기 위해 Ajax와 더불어 사용하는 라이브러리이다.
이미 Javascript에서는 fetch api가 있지만, 프레임워으케어 ajax를 구현할 땐 axios를 쓴다고 보면 된다.
 
app.js에 아래의 내용을 입력한 후, node app.js 명령어를 이용해 실행해보자.
ringleplus 메인 페이지의 source를 가져와서 출력해보자.
 

const axios = require('axios')

axios.get("https://www.ringleplus.com")
.then(res=> console.log(res))

 
 

 
Page Source View가 그대로 터미널 창에 나타난 것을 확인할 수 있다.
 

 

ChatGPT API KEY

 
https://platform.openai.com/account/api-keys 에서 API Key를 발급받아보자.
 
아래와 같이 axios 라이브러리를 이용해 ChatGPT에 request를 보내는 endPoint에 실제 POST 요청을 보내는 코드를 작성해보자.
axios.post를 이용해 endpoint, object, headers에 요청에 필요한 body, header parameter을 아래와 같이 추가해주자.
 

const axios = require('axios')

const key = [MY API KEY]

const endPoint = "https://api.openai.com/v1/completions"
// endpoint
axios.post(endPoint, {
    // object
    model: "text-davinci-003",
    prompt: "Please recommend me food for lunch.",
    max_tokens: 100, 
    n: 1,
    stop: null,
    temperature: 0.7
}, {
    headers:{
        'Content-Type' : 'application/json',
        'Authorization': `Bearer ${key}`
    }
}).then(res => console.log(res.data.choices[0]))

 
response로 받은 값의 data.choices[0] 를 출력하면 chatgpt의 응답을 아래와 같이 text 부분에서 얻어낼 수 있게 된다.
 

 
 

3. React 클라이언트 개발

 
chatapp 이라는 이름의 next app을 생성해보자.
 

$ npx create-next-app@latest chatapp --use-npm

 
아래와 같은 터미널 정보가 나타나며, 패키지 디렉터리 구조는 다음과 같다.
 

 
 
아래 명령어로 로컬에서 해당 서버를 돌려보도록 하자.
 

$ npm run dev

 
localhost:3000 경로로 진입해보면 아래와 같이 Vercel 기반의 Next.js 화면이 나타나는 것을 확인할 수 있다.
 

 
 
 
4. index.js 변경
 
앱 내 pages 폴더의 index.js 파일의 html을 변경해보자.
기본적으로 위와 같이 나왔던 메인 화면의 source가 작성되어 있다.
해당 source를 모두 지우고, 아래와 같이 작성해보자.
 

export default function Home() {

  const submit = () => {
    // axios
    console.log('submitted!')
  }

  return (
    <>
    <div>Hello, This is YebinGPT</div>
    <input/>
    <button onClick={e => submit()}>Send</button>
    </>
  )
}

 
그리고 3000 포트로 가서 확인을 해보면, 다음과 같이