JS

[TIL] 이벤트 버블링?

이벤트 버블링이란 물 속에서 거품이 보글보글 올라오는 것에서 연상된 표현으로 하위에 요소에서 진행되는 이벤트가 상위의 요소들에게 전달되는 것을 말한다. 예를들어 button요소를 감싸고 있는 button요소를 클릭하면 button 요소에 있는 onClick이벤트가 실행되고 감싸고 있는 div에 있는 onClick이벤트가 실행된다. 만약 div위에 상위 요소가 있다면 그 요소도 마찬가지로 onClick이벤트가 실행된다. 이를 방지하기 위해서는 event.stopPropagation()이라는 웹API를 사용하면된다. 이를 사용할 경우 target하는 해당 요소에서만 이벤트가 발생하게 된다.

DOM onclick vs React onClick

아래 두 코드의 차이가 뭘까? ex1 ex2 위의 버튼에서 작성한 onClickButton()의 경우에는 DOM의 Event, 아래는 리액트의 Event이다. 둘의 가시적인 차이는 react에서는 camelCase 컨벤션을 따른다. 또한 DOM Event의 경우에는 외부 자바스크립트를 언제든 쓸 수 있지만 React의 경우에는 이벤트를 반드시 컴포넌트가 생성될 때 명시돼있어야 한다. 참고자료 아티클

정수를 구하는 함수

Math.trunc() 정수를 구한다고 하면 어제 학습한 Double tilde 연산자가 생각나는데 그보다 가독성이 높고, 간단하게 작용하는 것 같아 앞으로 자주 이용할 것 같다. Math.trunc(-Infinity); // -Infinity Math.trunc("-1.123"); // -1 Math.trunc(-0.123); // -0 Math.trunc(-0); // -0 Math.trunc(0); // 0 Math.trunc(0.123); // 0 Math.trunc(13.37); // 13 Math.trunc(42.84); // 42 Math.trunc(Infinity); // Infinity 참고자료 MDN

[CSS] custom checkbox 만들기

checkbox를 css로 커스텀하기는 너무나 어렵다. 인터넷에서 열심히 찾아서 알아낸 방법. 잊지 않기 위해 적는다. All /*CSS*/ .all { position: absolute; opacity: 0; } .all:checked ~ .option > .checkmark { border-width: 1px; background-color: red; } .all:checked ~ .option > .checkmark:after { display: block; } .checkmark { position: absolute; top: 0; left: 0; height: 20px; width: 20px; border: 1px solid red; border-radius: 5px; margin-right: ..