본문 바로가기

전체 글191

출력 시 숫자에 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.
해당 섹션에 도착 시 nav에 이벤트 주기 scroll spy Intersection Observer API - Web API | MDN IntersectionObserver - Web API | MDN교차 영역을 계산할 때 루트의 바운딩 박스에 적용할 오프셋입니다. 즉, 필요에 따라 계산 용도로 루트 영역을 늘리거나 줄일 수 있습니다. 생성자 설정에 지정한 값은 생성자 내에서 내부 조건developer.mozilla.org스크롤을 내릴 때마다 섹션에 도착하게 된다.그럴 때마다 해당하는 섹션의 nav에 색을 주려고 한다.이때 이용하는 것이 IntersectionObserver이다.스크롤 위치를 감지해서현재 화면에 보이는 섹션의 id를 추적네비게이션 하이라이트 같은 곳에 사용한다. 탄생 배경과거: scroll 이벤트 기반window.addEventListener("s.. 2025. 12. 25.
nav 클릭 시 원하는 섹션으로 스크롤 이동 Anchor Scroll nav를 클릭했을 때 해당 섹션 위치로 이동하는 것을 만들어보고 싶었다.export default function About() { return ( 우선 해당 섹션에 id를 작성한다.id에 따라 target을 설정할 것이다.export interface navType { id: string; label: string; target: string;}const nav = [ { id: "01.", label: "About", target: "AboutMe" }, { id: "02.", label: "Skills", target: "Skill" }, { id: "03.", label: "Projects", target: "Projects" }, { id: "04.", label: "Exp.. 2025. 12. 25.

티스토리툴바