본문 바로가기

Computer Science191

출력 시 숫자에 1000 단위 숫자 넣기 const formatNumber = (num) => Number(num).toLocaleString("ko-KR"); Console.print(`${TOTALAMOUNTSPENT.name.padEnd(12, " ")} ${formatNumber(String(TOTALAMOUNTSPENT.price)).padStart(14, " ")}`); 숫자에 감싸주면 1000단위로 콤마가 찍힌다. 2026. 1. 5.
stopPropagation onClick={(e) => e.stopPropagation()} DOM 이벤트 처리는 다음과 같이 발생한다. 자식 요소 -> 부모 요소 -> 상위 요소 -> document 이벤트가 발생하면 다음과 같은 순서로 전달된다. 이러한 흐름을 막기 위해 사용하는 함수가 stopPropagation()이다. 이벤트를 막고자 하는 곳에 사용하면 이벤트 처리가 안된다. 모달에서 모달 내용을 클릭했을 때는 닫히지 않지만밖을 클릭했을 때 닫히도록 만드는 곳에서 사용한다. 2025. 12. 29.
Framer Motion Motion — JavaScript & React animation library Motion — JavaScript & React animation libraryMotion (prev Framer Motion) is a fast, production-grade web animation library for React, JavaScript and Vue. Build smooth UI animations with examples, tutorials, and a tiny footprint.motion.dev React에서 애니메이션을 상태 변화처럼 다룰 수 있게 해주는 애니메이션 라이브러리.CSS 애니메이션이나 keyframes처럼 언제 시작할지 계산하는 방식이 아니라,컴포넌트의 상태가 바뀌면 자연스럽게 애.. 2025. 12. 28.
import { } 유무 차이 import { category } from "@/app/data/skillsCategory"; { }가 있으면 named export를 가져온다. import category from "@/app/data/skillsCategory"; { }가 없으면 default export를 가져온다. 1. { } 있는 경우 -> named exportexport const category = [ { id: "foundation", ... }];import { category } from "@/app/data/skillsCategory"; { } 안에 export 변수 이름 동일해야 한다. 2. { } 없는 경우 -> default exportconst category = [ { id: "foundation",.. 2025. 12. 26.