enter를 치면 input창이 클릭되도록 하는 함수를 만들었다. keyup될 때 구현했는데 영어는 괜찮은데 자꾸 한글이 씹하는(?) 현상이 발생했다. const handleKeyUp = (e: KeyboardEvent) => { if (textareaRef.current) { const maxHeight = 4 * 22; // 최대 4줄, 줄당 22px if (e.key === 'Enter') { e.preventDefault(); if (e.ctrlKey) { if (textareaRef.current.scrollHeight 알고보니 버튼이 두번 클릭되는 문제였다. 그럼 왜 영어는 괜찮은데 한글은 두번 클릭되는 현상이 발생할까? 바로 IME(입력기)가 작..
react-query 비동기 함수가 돌아가고 있을 때 다른 브라우저 창을 갔다가 돌아오면 focus가 다시 되니까 리액트 쿼리가 retetchOnWindowFocus의 기본 값으로 messageList를 다시 불러와, 메시지 답변이 왔음에도 불구하고 메시지를 run 시키는 함수는 계속 돌아가고 있어 isAnswerLoading이 false가 아닌 true로 되어지는 문제 발생. useEffect(() => { if (!runId || !threadId) return; const checkRunStatus = async () => { const runStatus = await refetchRetrieveRun(); if (runStatus?.data?.status === 'completed..
React Query는 React 앱의 서버 상태를 관리하는 라이브러리. 데이터관리 Client State- 웹 브라우저 세션과 관련된 모든 정보를 의미 (서버에서 일어나는 일과 아무 관련이 없음)- 단순 사용자의 상태를 추적ex) 언어 선택, 다크 모드&라이트 모드 Server State- 서버에 저장되는 정보. 클라이언트에 표시하는 데 필요한 데이터ex) 데이터베이스에 저장하는 블로그 게시물 데이터 React query는 클라이언트단에서 서버 데이터 캐시를 관리 React 코드에 서버 데이터가 필요할 때 fetch나 axios를 사용해 서버로 바로 이동하지 않고 react qeury 캐시를 요청 데이터를 관리하는 것은 react query이지만 서버의 새 데이터로 캐시를 업데이트하는 시기를 설정하는..
보통 무한 루프 코드를 작성할 때 'try-catch' 블록을 사용하는 것은 에러 핸들링을 위해 좋은 방법 중 하나.하지만 무한 루프가 끝나지 않는 문제를 해결하는 가장 중요한 방법은 루프를 적절하게 종료할 수 있는 조건을 만드는 것! 1. 루프 조건 명확히 하기: 루프가 종료될 수 있는 명확한 조건을 설정2. 타임아웃 설정: 특정 시간이 지나면 루프를 종료하도록 타임아웃을 설정3. 에러 핸들링: 'try-catch' 블록을 사용하여 에러 발생 시 루프를 종료하거나 재시도 로직을 작성4. 외부 신호: 외부 신호나 상태 변수를 사용하여 루프를 제어할 수 있도록 함. let running = true; const timeout = setTimeout(() => { running = false; on..
