[Project] MyFortune 02

챕터 5

• node.js로 챗gpt api를 활용하는 방법
• node.js의 대표적인 백엔드 프레임워크인
  Express를 통해 api 서버를 구축하는 방법

🌌 챗GPT API 활용하기

1-1. API 명세 확인 및 연동하기

• 챗GPT API 명세 확인
  OpenAI 공식 문서 페이지
  https://platform.openai.com/docs/introduction

챗GPT API의 개요와 예시 코드를 간략하게 설명하는 페이지

! 챗GPT를 서비스와 연동하기 위해서는 구체적인 API 명세 확인 필요
API reference documentation for the Chat API. 클릭

챗GPT에 어떻게 요청하고 어떻게 답변이 오는지에 대한 설명을 예시 코드와 함께 확인 가능한 페이지

• 예시 코드의 언어를 node.js로 변경 - > copy
  

• index.js에 붙여넣기
  

🛩️ 예시 코드에 나오는 2가지 파라미터

• messages : 사용자와 챗gpt가 지금까지 나눈 대화 내용이자 api로 보낼 데이터
• model : api에서 사용할 모델 id

• 예시 코드가 정상적으로 동작하기 위해 발급받았던 api키 반영
  (현재 예시 코드 그대로 하면 에러 남 - > 에러 해결된 코드)
  
• 결과
  

content에 예시 코드에 있던 You are a helpful assistant. 이라는 메세지로 넣고 실행해보면
오늘은 어떻게 도와드릴까요? 라며
gpt 응답이 잘 작동하고 있는걸 확인할 수 있다.

1-2. 이전 대화 학습시키기

챗gpt에게 system,user,assistant를 활용하여
이전 대화를 학습 시킬 수 있던 것처럼
챗gpt api 에서도 messages 객체를 통해 이전 대화를 학습시킬 수 있다.

• 예시 코드를 운세 서비스에 적합하게 수정하기

role 파라미터에는 system, user, assistant 중 하나를, content 파라미터에는 챕터3에서 챗gpt 플레이그라운드에서 입력했던 내용을 반영한다.

• 대화 학습 주입

• 테스트

🔎 더 개인화된 답변을 제공하고 싶다면 user에 사용자의 생년월일, 태어난 시간 등을 입력한다면 더 개인화된 답변을 제공할 확률이 높아진다.

• 테스트
  띠를 content에 같이 입력하고 운세를 알려달라고 하면 이런 답변이 돌아온다.
  

🔎 만약 api의 전체 응답이 아닌 챗gpt의 답변 텍스트만 가져오고 싶다면, messages 객체의 키 중 content만 가져오게 수정하기

console.log(completion.choices[0].message['content']);

결과

🔎 필요에 따라 max_token(답변 길이), temperature(무작위성) 등 챗gpt api의 파라미터를 추가할 수 있다.

⚠️ 주의 : 플레이그라운드에서 사용했던 메뉴와 api의 파라미터 이름이 다를 수 있으니
OpenAI 공식 문서 페이지의 명세를 참고하여 구현해야 한다.
https://platform.openai.com/docs/introduction

예시 )

2. Express로 API 서버 구축하기

Express는 Node.js로 API 서버를 구축할 때 사용하는 대표적인 웹 프레임워크이다.

Express 설치

• Express Node.js 패키지 상세 페이지
  https://www.npmjs.com/package/express

• vscode 터미널에서 Express 패키지 설치

  명령어 npm install express

설치 완료 !

서버 실행하기

npm 공식 사이트에서 제공하는 Express 예시 코드 활용하여 api 서버 실행하기

설명 : 루트 url(/)에 대한 GET 요청에 "Hello World"로 응답하는 코드이다.

• node index.js로 실행했을 때 아무 반응이 없으면 서버가 정상적으로 실행된 것 !
  
• 브라우저 주소창에 localhost:3000 입력 서버 접속 테스트
  

POST 방식으로 변경하기

get 방식은 url 주소에 파라미터 값이 그대로 포함되어 전송되므로 지저분할 수 있다.
app.post() 함수를 통한 POST 방식으로 변경하기

💡 POST 방식은 데이터를 HTTP 메시지의 본문(body)에 담아서 전송한다.

1. Express 공식 웹사이트 접속

https://expressjs.com/ko/
상단 메뉴 - > 안내서 - > 라우팅 클릭

2. 라우팅 메소드 아래에 있는 app.post() 코드 복사

3. vscode의 index.js 파일에 붙여넣기

💡이렇게 하면 Hello World가 프론트엔드에 전달되는데 이를 백엔드에서 읽으려면 추가적으로 json 형태 로 전달된 값을 파싱하는 코드가 필요하다.

4. 파싱 코드 붙여넣기

Express 공식 웹사이트 상단 검색창 - > req.body 검색
https://expressjs.com/

파싱 코드 복사

index.js app.post() 함수 바로 위에 붙여 넣기

3. 챗GPT API 연동하기

챗GPT API 연동하기 전 라우트 경로 변경

루트 - > fortuneTell로 지정
백엔드 서버에서는 /fortuneTell로 오는 POST 요청에 대해서만 응답하게 된다.

챗GPT API 코드 적용

챗GPT에게 받는 응답을 fortune이라는 변수에 담고 이 값을
console.log()를 통해 로그로 출력하고
res.send()를 통해 프런트엔드에 전달한다.

CORS 에러 핸들링 코드 추가

수정한 코드가 잘 동작하는지 확인하기 전 cors 에러를 핸들링하는 코드를 추가해야 한다.

💡 CORS 에러

• npm 사이트 접속 - > cors 검색
  https://www.npmjs.com/

• 상세 페이지 가이드 확인
  https://www.npmjs.com/package/cors

• vscode 터미널에서 CORS 패키지 설치
  💡 서버가 아직 실행 중이라면 ctrl+c로 서버를 종료한 후 진행 !

• index.js 파일에 CORS 패키지 임포트 + CORS를 허용하는 코드 삽입
  

테스트

지금까지 수정한 코드들을 테스트한다.
원래 전체 동작을 검증하기 위해서는 POST 요청을 보내는 프론트엔드 코드까지 구현해야 함. 이번 챕터에서는 백엔드코드 구현 후 동작을 검증하는 것이므로
app.post() - > app.get()으로 바꿔서 임시 테스트하기 !

• 터미널에서 node.index.js 명령어로 서버 실행
  

• localhost:3000/fortuneTell 접속
  

챗GPT의 응답이 잘 출력되고 있다! 얏호

🌞 느낀점

이번 챕터에서는 백엔드에 API 서버 구축하는 방법을 공부했다.
처음 접하는 것들이라 신기한 경험이었다.
좋은 시도라고 느낀 부분이 있었는데
학원 다닐 때는 공식문서를 참고하면서 코드를 한 적이 거의 없었다.
그런데 혼자 공부할 때나 특히 이 책을 보면서 따라가다 보니
공식 사이트나 문서들을 보는 연습도 되는 것 같아 좋은 변화인 것 같아서
기분이 뭔가 뿌듯했다 🌱
다음 챕터에선 프론트엔드를 구현하여 백엔드와 연결해보자 !
빳팅 💫