📌 Prompt Engineering

UI생성, 대화내용 누적 로직 개발 부분에 집중하기 위하여 프롬프트를 일시적으로 비워두었다. 프롬프트를 비워두게 되면 초기상태의 GPT 에게 질문을 하게 되며, 이것은 곧 현재 OpenAI 사에서 배포한 Chat GPT와 같은 기능을 수행하게 된다.

위의 개발이 끝나면 기본적인 chat UI의 형태를 갖추게 되고, 그때 Prompt Engineering을 통해 GPT에게 면접관 역할을 부여하기만 하면 AI 면접관이 완성된다.

📌 Progress

현재 구현 화면

구현 완료 항목

• 유저가 메세지를 입력하면 배열에 push후 gpt의 message 인자로 넘겨주고, gpt의 대답을 다시 배열에 push하여 프론트로 넘겨주는 작업을 반복하여 배열에 대화내용이 누적되도록 하는 로직 구현

• gpt의 “system” 매개변수처럼 화면에 렌더링 하진 않지만 실제로 gpt에게 넘겨줄 내용들이 담긴 prompt 배열을 생성하여 prompt와 화면에 렌더링 할 실제 대화내용인 message 배열을 분리함

• 채팅 UI 구현

• api 호출에 걸리는 시간동안 로딩창 구현

  

• 로딩중에는 input의 전송버튼이 스피너로 변경되게 하고, 클릭이 되지 않도록 막음

  

• 대화가 길어지면 스크롤이 자동으로 제일 아래로 내려가서 최근 대화가 먼저 보이도록 구현

📌 Issue

미해결

서버가 닫히는 현상

GPT API 호출 시 OpenAI 측에서 발생한 오류에 의해서 백엔드 서버가 닫히는 현상이 발생했다. 예외처리를 통해 해결할 예정이다.

해결완료

엔터 처리에 어려움이 있었다. 엔터를 누르면 바로 답변이 전송되도록 구현했는데, 답변 텍스트 자체에 줄바꿈을 하고 싶을 수 있기 때문에, shift를 누른 채 엔터를 누르면 텍스트 내에서 줄바꿈이 되고, 그냥 엔터를 누르면 답변이 전송될 수 있도록 구현하였다. 이 때, 엔터로 인한 개행문자 하나가 자꾸 textarea에 남게되는 문제가 발생하였고, 이벤트 버블링에 대해서 공부한 후에 전송을 위한 엔터 입력 시에는 개행문자가 삽입되지 않도록 하여 해결하였다.