728x90 반응형 React/이슈 해결4 [react] onKeyDown 이벤트 + 한글 입력 시 함수가 두 번 실행되는 문제 해결하기 검색창에 검색어를 입력하고 키보드를 사용하여 위아래에 이동 시, 맨 처음에만 2칸이 이동되는 문제가 있었다. 즉, 맨 처음에 키보드를 사용하여 추천 검색어들을 이동할 때 함수가 2번 실행되는 문제점이 있었다. 결과적으로 조건식에 e.nativeEvent.isComposing === false를 추가해 주면 문제점은 해결된다. keyboardEvent.isComposing 이는 입력한 문자가 조합문자인지 아닌지를 판단한다. 한글은 조합문자이고, 영어는 조합문자가 아니다. 한글을 입력할 때 자세히 보면 입력 중인 글자 바로 아래 검은 밑줄이 생기는 경우가 있는데, 이 밑줄이 보이는 상황에서 키를 입력하면 이벤트가 2번 발생하는 이슈가 있다. 왜냐하면 글자가 조합 중인지, 조합이 끝난 상태인지 파악이 어렵기 .. 2023. 5. 9. [react + vercel] cra vercel로 배포하기 + cors 이슈로 인한 proxy 설정 문제 상황 cra를 vercel로 배포하려고 하는데 오류가 발생했다. Uncaught (in promise) SyntaxError: Unexpected token ' 2023. 5. 8. [React] 값을 수정할 때 페이지가 번쩍 거리는 현상 제거하기 페이지가 번쩍 거리는 현상 위의 동영상에서 확인할 수 있듯이 Todo를 수정하고 제출했을 때 뭔가 번쩍 거리는 듯한 느낌이 있다. 일단 결론부터 말하면, 투두를 수정할 때 updateTodoApi를 호출하게 되는데 updateTodoApi는 또 getTodoApi를 호출하고 있었기 때문이다. 여기서 updateTodoApi는 데이터를 수정할 때 발생하고, getTodoApi는 화면에 그릴 데이터를 가져올 때 발생한다. 처음에 이러한 방식으로 코드를 작성한 이유는 서버에 데이터를 저장하고 있기 때문에 수정한 데이터를 화면에 보여주기 위해서 getTodoApi를 계속해서 호출해야겠다고 생각했기 때문이다. 하지만 그러면 제목처럼 화면이 번쩍인다. 그 이유는, 통신을 하고 난 후에 화면에 데이터를 그리기 때문에.. 2023. 4. 15. [react] React에서 key의 역할과 컴포넌트를 다시 그리는 과정 발생한 이슈 팀 프로젝트를 진행하면서 key에 대해 간과하고 있던 점을 스스로 발견해버렸다. 그래서 기록을 남기고자 이렇게 작성을 하려고 한다. 나는 map을 사용할 때 key를 보통 map의 두 번째 인자인 index로 사용했다. 평소에는 문제가 되지 않았던 이슈가 이번 프로젝트에서는 이슈가 되어 돌아왔다. 제대로 정리하지 않으면 프로젝트를 할 때 헤맨다는 이유가 여기에서 나왔나 싶다,, 여러 들이 있고, 각각의 에는 삭제 버튼이 있다. 삭제 버튼을 클릭했을 때 클릭한 를 삭제하고 싶었다. 하지만 클릭한 가 삭제되지 않고, 다른 가 삭제되는 현상이 있었다. 왜 이러한 이슈가 발생한 건지 정리해보려고 한다. Key의 역할 공식문서에서는 key에 대해 이렇게 설명하고 있다. 그 중 위의 이슈와 관련성이 깊.. 2023. 2. 15. 이전 1 다음 728x90 반응형
