개발 노트

let/const 대신 useRef를 써야 하는 이유핵심 차이는 "컴포넌트 함수가 언제 다시 실행되는가" 에 있습니다.문제: 컴포넌트 함수는 렌더링마다 다시 실행된다function Counter() { let count = 0; // ⚠️ 렌더링할 때마다 0으로 초기화됨! const handleClick = () => { count += 1; console.log(count); // 콘솔엔 찍히지만... // UI는 업데이트 안 됨 + 다음 렌더링에서 다시 0이 됨 }; return {count};}버튼을 아무리 눌러도 화면은 항상 0입니다.let count = 0은 렌더링마다 새로 선언되기 때문입니다.useRef는 렌더링 사이에 값이 유지된다function Counter() { ..

React HookReact Hook은 리액트 클래스형 컴포넌트에서 이용하던 코드를 함수형 컴포넌트에서 사용할 수 있게 만들어준 라이브러리입니다. 이는 함수형 컴포넌트에 맞게 만들어진 것으로 함수형 컴포넌트에서만 사용 가능합니다.React Hook의 장점코드 간결성함수형 컴포넌트와 Hook을 사용하면 클래스 컴포넌트보다 코드가 더 간결해집니다. 따라서 코드를 이해하고 유지 보수하기가 더 쉬워집니다.재사용성Custom Hook을 만들어 여러 컴포넌트에서 재사용할 수 있습니다. 이로 인해 코드의 중복을 줄이고 논리를 쉽게 공유할 수 있습니다.컴포넌트 분리Hook을 이용하면 상태 관련 로직을 컴포넌트에서 분리하여 더욱 독립적인 함수로 만들 수 있습니다. 이로 인해 컴포넌트를 더욱 재사용 가능하고 테스트하기 쉬..

ViteVite는 빠르고 간결한 웹 프로젝트를 위해 탄생한 빌드 도구 입니다.ESMESM은 모듈화 문법인 import, export를 별도의 도구없이 브라우저 자체에서 소화해 낼 수 있는 모듈 방식을 의미합니다. 기존의 브라우저에서는 import와 export를 해석할 수 있는 능력이 없었지만, 이제는 script 태그에 아래와 같이 type="module" 속성을 추가하면 정상 동작하는 것을 볼 수 있습니다.// app.jsimport { sum } from './math.js';console.log(sum(10, 20));Vite 특징EsbuildGo로 작성된 Esbuild는 Webpack과 같은 기존 번들러 대비 10-100배 빠른 속도를 제공합니다.Native ESM기존 webpack과 같은 모듈..

간혹 Jquery 클릭 이벤트 실행시 1회가 아니라 여러 번 실행되는 경우가 있습니다. 이런 현상이 나타나는 이유는 사용자가 마우스로 버튼을 클릭했을 때 버튼을 감싸고 있는 부모 태그들도 이 클릭 이벤트에 반응을 하기 때문입니다. 이러한 현상을 Bubble Up이라고 합니다. 이러한 Bubbling을 해결하는 방법은 아래의 방법들이 있습니다. .off() 사용 $(element).off().on('click', function () { // body });.off() 메서드는 이벤트를 바인딩 해제하는 경우에 사용하는게 적절합니다. 그래서 .on() 메서드의 이중 로딩으로 발생하는 중복 실행 오류를 숨길 수는 있어도 좋은 접근법이 아니라고 합니다. .stopPropagation() 사용 $(..