본문 바로가기
728x90

FrontEnd/JavaScript12

[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 자바스크립트 모듈 | CJS와 ESM의 차이최근 프로젝트를 몇 개 진행하면서 마주한 에러가 있습니다.medium.com  특징 ES6 모듈 CommonJS  ESMCommonJS로딩 방식정적 로딩 (컴파일 타임)동적 로딩 (런타임)문법i.. 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] 컴파일러와 트랜스파일러의 동작 원리 이해하기 개요자바스크립트는 본래 인터프리터 방식으로 동작하는 런타임 언어로 소스 코드를 바로 실행하였지만, 빠른 업데이트와 브라우저 간 호환성을 위해 컴파일 기술을 통해 실행 속도를 최적화되고 있는 언어입니다.또한, 개발 편의성을 높이기 위해 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.
[JavaScript] 특정 위치 문자 찾기 / charAt() const str = 'qwertyuiasdfghjk'console.log(str.charAt()); // qconsole.log(str.charAt(0)); // qconsole.log(str.charAt(5)); // yconsole.log(str.charAt(-1)); //''console.log(str.charAt(a)); // error 2023. 12. 27.
728x90