웹 프로젝트에서 입력 폼을 만들다 보면 다양한 언어 환경과 브라우저 동작을 고려해야 합니다. 최근 일본어를 입력하는 Safari 유저에게서 다음과 같은 문제가 발생했습니다.문제: 일본어 입력 도중 Enter 키를 누르면 한자 변환 확정이 아니라 폼이 제출(submit) 되어버리는 현상이 문제는 Chrome, Firefox 등 다른 브라우저에서는 발생하지 않았기 때문에 원인을 파악하고 해결하는 데 꽤 시간이 걸렸습니다. 이 글에서는 문제 상황, 원인 분석, 그리고 해결 과정까지 모두 공유해보겠습니다. 문제 상황 재현⚙️ 환경브라우저: Safari (macOS, iOS)입력 언어: 일본어 Send ⛔ 문제가 되는 행동Safari에서 일본어를 입력할 때, 예를 들어 こんにちは를 한자로 바꾸기 위해 입력 ..
기존 프로젝트 디자인 상 비밀번호 입력하는 란이 아래와 같이 4개로 분할되어 있었다. 따라서 이에 맞춰 4개의 input칸을 만들었다. {maskedValues.map((value, index) => ( handleChange(index, e.target.value)} onKeyDown={e => handleKeyDown(index, e)} />))} 이렇게 하다 보니 브라우저 단에서 비밀번호로 인식을 못하여 비밀번호 저장 팝업이 뜨지 않는 문제가 생겼다. 이유는 브라우저는 주로 input 태그에서 type="password"로 설정된 필드를 찾아 비밀번호 필드로 인식하지만 단순히 type="password"만으로는 충분하지 않을 수 있다는 것.. input 필드에 autocomplete="cur..
챗봇을 개발하면서 assistant api를 사용했다. 노출되는 api-key로 인해 프록시 서버를 만들어 openai 의 api를 사용했다. 기존에는 질문을 던지고 대답을 받으면 다시 메시지리스트를 refetch하여 사용했는데 그럼 메시지 답변을 주고 받을 때마다 refetch가 일어나 성능상 좋지 못할 것 같았다. 따라서 useEffect로 localMessageList를 만들어 저장한 뒤 챗봇 탭이 (gpt로 치면 채팅방) 변경될 때에만 refetch 로 메시지 리스트를 가져오게 변경했다. 따라서 탭이 변경되지 않는다면 서버 부하가 훨~씬 줄어들게 된다. useEffect(() => { if (!isAnswerLoading && streamingAnswer) { const userMes..
