OpenAI API를 사용한 React의 기본 UI

이 튜토리얼에서는 OpenAI API와 통신할 수 있는 React로 기본 사용자 인터페이스 (UI) 를 만드는 방법을 배웁니다. 브라우저의 URL을 통해 채팅하는 대신 사용자가 텍스트를 입력하고 AI로부터 해당 응답을 받을 수 있는 간단한 애플리케이션을 만들어 보겠습니다. 프론트엔드 코드와 입력을 처리하고 OpenAI API와 통신하기 위한 로직을 다룰 것입니다.

주요 학습 내용

• React에서 입력 필드와 버튼을 생성하여 사용자 요청을 전송하는 방법을 이해합니다.
• 또한 OpenAI API에 비동기 불러오기 요청을 하고 수신된 응답을 React 상태에 저장하고 표시하는 방법도 배웁니다.

단계별 가이드

새 React 애플리케이션을 만들거나 기존 애플리케이션으로 이동하여 시작합니다. index.jsx 파일에서 상호 작용을 위한 기본 컴포넌트를 설정합니다.

먼저 사용자가 메시지를 입력할 수 있는 입력 필드를 추가합니다. 이를 통해 사용자가 AI와 상호 작용할 수 있습니다. 따라서 입력 필드와 요청을 보내는 버튼을 추가합니다.

이제 사용자가 입력 필드에 텍스트를 입력하고 보내기 버튼을 클릭하면 이 입력을 처리할 수 있어야 합니다. 사용 상태 훅을 사용하여 입력의 현재 값과 API의 응답을 관리할 수 있습니다.

이제 버튼의 클릭 이벤트를 처리해야 합니다. 버튼을 누르면 서버에 가져오기 요청을 하는 비동기 함수를 만들려고 합니다. 이 함수는 async 키워드로 선언되며, 서버의 응답을 기다리기 위해 await을 사용할 수 있습니다.

다음 단계는 fetch 함수를 호출하여 API와 통신하는 것입니다. URL은 API/Chat?MSG={userInput} 형식으로 지정되며, 여기서 {userInput}은 사용자 입력으로 대체됩니다. 처음에는 고정 문자열을 사용하여 API 요청이 올바르게 작동하는지 확인할 수 있습니다.

요청을 전송한 후에는 처리해야 하는 응답을 받게 됩니다. 먼저 응답을 JSON 형식으로 변환하여 작업하기 쉽게 만들 수 있습니다. 이렇게 하려면 response.json()을 호출합니다.

콘솔에서 출력을 확인하여 모든 것이 예상대로 작동하는지 확인하세요. 응답을 확인한 다음에는 위에서 선언한 상태로 응답을 저장해야 합니다.

사용자 경험을 더욱 개선하기 위해 사용자가 입력한 값이 항상 "hello"와 같은 고정된 값이 아니라 실제 입력한 메시지로 전송되도록 하고 싶을 수 있습니다. 이를 위해 사용자가 버튼을 클릭할 때 사용Ref 훅을 사용하여 입력 필드의 현재 값에 액세스합니다.

이제 사용자의 입력을 올바르게 캡처할 수 있으므로 애플리케이션을 테스트 실행하여 입력이 API로 전송되고 올바르게 표시되는지 확인해야 합니다.

모든 것이 정상적으로 작동하면 지정된 DIV에 AI가 응답을 표시하는 것을 볼 수 있습니다. 이제 사용자 인터페이스를 추가로 디자인하거나 코드를 최적화할 수 있습니다.

현재는 채팅 내역이 저장되지 않기 때문에 간단한 질의응답 애플리케이션만 만들 수 있습니다. 완전한 채팅 애플리케이션을 만들려면 채팅 자체의 기록을 저장하고 API로 전송하여 응답에 대한 컨텍스트를 확보해야 합니다.

그럼에도 불구하고 이미 OpenAI API를 사용하여 이 기술을 기반으로 자체 애플리케이션을 개발할 수 있다는 점이 인상적입니다. 향후 단계에서는 기능을 확장하여 실제 채팅 기록을 활성화할 수 있습니다.

요약

이 튜토리얼에서는 OpenAI API와 통신할 수 있는 React의 기본 사용자 인터페이스를 만드는 단계를 배웠습니다. 사용자 입력 처리부터 응답 표시까지, 기능적인 애플리케이션을 만들기 위한 모든 것을 다뤘습니다.