본문 바로가기

반응형

javascript

웹 컴포넌트 알아보기 웹 컴포넌트 웹 컴포넌트(Web Components)는 웹 페이지와 웹 앱을 만드는 데 사용하는 재사용 가능한 사용자 지정 요소를 만들 수 있게 하는 기술들의 집합이다. 웹 컴포넌트는 네이티브 웹 표준을 기반으로 하므로, 추가적인 라이브러리나 프레임워크 없이도 동작하며, 다양한 프레임워크와 함께 사용될 수 있다. 생기게 된 계기 프레임워크의 파편화: 웹 개발의 역사를 거슬러 올라가면, 다양한 JavaScript 라이브러리와 프레임워크들이 서로 경쟁하며 성장해 오며 jQuery, Angular, React, Vue 등과 같은 도구들이 각자의 컴포넌트 시스템을 가지게 되었다. 이로 인해 동일한 컴포넌트를 다양한 프레임워크에 맞게 재작성해야 하는 상황이 발생하게 되었고, 웹 컴포넌트는 이러한 프레임워크의 경계.. 더보기
이벤트 델리게이션 알아보기 이벤트 델리게이션이란? 이벤트 델리게이션(Event Delegation)은 특정 요소의 모든 자식에 개별 이벤트 리스너를 추가하는 대신, 상위 요소에 단 하나의 이벤트 리스너를 추가하는 기법이다. 상위 요소에서 발생한 이벤트는 하위 요소까지 전파되는 이벤트 버블링을 활용하여 작동하는데 이번 내용에서는 델리게이션 기법을 사용하여 어떻게 코드를 구성하는지, 왜 사용하는지 알아보려고 한다. 기본 동작 원리 이벤트 델리게이션의 기본 원리는 DOM 이벤트가 버블링(bubbling) 되는 방식을 활용하는 것이다. 이벤트 버블링(Event Bubbling) 이벤트 버블링은 특정 DOM 요소에서 이벤트가 발생했을 때, 해당 이벤트가 상위의 요소로 전파되는 현상을 의미한다. 이 현상은 최상위 요소(대게 document .. 더보기
var, let, const 차이 var, let, const FrontEnd 개발을 하면서 개발을 처음 시작할 땐 항상 var키워드를 사용하여 변수를 선언하면서 개발을 진행했었는데 요즘은 const키워드를 많이 쓰는 것 같다. ES6 이후 let, const가 생겼다고 하지만 var가 완전히 사라진게 아니고 그렇다고 var를 사용하는 일은 없지만 모두 변수를 선언하고 사용하는 키워드라는 공통점이 있어 세개의 키워드가 어떤 차이가 있는지, 어떻게 사용되는지 정리하려고 한다. 키워드 알아보기 var Function-scoped: var로 선언된 변수는 현재의 실행 컨텍스트 내에서 사용 가능하며, 이는 보통 현재의 함수 블록을 의미한다. 즉, 함수 외부에서 선언된 var 변수는 전역 변수로 취급된다. Hoisting: var로 선언된 변수는.. 더보기
Console을 더 예쁘게! Console.log() JavaScript를 이용한 FrontEnd개발을 하다 보면 브라우저에서 개발자 도구를 통해 console창을 열어 데이터의 로그를 확인해야 할 때가 있다. 이럴 때 가장 많이 쓰이는 함수가 consoel.log()인데 로그를 이 console,*이 무엇이고 어떤 기능을 하는지, 또한 일반적인 log()말고 다른 어떤 종류들이 있는지 알아보고 정리하려고 한다. Console? Console은 JavaScript에서 제공하는 내장 객체로, 주로 디버깅에 사용된다. console 객체는 여러 메서드를 가지고 있으며, 이를 사용하여 개발자 도구의 콘솔 창에 로그, 정보, 오류 메시지 등을 출력할 수 있고 이를 이용해 에러를 찾고 수정할 수 있다. 동작 방식 console객체는 Fron.. 더보기
Virtual DOM 훑어보기 Virtual DOM이란? Virtual DOM은 "가상의 문서 객체 모델"을 의미한다. DOM(Document Object Model)은 웹 페이지의 구조를 표현하는 트리 형태의 데이터 구조로 이루어져 있는데, Virtual DOM은 이 DOM의 가벼운 복제본이라고 볼 수 있으며, 메모리 내에 존재하므로 실제 DOM보다 빠르게 조작할 수 있다. 작동 방식 추상화된 DOM 표현: Virtual DOM은 메모리 내에서 실제 DOM의 트리 구조를 추상화하여 표현한다. 각 노드는 JavaScript 객체로 표현되며, 실제 DOM에 직접적인 영향을 주지 않는다. 변화 감지: 사용자 상호작용이나 데이터 변경으로 인해 UI가 변경될 때마다 새로운 Virtual DOM 트리가 생성된다. 이 새 트리는 이전 Virtu.. 더보기
라이브러리, 프레임워크 정확히 구분하기 (feat. React) FrontEnd 개발을 하게 되면 항상 마주치는 라이브러리, 프레임워크가 있다. FrontEnd 개발 시 가장 많이 듣는 3대장 React, Vue, Angular 부터 시작해서 날짜, 시간등을 쉽게 사용할 수 있게 해주는 Moment.js, day.js, DOM을 조작하여 이벤트나 여러 효과를 쉽게 구현할 수 있도록 해주는 JQuery같이 많은 오픈 소스를 사용하면서 어느 것은 라이브러리, 어느 것은 프레임워크지 궁금해지기 시작했다. 그래서 이번 기회에 둘의 차이점은 무엇이고 지금 내가 가장 많이 사용하는 React는 둘 중 어느 것에 속하는지 알아보고 그 내용을 정리해서 남기기로 했다. 라이브러리(Library) 자바스크립트 라이브러리란 특정 작업이나 기능을 수행하기 위한 자바스크립트 코드의 모음이다.. 더보기
고차 함수(Higher-Order Function)를 알아보자! 고차함수 Higher-Order Function(HOF) 고차함수(HOF)란 함수형 프로그래밍에서 주로 사용되는 아주 중요한 개념으로, 다른 함수를 인자로 받거나, 함수를 결과로 반환하는 함수를 정의한다. 고차함수의 역할 콜백 함수 사용: 고차 함수는 콜백 함수를 인자로 받아 특정 작업을 수행하게 된다. 이는 비동기 작업이나 이벤트 처리, 배열 메서드 등에 활용되며, 자주 사용하는 예시로써 자바스크립트의 배열 메서드인 map(), filter(), reduce()가 있으며 이 메서드 모두 고차 함수이다. const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map((number) => { // map()에 들어가는 인자가 변수가 아닌 함수로 구성되어있다. .. 더보기
JavaScript ES6 (ECMAScript 2015 ) ES6 (ECMAScript 2015 ) ECMAScript 6 (ES6), 또는 ECMAScript 2015,는 JavaScript에 많은 새로운 기능과 개선사항을 도입한 아주 중요한 버전이라고 할 수 있다. 이 새로운 기능들은 JavaScript를 더 강력하고 유연한 언어로 만들어 주었으며, 개발자들이 더 효과적으로 코드를 작성하고 이해하도록 도와주게 되었다. ES6(ECMAScript 2015 )가 등장하기 전의 JavaScript는 간단한 스크립팅 언어로 시작되었다. 웹 페이지에 간단한 상호작용을 추가하거나 브라우저 동작을 제어하는 데에 주로 사용되었으며, 당시에는 모듈화, 클래스, 화살표 함수 등과 같은 고급 언어 기능이 없었기 때문에, JavaScript로 복잡한 애플리케이션을 만드는 것은 어.. 더보기

반응형