기록

🎯 Trouble Shooting 컴포넌트 리턴 후 발생하는 렌더링 에러

페이지가 첫 렌더링 된 후에 새로고침을 하면 위와같은 에러가 발생하는 이슈가 생겼다.🚨 Rendered more hooks than during the previous render.채팅 페이지 정보를 가져오다 발생한 에러.페이지 렌더링 후 새로고침 시 바운더리 에러 발생.로직 순서는useParams를 통해 채팅방 정보를 가져온다.currentUser를 이용해 로그인한 유저의 정보를 가져온다.유저의 정보와 채팅방 정보가 없다면 그대로 return 한다.유저의 역할에 따라 이름, 채팅방 권한 상태를 관리한다.채팅방 페이지를 렌더링한다.에러가 발생한 지점은 if 조건문으로 리턴을 한 후, 아래 useState hook이 발생하여 일어난 에러다.☑️ 문제 코드const ChatRoomPage = ()=> {c..

한글 입력시 두번 이벤트 발생되는 현상 - onKeyPress, onKeyDown, onKeyup

🔍 문제 input 태그에 onKeyDown을 사용했을 때 영어는 이벤트가 한번 들어가는데 한글을 입력하면 두번 이벤트가 발생하는 현상이 있었다. 🔍 원인 KeyboardEvent.isComposing라는 객체가 입력된 값이 조합문자인지 아닌지 확인하는데 한글은 자음과 모음의 조합으로 한 음절이 만들어지기 때문에 조합문자로 인지되고 영어는 조합문자가 아닌 것으로 입력된다. 한글이 입력될때는 KeyboardEvent.isComposing가 true, 영어일 때 KeyboardEvent.isComposing가 false로 입력되면서 한글은 onKeydown이벤트가 들어갔을때 조합문자인 상태로 한번, 해지된 상태에서 또 한번으로 이벤트가 두번 들어가게된다. KeyboardEvent.isComposing가 fa..

이벤트 리스너 | 렌더링시 display 속성 가져오지 못하는 문제

이벤트리스너 사용방법 적용시킬 HTML 속성을 가져온다. 적용시킬 이벤트함수를 만든다 가져온 HTML 속성을 담은 변수에 어떤 이벤트를 했을 때, 함수를 실행할 지 정한다. 클릭 const button = document.querySelector("button"); function handler (e) { console.log("클릭되었습니다"); } button.addEventListener("click", handler); 주의 처음 HTML요소 중 style프로퍼티의 경우 HTML 요소에 인라인 스타일로 직접 설정된 속성만을 반환합니다. 초기 설정이 ""로 세팅이 되어있다는 점을 기억합시다. 아래 코드 기준으로 생각했을 때 js에서 handler함수를 실행해도 바로 css가 적용되는게 아닙니다. 초..

구조분해할당

구조분해할당 구조분해할당이란? 말 그대로 구조를 분해해서 할당한다. 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식 const obj = { a: 10, b: 20 } function sum ({a: hello, b:world}) { console.log(hello+ world); } sum(obj); // 30 구조분해할당으로 변수값 교환을 할 수 있다. 구조분해할당 없이 변수값 교환하는 방법 let a = 10; let b = 20; const temp = a; a = b; b = temp; console.log(a, b); // 20 10 구조분해할당으로 변수값 교환하기 let a = 123; let b = 456; [ a, b ] = [ ..