JavaScript 개발에서 자주 사용되는 함수들을 모아 간편하게 제공하는 유틸리티 라이브러리는 생산성을 높이고 코드 품질을 개선하는 데 큰 도움이 된다. es-toolkit은 JavaScript API를 활용해 높은 성능과 작은 번들 사이즈를 제공하는 유틸리티 라이브러리이다. 💡es-toolkit란?es-toolkit은 토스에서 개발한 유틸리티 라이브러리로, 자바스크립트 개발에서 자주 사용되는 다양한 유틸리티 함수를 보완하고 확장하였다. 이 라이브러리는 lodash와 같은 기존의 유틸리티 라이브러리와 비슷한 기능을 제공하지만, 최신 JavaScript API를 활용하여 최대 97% 더 작은 번들 사이즈와 2~3배 빠른 속도를 보유하고 있다. 특히 TypeScript 타입을 내장하고 있어, 타입 안전성..
이 글은 자바스크립트를 사용한 심화 기술을 활용할 수 있도록 기초적인 문법과 개념을 얕게 다룬다. 여기서 다루는 기술은 자바스크립트뿐만 아니라 다른 프로그래밍 언어, 라이브러리, 프레임워크에서 활용할 수 있다. 각 기술을 설명하기에 앞서 자주 사용되는 자바스크립트 문법을 짚고 넘어가도록 하자. 💡let과 const 키워드 let과 const의 역할 let을 사용하는 경우 변수를 선언하고, 나중에 재할당할 가능성이 있는 경우에 사용된다. 변수의 값이 변경될 수 있는 상황이거나, 변수의 스코프가 한정적인 경우에 사용된다. 반복문에서 반복 변수를 선언할 때 주로 사용된다. 예를 들어, 반복문 내에서 임시적으로 사용되는 변수나 조건에 따라 값이 변경되는 변수 등에 사용된다. const를 사용하는 경우 변수를 선..
💡Promise란? Promise(프로미스)는 자바스크립트에서 비동기 작업을 처리하는 객체이다. 주로 서버에서 데이터를 요청하거나 파일을 읽는 등의 비동기 작업을 수행할 때 사용된다. Promise는 성공 또는 실패와 같은 비동기 작업의 결과를 나타내는 데 사용되며, 자바스크립트에서 비동기 처리가 가장 많이 일어나는 XMLHTTPRequest 처리에서 유용하게 사용된다. XMLHTTPRequest XMLHttpRequest는 웹 브라우저에서 제공하는 자바스크립트 객체로, 서버와 비동기적으로 데이터를 교환할 수 있는 기능을 제공한다. 이 객체를 사용하면 웹 페이지를 새로 고치지 않고도 서버로부터 데이터를 가져와서 웹 페이지의 일부분을 업데이트할 수 있다. XMLHttpRequest 객체를 사용하여 서버로 ..
🍁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. 함수..
🍁Constructor Function 객체와 멤버 변수 생성 const obj = new Object(); const obj = {}; 첫 번째 방법 const o1 = new Object(); //첫 번째 방법 o1.name = 'Isaac'; o1.hello = function() { console.log('hello'); }; 첫 번째 방법으로는 name 멤버 변수와 hello 멤버 메서드를 위와 같이 만든다. 두 번째 방법 const o2 = {}; //두 번째 방법 o2.name = 'Sopia'; o2.hello = function() { console.log('hello'); } 두 번째 방법은 '{}' 만으로 객체를 만들어서 간편하다 보니 의존도가 높다. 첫 번째든 두 번째든 name이라..
🍁transition 구현 타이머를 사용해 CSS에서 transition을 구현한 것처럼 자바스크립트에서도 비슷한 효과를 줄 수 있다. 자바스크립트는 제어를 할 수 있다는 점에서 CSS의 transiton과 차이가 있다. [CSS] transition (전환) 🍁transition transition은 객체의 속성(상태) 값이 변화되는 과정을 시간 순서대로 보여주는 애니메이션 속성이다. 이 작업은 본래 JavaScript에서나 할 수 있는 것이었다. 하지만 지금은 CSS에서 간단하 isaac-christian.tistory.com [CSS] animation (애니메이션) 🍁animation CSS 객체의 움직임을 단순하게 표현할 때에는 transition을 사용한다. animation은 그보다 더 나아..
🍁CSS 조작 자바스크립트로 CSS를 조작하는 방법에는 직접적인 방법과 간접적인 방법이 있다. 모든 태그는 인라인 스타일 시트의 style 속성을 제공하며, 자바스크립트에서도 이러한 style 프로퍼티를 제공한다. style 프로퍼티로 CSS를 조작하는 직접적인 방법과 class로 CSS를 조작하는 간접적인 방법이 있다. style 프로퍼티로 조작 기본 코드 CSS 상자 BOM에서 구현 btn1.addEventListener('click', function() { box1.style = 'color: cornflowerblue'; }) btn1.addEventListener('click', function() { box1.style = 'color: cornflowerblue; font-size: 2re..
