Yepchani's place

들어가며 이번에 사이드 프로젝트를 진행하며 겪은 문제에 대해 얘기해 보고자 합니다. 폼을 구현하기 위해 react hook form을 사용했는데요. input에는 onBlur, onChange, onClick, onKeyDown 이벤트를 사용했습니다. 다음과 같은 형태였죠. ; 문제 문제는 폼 제출이 안 된다는 겁니다. 응?? 이벤트에 무슨 문제가 있나 싶어 하나씩 지워보며 확인한 결과 onChange를 지웠더니 정상 작동이 되는 걸 확인했습니다. 이상한 점은 onChange 이벤트 핸들러 내부 로직을 지우고 등록만 해도 문제가 발생했다는 거죠. 솔루션 이곳저곳 찾아보니 다음과 같은 내용을 발견할 수 있었습니다. react hook form Ver 7.16부터는 onBlur와 onChange 핸들러를 r..

들어가며 이번에 사이드 프로젝트를 진행하며 겪은 문제에 대해 얘기해 보고자 합니다. 검색어 자동 완성 기능을 구현하는 게 목표였는데요. 검색어를 입력하면 해당 글자를 포함한 상품이 있는 경우 리스트로 표시해 줍니다. 리스트 아이템을 클릭하면 해당 검색 결과로 이동합니다. 검색창 외부를 클릭하면 onBlur 이벤트가 발생해 리스트가 사라지도록 했는데요. (onBlur 이벤트는 요소가 포커스를 잃었을 때 발생합니다.) 문제 문제는 리스트 아이템을 클릭할 때도 onBlur 이벤트가 발생해 리스트가 사라지고 검색 결과로 이동하지 않았습니다. 왜 이런 일이 발생한 걸까요? 마우스 클릭 이벤트에 대해 살펴보겠습니다. 마우스 클릭 이벤트는 크게 세 단계로 발생합니다. onMouseDown -> onMouseUp ->..

들어가며 사이드 프로젝트를 진행하며 겪었던 문제에 대해 얘기해 보고자 합니다. Next.js를 이용한 프로젝트였는데요. 계정 등록을 할 때 해당 유저에 대한 인증이 필요했고, Nodemailor를 이용해 이메일 인증을 진행하기로 했습니다. 문제 순조롭게 진행이 되는 거 같았느니 예상치 못한 곳에서 문제가 발생했습니다. 분명 개발 모드에서는 정상적으로 작동했는데 프로덕션 모드에서는 이메일 전송이 안 되는 겁니다. 솔루션 구글링을 한 결과 다음과 같은 내용을 발견할 수 있었습니다. This problem is really confusing indeed. I've managed to fix this by simply adding async/await. This is because streaming respon..