setCount((prev) => prev + 1);리액트를 하다 보면 이러한 형태의 setter 함수를 쓰게 된다. 이는 `useState`의 setter 함수에서 콜백 형태로 상태를 업데이트 하는 것인데, 이를 '함수형 업데이트' 방식이라고 한다. 이번에는 값 기반 업데이트와 함수형 업데이트의 차이, 그리고 함수형 업데이트에 담긴 '클로저'에 대해 이해해보려고 한다. (사실 후자가 목적) 1. 값 기반 업데이트 (단순히 '새 값'으로 상태 변경)const CountExample = () => { const [count, setCount] = useState(0); const action = async () => { const n = await new Promise((resolve) => s..

내용이 좀 많이 길다.. 💡 주요 리뷰 포인트요소는 명확하게 선택하기폼 유효성 검사는 폼에 위임하지 말자유효성 검사 함수는 유효성 검사만. (UI 업데이트와 분리하기)closest 사용 지양클로저가 이 상황에 맞을까?적절한 함수 분리로 응집도 높이기태그 자체에 스타일 주지 말기 (reset.css로 보내거나, 클래스 줘서 스타일하기)기능들 init 함수로 초기화 이번에 로그인, 회원가입 폼을 자바스크립트로 구현하는 미션을 수행하면서 깨달은 점이 많다.코드를 어떻게 써야 하는지, 어떻게 쓰면 안되는지 등...특히 멘토님과 주강사님의 코드리뷰에서 내가 어떤 점을 놓치고 있었는지, 코딩의 핵심은 무엇인지를 알게 되어서 굉장히 뜻깊은 시간이었다.참고로 제목에 '자바스크립트 리팩토링'이라고 적어놓았지만 css ..

See the Pen mouseover / mouseenter (bubbling exist / non-exist example) by personal place (@asksa1256) on CodePen.">See the Pen mouseover / mouseenter (bubbling exist / non-exist example) by personal place (@asksa1256) on CodePen. 1. mouseenter/leave는 버블링이 일어나지 않는다.예시에서 mouseover 타입으로 이벤트 핸들러가 등록된 div#box1요소(왼쪽)로 마우스를 움직여 보면,해당 요소 바깥에서 안쪽으로 마우스 커서가 이동할 때도 이벤트가 발생하지만,버블링과 이벤트 위임의 원리로 자식요소인 b...

웹소켓 라이브러리 socket.io로 실시간 채팅을 구현하던 중 문제가 생겼다. 이렇게 한글로 입력해서 엔터를 치면, 킹받게 마지막 글자만 한 번 더 출력되는 것이다.뭔 따라쟁이도 아니고...하지만 영어나 특수문자는 정상적으로 한 번씩만 출력되었다. 왜 한글에서만 이런 현상이 나타나는 걸까?초반에는 디바운싱으로 해결했으나, 근본적인 문제가 해결된 것 같지 않아서 조금 더 알아보았다. 문제 원인IME(Input Method Editors) compositionIME는 영어가 아닌 한글, 일본어, 중국어와 같은 언어를 다양한 브라우저에서 지원하도록 언어를 변환시켜주기 위한 OS 단계의 어플리케이션을 말한다. 그러나 IME 과정에서 keydown 이벤트가 발생하면, OS와 브라우저에서 해당 이벤트를 ..