JavaScript 개발에서 자주 사용되는 함수들을 모아 간편하게 제공하는 유틸리티 라이브러리는 생산성을 높이고 코드 품질을 개선하는 데 큰 도움이 된다. es-toolkit은 JavaScript API를 활용해 높은 성능과 작은 번들 사이즈를 제공하는 유틸리티 라이브러리이다. 💡es-toolkit란?es-toolkit은 토스에서 개발한 유틸리티 라이브러리로, 자바스크립트 개발에서 자주 사용되는 다양한 유틸리티 함수를 보완하고 확장하였다. 이 라이브러리는 lodash와 같은 기존의 유틸리티 라이브러리와 비슷한 기능을 제공하지만, 최신 JavaScript API를 활용하여 최대 97% 더 작은 번들 사이즈와 2~3배 빠른 속도를 보유하고 있다. 특히 TypeScript 타입을 내장하고 있어, 타입 안전성..
🍁Scroll Event 기본 코드 Title Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates quia veniam quisquam voluptatibus facilis iste ad sequi? Ducimus, optio fugiat. Tempora non fugiat nobis soluta a quia, aliquam mollitia eos. Soluta maiores quisquam molestias nemo eos at neque impedit, perspiciatis dolorem, enim iusto obcaecati sit suscipit minus, non dolores doloremque! Esse a adipisc..
🍁Arrow Function 자바스크립트의 화살표 함수(Arrow Function)는 자바에서의 람다라고 생각하면 된다. 자바에서 람다는 익명 객체의 추상 메서드를 표현하는 기술이었다면, 자바스크립트의 화살표 함수는 익명 함수를 표현하는 기술이다. 자바스크립트의 함수는 객체에 종속되지 않아도 사용할 수 있으므로 자바보다 좀 더 간단하게 사용한다. [Java] 람다식 (Lambda Expression) 💡람다식 람다식 (Lambda Expression)은 기존에 하던 작업을 편리하고 간결하게 만들어주는 기술로, 함수형 프로그래밍 개념을 자바에 도입한 것이다. 주로 컬렉션 조작을 위해 스트림(Stream)과 함께 isaac-christian.tistory.com 람다에 대해서는 위 글을 참고한다. 1. 함수..
🍁Event Bubbling, Event Tunneling ⬆️Event Bubbling 이벤트 버블링(Event Bubbling)은 이벤트가 발생한 요소에서 시작해 상위 DOM 트리 요소로 이벤트가 전파되는 방식이다. 가장 하위의 요소에서 이벤트가 시작되어 가장 상위의 부모 요소까지 이벤트가 전파되며, 각 요소의 이벤트 핸들러가 순차적으로 호출된다. ⬇️Event Tunneling 이벤트 터널링(Event Tunneling)은 이벤트 버블링과 반대로 이벤트가 상위 요소에서 시작하여 이벤트가 발생한 요소까지 전파되는 방식이다. 이벤트는 상위 요소에서 시작하여 하위 요소로 내려가며, 마찬가지로 이벤트 핸들러는 최상위 요소에서 시작하여 하위 요소로 내려가면서 호출된다. 이벤트 터널링은 다른 말로 Event ..
🍁Closure 클로저(Closure)는 고유한 개념이 아니라, 함수형 프로그래밍 언어에서 발견되는 특성(기술)이다. 클로저는 함수 내부에 정의된 함수가 외부 함수에 접근할 수 있는 방법을 제공하며, 이를 통해 함수는 자신이 생성된 위치의 스코프에 있는 변수들에 접근하고 수정할 수 있게 한다. 지역 함수 선언 function outer() { //지역 변수(outer) let a = 10; console.log('a', a); //지역 함수(outer) function inner() { //지역 변수(inner) let b = 20; console.log('b', b); } inner(); //console.log('b', b); } outer(); //inner(); //console.log('a', ..
🍁window 객체 [JavaScript] BOM: window 객체 🍁window 객체 window.open(URL, name, options); URL: 새 창의 URL name: 새 창의 이름 options: 새 창 옵션들 window로 창을 새로 만들었을 때 만들어진 창을 자식창이라고 한다. 옵션들 사이는 띄어쓰기를 해도 되 isaac-christian.tistory.com window 객체에 대해서는 위 글을 참고한다. 내장 객체에 프로퍼티 추가 const isaac = { name: 'isaac' } isaac.age = 25; 자바스크립트는 객체에 프로퍼티를 자유롭게 추가할 수 있다. const now = new Date(); console.log(now); now.color = 'tomat..
🍁 Function 자바스크립트의 함수는 1급 객체(First Citizen)라는 말이 있다. 1급 객체는 자바스크립트에서만 볼 수 있는 현상은 아니고, 다른 언어(Switf - 아이폰 개발 언어, Python 등)에서도 볼 수 있는 현상이다. 이는 쉽게 말하자면 함수를 객체처럼 취급하여 함수를 값(데이터)으로 사용할 수 있게 하는 것이다. [JavaScript] Function (함수) 🍁Function Java Method 자바의 메서드는 아래의 양식으로 만들어진다. public [static] int m1 (int num) { return 10; } 자바스크립트는 접근 지정자 표현이 없으므로 public을 생략한다. static은 정적인지를 묻는 isaac-christian.tistory.com 자..
🍁Object 자바스크립트에 클래스는 없는 대신에 내장 객체를 제공한다고 했다. 이건 클래스가 아닌가요? class Test { } 아닙니다. 이건 클래스의 껍데기를 가진 다른 것이에요. 내장 객체 new Array() new Date() Math.메소드() 기타 등등.. 내장 객체에는 Array, Date, Math, Object 등이 있다. BOM 객체 window document form text button 기타 등등.. DOM 객체 element attribute text comment 기타 등등.. DOM 객체는 노드들을 의미한다. 위의 객체들은 이미 타입이 정의되어 있어서 개발자가 가져다 쓰는 것들이다. 그러나 개발을 하다 보면 개발자가 스스로 타입을 정의해야 하는 일이 생긴다. 이럴 때 사..
