본문 바로가기

FrontEnd/JavaScript

(3)
CommonJs와 ESModule의 차이점 자바스크립트가 브라우저 환경을 넘어 서버와 데스크톱까지 확장되면서 모듈 시스템의 필요성이 대두되었다. CommonJs는 이런 시대적 요구에 맞추어 Node.js와 함께 발전하였고 이후 ESModule(ESM) 은 JavaScript의 공식 표준으로 자리잡게 되었다. 이 글에서는 이 두 모듈 시스템의 차이를 단순한 문법 비교를 넘어서 런타임 동작 방식, 번들러와의 상호작용, 호환성 등 다양한 관점에서 깊이있게 정리한다.모듈 시스템의 등장 배경초기의 JS: 모든 스크립트는 전역 스코프에서 작성되었고, 스크립트 간 의존성 관리가 어려웠다.CommonJS: Node.js에서 모듈화를 지원하기 위해 등장. 동기적 로딩 기반.ESModule: JavaScript의 공식 사양(ECMAScript 2015)으로 추가된..
requestAnimationFrame에 대해 알아보기 requsetAnimationFrame이란? requestAnimationFrame()은 브라우저에서 애니메이션을 최적화하여 실행할 수 있도록 제공하는 JavaScript API이다.주로 CSS 애니메이션이나 setTimeout(), setInterval()을 사용하는 것 보다 성능이 뛰어나기 때문에 웹 애니메이션을 구현할 때 많이 사용된다. requestAnimationFrame()의 목적은 애니메이션을 위한 프레임 렌더링을 브라우저의 화면 갱신속도(리페인팅)에 맞추는 것이다.이 API를 사용하면 브라우저의 리프레시 속도(초당 60프레임, 60FPS)를 고려하는데 이 갱신 주기를 맞추어 콜백을 실행해 부드럽고 효율적인 애니메이션을 만들 수 있다. 이를 통해 브라우저가 최적의 시점에 프레임을 렌더링하도록..
자바스크립트 함수의 특징 자바스크립트 함수에는 여러가지 특징들이 있다.  1.일급 객체일급 객체(First-Class Object)는 프로그래밍 언어에서 특정 타입의 데이터가 아래 조건을 만족할 때 사용하는 용어이다.변수에 할당할 수 있다.함수의 인자로 전달할 수 있다.함수의 반환값으로 사용할 수 있다. 자바스크립트에서 함수는 값처럼 취급될 수 있으며, 변수에 할당하거나, 다른 함수의 인자로 전달하거나, 함수의 반환값으로도 사용할 수 있다.const sayHello = function() { return 'Hello'; };console.log(sayHello()); // 'Hello'const executeFunction = function(fn) { return fn();};console.log(executeFunction..