📒솜이노트

javascript 검색 결과

해당 글 5건

# JS - Array.from()사용, NodeList와 배열의 차이

querySelectorAll() 은 배열처럼 보이지만 “배열이 아니다.”그래서 map(), filter() 같은 배열 전용 메서드를 쓸 수 없다. Array.from() 으로 진짜 배열로 변환하는 과정이 필요하다.1) querySelectorAll()의 반환값은 “NodeList”예를 들어:const checked = document.querySelectorAll(".row-check:checked");checked 는 배열이 아니다.정확한 타입은 NodeList 라는 “유사배열 객체”.유사배열이란:길이(length) 있음인덱스로 접근 가능여러 요소를 담고 있음하지만,map() 없음filter() 없음reduce() 없음즉, 배열처럼 생겼지만 배열이 아니다.2) NodeList와 배열(Array)의 차..

🖥️ 프론트엔드/🟡JS, React 2025. 12. 12. 08:52

# JS - debounce() 함수 완전 정리

프론트엔드 개발하면서 디바운스 함수를 접해보신 적 있나요?스크롤, 검색창 입력, 윈도우 리사이즈처럼 짧은 시간에 반복해서 호출되는 이벤트를 일정 시간 동안 모아서 한 번만 실행하도록 하는 기술입니다.debounce()란?일정 시간 동안 이벤트가 반복 발생해도, 마지막 호출만 실행되게 하는 함수 제어 기법예를 들어, 검색창에 글자를 입력할 때마다 API를 호출하면 서버가 과부하가 걸릴 수 있어요.이때 debounce()를 사용하면 입력이 멈춘 후 특정 시간(예: 300ms)이 지나면 딱 한 번 API를 호출하게 만들 수 있어요.debounce()가 필요한 상황다음과 같이 “너무 자주 실행되는 이벤트”에서 필요합니다. :실시간 검색 API 호출윈도우 리사이즈 이벤트스크롤 이벤트(무한 스크롤, 스크롤 위치 저..

🖥️ 프론트엔드/🟡JS, React 2025. 12. 10. 13:43

# 이벤트 위임(Event Delegation) 완전 이해하기

DOM에서 요소를 클릭할 때 실행되는 이벤트는 **자식 → 부모로 전파(버블링)**됩니다.이 특성을 이용해서, “여러 자식 요소마다 이벤트를 붙이지 않고 부모 하나에 이벤트를 맡기는 방식”을 **이벤트 위임(Event Delegation)**이라고 합니다.1. 기존 방식: 요소마다 이벤트 직접 등록deleteBtn.addEventListener("click", function(){ newDiv.remove();})✔ 동작 방식카드 1개 생성 → 삭제 버튼 1개 → 이벤트 핸들러 1개카드 100개 생성 → 삭제 버튼 100개 → 이벤트 핸들러 100개즉, 요소 개수만큼 이벤트가 증가한다. 이 방식의 문제점:카드 100개면 이벤트 핸들러도 100개 생김성능 떨어지고 관리가 복잡해짐동적으로 추가된 요소는..

🖥️ 프론트엔드/🟡JS, React 2025. 11. 26. 09:30

# 자바스크립트 변수 선언 방식별 함수 스코프(function scope) 차이점 !

자바스크립트의 변수는 선언 방식에 따라 스코프(유효 범위)가 달라집니다. var : 함수 스코프(function scope)let, const : 블록 스코프(block scope)여기서 "스코프"는 그 변수를 사용할 수 있는 코드의 범위를 말합니다. 함수 스코프란?var로 선언된 변수는 함수 전체에서 유효합니다.즉, if, for, { } 같은 블록({}) 내부에 선언해도 블록 밖에서 접근 가능합니다. 블록 스코프란?let이나 const는 해당 블록({}) 안에서만 유효합니다. ECMAScript 2015(ES6)에서 추가된 기능입니다.예제(1) var는 함수 스코프if (true) { var x = 5;}console.log(x); // 5 var x는 if문 블록 {} 안에서 선언됐지만,자바스..

🖥️ 프론트엔드/🟡JS, React 2025. 11. 10. 09:55

# Leaflet vs OpenLayers 차이 정리 + Leaflet 예제

1. 기본 철학Leaflet"가볍고 간단"을 목표로 만든 라이브러리핵심 기능만 제공 (타일맵, 마커, 팝업, GeoJSON 표시 등)플러그인 생태계가 풍부해서 필요한 기능만 붙이는 방식OpenLayers"올인원" GIS 라이브러리벡터/래스터, 좌표 변환, 스타일링, WMS/WFS 같은 고급 GIS 기능을 기본 내장기능은 많지만 러닝커브가 있음2. 성능Leaflet가볍고 빠르지만, 대규모 데이터(수만 개 피처)를 다룰 때는 성능 저하가 생김모바일 최적화가 잘 돼 있음 OpenLayers복잡한 대용량 데이터도 처리 가능 (수만~수십만 피처)WebGL 기반 렌더링 지원 → 성능적으로 더 강력3. 좌표계/투영법Leaflet기본이 EPSG:3857(Web Mercator)다른 좌표계 지원은 제한적 → proj4j..

🖥️ 프론트엔드/🌏GIS 2025. 9. 8. 14:01