Develop Log/JavaScript 썸네일형 리스트형 웹 컴포넌트 알아보기 웹 컴포넌트 웹 컴포넌트(Web Components)는 웹 페이지와 웹 앱을 만드는 데 사용하는 재사용 가능한 사용자 지정 요소를 만들 수 있게 하는 기술들의 집합이다. 웹 컴포넌트는 네이티브 웹 표준을 기반으로 하므로, 추가적인 라이브러리나 프레임워크 없이도 동작하며, 다양한 프레임워크와 함께 사용될 수 있다. 생기게 된 계기 프레임워크의 파편화: 웹 개발의 역사를 거슬러 올라가면, 다양한 JavaScript 라이브러리와 프레임워크들이 서로 경쟁하며 성장해 오며 jQuery, Angular, React, Vue 등과 같은 도구들이 각자의 컴포넌트 시스템을 가지게 되었다. 이로 인해 동일한 컴포넌트를 다양한 프레임워크에 맞게 재작성해야 하는 상황이 발생하게 되었고, 웹 컴포넌트는 이러한 프레임워크의 경계.. 더보기 이벤트 델리게이션 알아보기 이벤트 델리게이션이란? 이벤트 델리게이션(Event Delegation)은 특정 요소의 모든 자식에 개별 이벤트 리스너를 추가하는 대신, 상위 요소에 단 하나의 이벤트 리스너를 추가하는 기법이다. 상위 요소에서 발생한 이벤트는 하위 요소까지 전파되는 이벤트 버블링을 활용하여 작동하는데 이번 내용에서는 델리게이션 기법을 사용하여 어떻게 코드를 구성하는지, 왜 사용하는지 알아보려고 한다. 기본 동작 원리 이벤트 델리게이션의 기본 원리는 DOM 이벤트가 버블링(bubbling) 되는 방식을 활용하는 것이다. 이벤트 버블링(Event Bubbling) 이벤트 버블링은 특정 DOM 요소에서 이벤트가 발생했을 때, 해당 이벤트가 상위의 요소로 전파되는 현상을 의미한다. 이 현상은 최상위 요소(대게 document .. 더보기 친숙하지만 생소한 NPM, Yarn 알아보기 NPM ? Yarn ? 자바스크립트 개발을 할 때, 우리는 종종 라이브러리나 도구를 프로젝트에 추가해야 한다. 이를 도와주는 도구들이 바로 패키지 매니저인데, 가장 많이 쓰이고 프로젝트를 생성할 때 가장 먼저 보이는 패키지 매니저 npm과 yarn에 대해 알아보려고 한다. NPM (Node Package Manager) npm은 Node.js에서 기본으로 제공되는 패키지 매니저로, 2010년에 처음 출시되었다. Node.js의 초창기부터 빠르게 성장하면서, 커뮤니티는 공유된 코드 조각들을 쉽게 관리하고 배포할 방법의 필요성을 느꼈고, 이에 따라 npm이 탄생하게 되었다. 기능 패키지 저장소: npm은 수백만 개의 자바스크립트 라이브러리와 도구를 호스팅하는 중앙 저장소 역할을 한다. 패키지 설치 & 관리:.. 더보기 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.. 더보기 React, Vue, Angular 비교하기 React, Vue, Angular 비교하기 React, Vue, 그리고 Angular는 현대 웹 개발에서 가장 널리 사용되는 FrontEnd 프레임워크 및 라이브러리들 중 하나이다. 위 세가지를 통틀어 FrontEnd 삼대장이라고도 많이 불리는데 각각의 특징은 무엇이고 어떤 차이점이 있는지 기록해보려고 한다. React (Library) 제작 : Facebook (Meta) 사이트 : https://react.dev/ Facebook에서 개발하고 관리하는 오픈 소스 JavaScript 라이브러리로, 사용자 인터페이스를 구축하기 위해 설계 되었다. React는 컴포넌트 기반의 UI 구축에 중점을 둔 라이브러리며, Virtual DOM을 활용해 빠른 렌더링 성능을 제공한다. 특징 컴포넌트 기반 구조: Re.. 더보기 라이브러리, 프레임워크 정확히 구분하기 (feat. React) FrontEnd 개발을 하게 되면 항상 마주치는 라이브러리, 프레임워크가 있다. FrontEnd 개발 시 가장 많이 듣는 3대장 React, Vue, Angular 부터 시작해서 날짜, 시간등을 쉽게 사용할 수 있게 해주는 Moment.js, day.js, DOM을 조작하여 이벤트나 여러 효과를 쉽게 구현할 수 있도록 해주는 JQuery같이 많은 오픈 소스를 사용하면서 어느 것은 라이브러리, 어느 것은 프레임워크지 궁금해지기 시작했다. 그래서 이번 기회에 둘의 차이점은 무엇이고 지금 내가 가장 많이 사용하는 React는 둘 중 어느 것에 속하는지 알아보고 그 내용을 정리해서 남기기로 했다. 라이브러리(Library) 자바스크립트 라이브러리란 특정 작업이나 기능을 수행하기 위한 자바스크립트 코드의 모음이다.. 더보기 이전 1 2 3 다음
