728x90 Frontend/JavaScript14 브라우저 JavaScript 렌더링 엔진, V8 개요V8엔진 특징과 Javascript가 어떻게 해석되고 실행되는지 알면 JavaScript 엔진의 작동 방식을 더 깊이 이해하면 코드의 성능 특성을 추론하는 데 도움된다!V8 엔진이 무엇인지, 왜 그리고 어떻게 동작 하는지 알아보자. 렌더링 엔진이란?JavaScript 엔진을 내장한 브라우저의 표시 기능을 담당하는 모듈Blink, Gecko, WebKit렌더링 엔진은 자바스크립트뿐만 아니라 HTML과 CSS를 해석하고 화면 드로잉을 종합적으로 수행 Javascript 엔진이란?자바스크립트는 동적 타입의 인터프리터 언어이며 자바스크립트에서 실행되는 모든 것들은 엔진에 의해 처리된다.엔진은 주변 환경과 상호작용하면서 컴퓨터가 프로그램을 실행하는 데 필요한 machine code(바이트코드)를 변환/생성 역.. 2025. 4. 17. JavaScript 모듈 시스템 | CJS, AMD, UMD, ESM 모듈화 방식CommonJS : exports 키워드로 모듈을 생성, require() 함수로 임포트하는 방식장점 : 모든 파일을 로컬에 저장하고 동기적으로 동작하여 전역변수와 지역변수를 분리할 수 있게 되었다.단점 : 필요한 모듈을 가져오는데 대기하게 됨.AMD(Asynchronous Module Definition): CommonJS를 비동기적으로 사용할 수있는 도구ESM : import, 와 export 로 임포트하는 방식(ES6가 도입 이후)장점 : 키워드 만으로 모듈화 가능단점 : 모듈별로 을 네트워크 통신을 통해 가져오면서 비용과 시간 소요 https://beomy.github.io/tech/javascript/cjs-amd-umd-esm/#%ED%8A%B9%EC%A7%95-%EB%B9%84%.. 2025. 2. 13. JavaScript window 객체: 주요 속성, 메서드, 이벤트 알아보기 개요window 객체는 JavaScript에서 전역 객체(global object)로, 브라우저 환경에서 제공하는 다양한 기능과 속성을 제공합니다. 브라우저의 전체 창(window)에 대한 정보를 제공하며, 전역 범위에서 접근 가능합니다. Node.js에서는 window 객체 대신 global 객체를 사용합니다. window 객체는 웹 개발에서 핵심적인 역할을 하며, DOM, 브라우저 상태, 이벤트 관리 등 다양한 작업에 사용됩니다. 다만, 전역 네임스페이스를 오염시킬 수 있으므로 과도한 사용은 피하는 것이 좋습니다. window 객체의 대표적인 속성1. document현재 로드된 HTML 문서를 나타내는 객체.DOM 트리 조작 및 HTML 요소 접근 가능.2. location현재 페이지의 URL .. 2024. 11. 22. Bun 소개 / JavaScript 런타임 비교 Incredibly fast JavaScript runtime, bundler, test runner, and package manager -- all in one(믿을 수 없을 정도로 빠른 JavaScript 런타임, Bundler, Test Runner 및 Package Manager - 모두 하나로) 개요최근에 Bun 이라는 도구를 발견했다. 알고보니 이미 2023년 인기 오픈소스로 선정 된 Bun !웹 서버 성능이 매우 우수하다는 평가를 들었고, 번들링과 테스팅 기능도 함께 갖추고 있다고 해서 호기심이 생겨 공식 홈페이지를 찾아보고 동작 방식을 간단히 이해를 기반으로 Bun 포스팅을 작성하고자 한다. ** 오픈 소스 트랜드는 어디서 알 수 있는가! https://risingstars.js.or.. 2024. 5. 31. 웹 브라우저와 Adobe Flash로 한눈에 보는 Javascrpit 역사 | LiveScript 웹 브라우저 탄생과 함께 LiveScript 부터Javascrpit, Adobe Flash, 웹 프론트엔드 프레임워크 탄생 배경까지 확인해보자 1991년1. Java 탄생Sun Microsystems에서 근무하는 소규모 엔지니어 팀이 개발한 "Oak"라는 프로젝트로 탄생1993년1. Mosaic Web Brower 브라우저 탄생 (1993.04)최초의 시각적 웹 브라우저 Mosaic Web Brower가 출시 1994년1. Yahoo 웹사이트 탄생 (1994.03)데이비드 플러먼(David Filo)과 제리 양(Jerry Yang)에 의해 창립되었습니다정보가 있는 사이트들을 찾아보기 쉽게 분류하는 웹사이트(검색엔진)로 시작, 미디어 기업으로 전략HTML, CSS, javascript를 사용하되 동적 .. 2024. 4. 19. JavaScript는 어떻게 동작할까? | 컴파일러, 트랜스파일러, 번들러의 탄생과 진화 개요프론트엔드 개발을 시작하면 가장 먼저 마주하는 언어가 JavaScript입니다. 브라우저만 있으면 실행되니, “인터프리터 언어구나~” 하고 넘어가곤 하죠. 하지만 최근 JavaScript 개발 환경은 매우 복잡해졌습니다.typeScript 코드가 컴파일이 되고, React와 Virtual DOM 같은 프레임워크와 트랜스파일러 기반의 언어들이 등장하며 Babel 같은 트랜스파일러가 등장하고, Webpack, Vite 같은 번들러가 무언가를 만들어냅니다.이번 포스팅에서는 JavaScript는 어떻게 돌아가는지 그리고 왜 이런 도구들이 생겨났는지 알아보겠습니다. 자바스크립트의 동작 원리인터프리터 vs 컴파일러과거 JavaScript는 브라우저 가 코드를 한 줄씩 읽고, 그때그때 실행되는 인터프리터 언.. 2024. 4. 11. 생산성있는 Javascript 코드 작성 | longhand, shorthand 개요개발에서 longhand(긴 형식)과 shorthand(짧은 형식)는 같은 작업을 수행하지만 코드 길이나 표현 방식이 다릅니다. shorthand는 더 간결한 코드 스타일을 의미하며, 특히 CSS, JavaScript, 객체 표현 등에서 많이 사용됩니다. 1. 조건문 (Control Statements)if 문longhandif (likeJavaScript == true)var a;if ( a != true ) {// do something...} shorthandif (likeJavaScript)var a;if ( !a ) {// do something...} if else 문longhandvar big;if (x > 10) { big = true;}else { big = false;} .. 2024. 3. 4. JavaScript, ECMAScript (ES5, ES6, ES2024) | 웹 표준 개요웹 표준이 도입된 이후, 프로그래밍 언어와 라이브러리 개발 시 대부분 웹 표준을 따르게 되어 한 번 작업으로도 많은 시간과 노동력을 절약할 수 있게 되었습니다.따라서 HTML, CSS, JavaScript와 같은 웹 표준을 준수하며 개발하는 습관을 가지는 것이 중요합니다. 웹 표준이란 ?**웹 표준(Web Standards)**은 W3C(World Wide Web Consortium) 표준화 단체에서 권고하는 기술과 규칙을 의미합니다.다양한 운영체제(OS), 브라우저, 디바이스에서도 웹페이지가 동일한 모양과 기능으로 작동하도록 보장합니다.신체적, 환경적 제약이 있는 사용자도 웹에 접근성을 가지고 원활히 이용할 수 있도록 설계된 원칙입니다https://www.w3.org/ W3CThe World Wid.. 2024. 1. 8. [JavaScript] 배열 합집합, 교집합 반환 / Set, filter, include 합집합const arrA = [1, 4, 3, 2]; const arrB = [5, 2, 6, 7, 1];const result = [...new Set([...arrA, ...arrB])]; // [1, 4, 3, 2, 5, 6, 7] 교집합const arrA = [1, 4, 3, 2]; const arrB = [5, 2, 6, 7, 1];const result = arrA.filter(it => arrB.includes(it)); // [1, 2] 2023. 12. 30. 이전 1 2 다음 728x90
