jonbeo 님의 블로그

오늘은 자바스크립트(JavaScript)를 활용한 시간 제어 함수인setTimeout과 setInterval에 대해 자세히 알아보겠습니다.이 두 함수는 웹 개발 실무에서 매우 자주 사용되며,타이머 관련 기능을 구현할 때 유용하게 활용됩니다.✅ 1. setTimeout이란?setTimeout은 일정 시간이 지난 후에 단 한 번 특정 작업을 실행하도록 예약하는 함수입니다. setTimeout(() => { console.log('3초 후에 실행됩니다!');}, 3000); 📌 위 코드는 3초(3000ms) 후에 콘솔에 메시지를 출력합니다.✅ 2. setInterval이란?setInterval은 일정 시간 간격으로 계속 반복해서 특정 작업을 실행하도록 예약하는 함수입니다. setInterval(() => ..

JavaScript는 싱글 스레드 언어입니다.그런데도 여러 작업을 동시에 처리하는 것처럼 보이는 이유는 이벤트 루프(Event Loop) 덕분입니다.📌 1. Call Stack (콜 스택)자바스크립트 엔진이 실행하는 함수 호출 기록 저장소LIFO(Last In First Out) 구조함수 실행 → 스택에 push, 종료 → pop function a() { console.log("a"); }function b() { a(); console.log("b"); }b();// 실행 순서: a → b📌 2. Web APIs & Task Queue브라우저는 JS 엔진 외에도 **Web APIs (DOM, Timer, HTTP 요청)**를 제공합니다.비동기 함수(setTimeout, fetch)는 Web API..

자바스크립트에서 객체를 다룰 때 가장 흔한 에러는 “Cannot read property of undefined” 같은 오류입니다.이를 해결하기 위해 나온 문법이 Optional Chaining이며,또한 값이 null이나 undefined일 때만 기본값을 지정하는 Nullish Coalescing이 함께 자주 사용됩니다.🧩 1. Optional Chaining (?.)객체 프로퍼티 접근 시 null 또는 undefined가 나오면 에러 대신 undefined를 반환 const user = { profile: { name: "홍길동" }};console.log(user.profile?.name); // "홍길동"console.log(user.address?.city); // undefined (..

TypeScript(이하 TS)는 **JavaScript(이하 JS)의 상위 집합(Superset)**입니다.즉, JS 문법을 그대로 사용하면서 타입 시스템을 추가한 언어입니다.👉 "JS는 자유롭고, TS는 안전하다" 라고 이해하면 쉽습니다.📌 1. TypeScript를 쓰는 이유✅ 타입 안정성: 런타임 에러를 컴파일 단계에서 방지✅ 코드 가독성 & 유지보수성: 협업에서 타입이 문서 역할✅ IDE 지원 극대화: 자동완성(IntelliSense) 강화✅ 대규모 프로젝트 필수: 규모가 커질수록 버그 줄이고 개발 속도 ↑📌 2. JavaScript vs TypeScript 비교JS 예시 (타입 자유로움) function add(a, b) { return a + b;}console.log(add(10, ..

Node.js는 단순한 런타임 환경을 넘어서, npm 생태계 덕분에 강력한 개발 플랫폼으로 자리 잡았습니다.npm은 전 세계 개발자들이 만든 모듈을 쉽게 설치, 공유, 관리할 수 있게 해주는 도구입니다.이번 포스팅에서는 npm 기초부터 실무에서 자주 쓰는 패키지 관리법까지 정리합니다.🧩 1. npm이란?Node Package Manager의 약자Node.js 설치 시 기본 포함패키지(라이브러리, 모듈)를 설치하고 관리하는 도구JavaScript/TypeScript 프로젝트에서 사실상 표준📌 2. npm 기본 명령어 # 패키지 초기화npm init -y# 패키지 설치npm install 패키지명# 개발용(Dev Dependencies) 패키지 설치npm install 패키지명 --save-dev# 전역..

웹에서 이벤트를 처리할 때, 보통 요소마다 이벤트를 직접 등록합니다.하지만 요소가 많아질수록 메모리 낭비 + 성능 저하 문제가 생깁니다.이를 해결하는 방법이 바로 **이벤트 위임(Event Delegation)**입니다.🧠 1. 이벤트 위임이란?하위 요소에 이벤트를 직접 걸지 않고, 상위 요소에서 이벤트를 처리하는 기법 브라우저의 이벤트 버블링(Event Bubbling) 원리를 이용합니다.즉, 이벤트가 발생하면 부모 요소까지 이벤트가 전파되므로,부모에서 한 번만 이벤트를 등록해도 자식들의 이벤트를 감지할 수 있습니다.📌 2. 기본 예제 – 잘못된 방식 document.querySelectorAll(".item").forEach(item => { item.addEventListener("click"..

안녕하세요 😊JavaScript로 버튼이나 리스트 항목에 이벤트를 걸다 보면,요소가 많아질수록 코드가 복잡해지고 성능 문제가 생기기 쉽습니다. 이럴 때 효과적으로 사용하는 기법이 바로 **이벤트 위임(Event Delegation)**입니다.📍 1. 이벤트 위임이란?개별 요소에 직접 이벤트를 붙이지 않고,공통 부모 요소에 이벤트를 한 번만 등록해서하위 요소들의 이벤트를 **버블링(bubbling)**으로 처리하는 방법입니다.👉 즉, 수많은 자식 요소 대신 부모 한 곳에서 이벤트를 관리하는 방식입니다.📍 2. 기본 예시 (비효율적인 방법)리스트 항목마다 클릭 이벤트를 붙이면, 항목이 많을수록 비효율적입니다. Home About Contact 👉 항목이 1,000개라면 이벤트 리스너도 1,0..

안녕하세요 😊웹 개발에서 자주 만나는 개념이 바로 **비동기 처리(Asynchronous)**입니다.API 요청, 파일 읽기, setTimeout 같은 작업은 즉시 끝나지 않기 때문에 비동기 방식으로 처리됩니다.자바스크립트는 이런 작업을 다루기 위해 콜백(callback) → Promise → async/await 순으로 발전해 왔습니다.오늘은 그 중에서도 Promise와 async/await을 쉽게 설명해드리겠습니다.📍 1. Promise란?Promise는 “결과를 약속한다”는 의미 그대로, 비동기 작업의 성공/실패 결과를 표현하는 객체입니다. const fetchData = new Promise((resolve, reject) => { const success = true; if (succes..

안녕하세요 😊웹 개발을 하다 보면 scroll, resize, input 같은 이벤트가 너무 자주 실행되어 성능 저하를 일으키는 경우가 많습니다.예를 들어, 사용자가 검색창에 글자를 입력할 때마다 서버로 API 요청이 간다면 불필요한 요청이 수십 번 발생하겠죠? 이 문제를 해결하는 대표적인 기법이 바로 Debounce와 Throttle입니다.📍 1. Debounce – 마지막 동작만 실행Debounce는 사용자의 연속된 입력 중에서 마지막 동작만 실행되도록 하는 방법입니다. 예시: 검색창 자동완성 function debounce(fn, delay) { let timer; return function (...args) { clearTimeout(timer); timer = setTimeo..

안녕하세요 😊다국어·다지역 서비스를 만들 때는 날짜/숫자/통화 표기가 국가마다 다릅니다.Intl 네임스페이스는 이를 손쉽게 처리하는 표준 국제화 API입니다.1) 날짜/시간 – Intl.DateTimeFormat const d = new Date("2025-09-04T14:30:00Z");const ko = new Intl.DateTimeFormat("ko-KR", { dateStyle: "long", timeStyle: "short", timeZone: "Asia/Seoul"}).format(d);// 예: 2025년 9월 04일 오후 11:30const us = new Intl.DateTimeFormat("en-US", { weekday: "long", year: "numeric", month:..