2023-02-10 금요일

·2023년 2월 10일
0

Today I Learned

목록 보기
70/114
post-thumbnail

📅 오늘 한 일


1. 기획 마무리

오늘 드디어 기획을 마무리 지었다. 기존 사이즈에서 사이즈도 커졌고 핵심 기능의 흐름도 더 매끄러워져서 정돈되었다는 느낌을 준다. 그래도 오늘 끝나서 너무나도 다행스럽다 👾

현재 마무리된 기획을 바탕으로 디자이너님이 UI 뽑아주시고 있는 중

✏️ 무엇을 배웠나


1. 플로우차트 그리기

기획 회의를 하면서 명확해지는 게 아니라 산만해지고 포커스가 흐려진다는 느낌을 받아서, 플로우차트를 그려 정리하기로 했다.

서비스 내에서 유저가 만드는 행동를 크게 2가지로 분류할 수 있었고 그에 따라 플로우 차트를 작성했다.

이렇게 해서 전체적인 흐름을 정리하고 보니, 기획 상 구멍을 발견하기로 쉬웠고 예외처리를 해야 하는 부분도 눈에 띄었다. 그동안 프로젝트 진행하면서 플로우차트까지 작성해본 적은 없었는데, 이번에 해봐서 다행이고 이거 개꿀임.

기획 회의의 흔적들.

2. 리액트에서 openAI API 사용하기

기획한 서비스 내에서 시리처럼 호출할 수 있는 인공지능봇을 구현하기 위해 openAI API를 사용하기로 했다.

우선 응답 받은 데이터를 제대로 활용할 수 있는지 확인해야 했기 때문에 오늘 리액트에서 api를 가져와 사용해봤다.

데이터 필터링 코드를 짜달라고 했고, 아래 콘솔에 찍힌 것처럼 ai가 대답을 해줬다.

일단 봇 데모버전에서 더 테스트해야 할 것은
1. ai 모델이 고성능일수록 응답 속도가 늦음. 어떻게 사용자를 지루하게 만들지 않을 수 있을까?
2. 가끔 요청 시 에러가 뜨는데, 관련해서 예외처리는 어떤 방식으로 해줄 것인가 ( view 관련해서 )
3. 요청에 대한 응답이 생각보다 길어질 때는 어떻게 할 것인가? 이 부분은 max_token 값을 낮춰주면 됨. ( 공식문서에 나와 있다)

export default function App() {
	const [send, setSend] = useState('');
	const configuration = new Configuration({
		apiKey: 'MY_API_KEY',
	});
	const openai = new OpenAIApi(configuration);
	const handleSend = (send) => {
		openai
			.createCompletion({
				model: 'text-davinci-003', // 모델 바꿀 수 있음
				prompt: send, //요청값
				temperature: 0.7,
				max_tokens: 1000, // 길이 제한
				top_p: 1,
				frequency_penalty: 0,
				presence_penalty: 0,
			})
			.then((res) => {
			console.log(res);
			console.log(res.data.choices[0].text);
			});
};

🏷️ 오늘의 코멘트

한숨 돌렸고 금요일 밤은 치맥임 👺

profile
⛰ 프론트엔드 개발 공부 블로그

0개의 댓글