본문 바로가기
728x90

frontend/JavaScript13

[JavaScript] CJS, AMD, UMD, ESM https://beomy.github.io/tech/javascript/cjs-amd-umd-esm/#%ED%8A%B9%EC%A7%95-%EB%B9%84%EB%8F%99%EA%B8%B0  https://medium.com/@sojjung3/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%AA%A8%EB%93%88-cjs%EC%99%80-esm%EC%9D%98-%EC%B0%A8%EC%9D%B4-d133660d01a8 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.
[JavaScript] Bun 소개 / 자바스트립트 런타임 비교 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.
[JavaScript] 컴파일러와 트랜스파일러의 동작 원리 이해하기 개요자바스크립트는 본래 인터프리터 방식으로 동작하는 런타임 언어로 소스 코드를 바로 실행하였지만, 빠른 업데이트와 브라우저 간 호환성을 위해 컴파일 기술을 통해 실행 속도를 최적화되고 있는 언어입니다.또한, 개발 편의성을 높이기 위해 React와 Virtual DOM 같은 프레임워크와 트랜스파일러 기반의 언어들이 등장했습니다.이러한 언어들이 어떻게 동작하는지 살펴보고, 소스 코드 처리 과정과 소스 변환 도구에 대해 알아보겠습니다. 컴파일러 언어와 인터프린터 언어컴파일러 언어 : 컴파일 단계와 실행 단계가 분리된 언어인터프리터 언어 : 컴파일 없이 프로그램 소스 코드를 바로 실행하는 언어  소스 코드 처리 도구Parser (파서) Parser 란?파싱(Parsing)을 하는 프로그램컴파일러의 일부로 인터프.. 2024. 4. 11.
[Javascript] 생산성 코드 작성 방법 - 코드 줄여쓰기 1. if else 문longhandvar big;if (x > 10) { big = true;}else { big = false;} shorthandvar big = (x > 10) ? true : false;  2. null, undefined 값 체크, 기본값 설정longhandif (variable1 !== null || variable1 !== undefined || variable1 !== '') { var variable2 = variable1;} shorthandvar variable2 = variable1 || 'default value';  3. 배열 생성longhandvar a = new Array();a[0] = "myString1";a[1] = "myString.. 2024. 3. 4.
[JavaScript] Jaml: JavaScript를 위한 아름다운 HTML 생성 개요아키텍처 기술 조사 중 JAML webSite 라는 단어를 보았다.May 20, 2021 자료 중 일부 였는데 JAML를 구글에 검색했을때 정리된 자료가 별로 없었다.그래서 간단하게 정리해보려고 하는 포스팅이다.  정의 Jaml은 Ruby의 Haml 라이브러리를 에뮬레이트하여 JavaScript 프로젝트에서 HTML 렌더링을 간소화하도록 설계된 JavaScript HTML 템플릿 엔진, JavaScript 템플릿 프레임워크이라고도 함.2021년에 인기가 있었다고 한다. JavaScript 템플릿 프레임워크 (2021년 기준)EJS(임베디드 자바스크립트)장점 : EJS는 자바스크립트를 사용하여 HTML 마크업을 생성할 수 있는 간단한 템플릿 언어입니다. 사용하기 쉽고 Node.js 및 Express.j.. 2024. 1. 12.
[JavaScript] 웹표준, ECMAScript (ES5, ES6, ES2024), JavaScript 최신 문법, JavaScript 버전 개요웹 표준이 도입된 이후, 프로그래밍 언어와 라이브러리 개발 시 대부분 웹 표준을 따르게 되어 한 번 작업으로도 많은 시간과 노동력을 절약할 수 있게 되었습니다.따라서 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.
[JavaScript] 배열 중복 제거 / set, map, reduce, filter Set숫자/문자열 const values = [3, 1, 3, 5, 2, 4, 4, 4];const uniqueValues = [...new Set(values)]; // [3, 1, 5, 2, 4] mapconst list = [3, 1, 3, 5, 2, 4, 4, 4]; const result = [...new Map(list.map(item => [item, item])).values()];console.log(result); // [3, 1, 5, 2, 4] reduceconst list = [3, 1, 3, 5, 2, 4, 4, 4];const result = list.reduce((accumulator, currentValue) => { if (!accumulator.includes(curr.. 2023. 12. 30.
728x90