JavaScript5 번들러와 기능 번들러는 무엇인가?번들러는 JavaScript, CSS, HTML, 이미지 등 웹 어플리케이션을 구성하는 다양한 파일과 모듈을 최적화된 파일로 결합하는 도구입니다. 이 결합 과정을 번들링이라고 하며, 이를 통해 서버 요청 수를 줄이고, 파일 크기를 최소화하여 웹 페이지의 로딩 속도를 개선하는 등 개발 과정에서 매우 중요한 역할을 합니다. 번들러의 탄생배경번들러가 탄생한 배경에는 웹 개발의 복잡성과 성능 문제가 크게 작용했습니다. 초기 웹 개발에서는 수많은 스크립트와 라이브러리가 단일 페이지에 존재했고, 이는 유지보수와 성능 최적화를 어렵게 만들었습니다. 가령, 웹 페이지 개발을 위해 처음에는 100 줄의 JS 코드로 시작했지만, 시간이 지나면서 기능이 추가됨에 따라 코드는 계속해서 증가했습니다. 프로젝트.. 2024. 9. 20. find() - Lodash 유틸함수 직접 구현 | TypeScript 복잡한 형태를 처리할 수 있는 Lodash 의 find를 구현하기 전에, 가장 기본적인 형태인 JS의 find를 구현해본 후, Lodash 가 제공하는 find 함수를 만들어보자. JS 기본 'find' 함수 구현 - Array.prototype.find()→ 배열을 받아 넘겨주는 콜백 함수로 검사하는 find를 만들어보자. 구현 순서배열 순회: 배열을 순회하며 각 요소를 조건과 비교한다.조건 만족 여부 확인: 요소가 조건을 만족하면 첫번째 해당 요소를 반환한다.조건을 만족하는 요소가 없으면 undefined를 반환한다.구현 코드function find(collection: T[], predicate: (el) => boolean): T | undefined { // 배열 순회 for (l.. 2024. 6. 9. JavaScript 반복문 비교 for 로 시작하는 반복문은 forfor ... of for ... in이 for 로 시작하는 반복문을 정리해보자. 1. 'for' 반복 횟수가 명확할 때 사용반복 대상: 주로 배열이나 범위구조: 초기화, 조건, 증감예: 주어진 범위 내 반복이 필요할 때배열의 인덱스를 사용하여 접근할 때!for (let i = 0; i 2. 'for ... in'객체의 열거 가능한 속성을 반복할 때 사용반복 대상: object(객체)구조: 객체의 열거 가능한 속성 'key' 반복예:객체의 모든 속성에 대해 작업이 필요할 때속성 이름을 알고 속성 값에 접근할 때 -> 예: if (key === 'port' && config[key] === 8080) ...const obj = {a:1, b:2, c:3};for (le.. 2024. 6. 8. CJS vs ESM 자바스크립트는 웹 개발의 핵심 언어 중 하나로서, 자바스크립트로 개발을 하다보면 CJS라 불리는 CommonJS, 그리고 ESM 이라 불리는 ECMAScript이라는 두가지 모듈 시스템을 마주치게 된다. 자연스럽게 "왜 같은 자바스크립트인데 두 개의 모듈 시스템이 존재할까?"라는 궁금증이 들기 마련이다. 이 글에서는 모듈 시스템이 어떻게 탄생하게 되었고, 어떤 특징과 차이점을 가지고 있는지 알아보자. 웹 초기 시절에 JS는 브라우저에서 간단한 동작만을 위해 존재했기 때문에 모듈(애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각) 시스템이 필요하지 않았다. HTML에 script 태그로 간단히 적을 수 있는 정도였다. 하지만 웹앱의 기능이 커지면서 복잡하고 긴 코드를 좀 더 정리하고 재사용.. 2024. 6. 2. 변수 - JS Deep Dive 와 ECMAScript 참고 변수를 사용하려면, 1. 변수 Declaration (선언)값을 저장하기 위한 메모리 공간 확보. 변수 이름과 메모리 공간의 주소 연결해서 값을 저장할 수 있도록 준비var 키워드의 경우, 확보된 메모리 공간에는 undefined값이 암묵적으로 할당2. 변수 Initialization (초기화)선언된 이후, 최초로 값을 할당하는 것ECMA에서 살펴본 'let', 'const' 키워드 변수와 'var' 로 선언된 변수의 정의는 아래와 같다.let, const 에 대한 설명'let' and 'const' declarations define variables that are scoped to the running execution context's LexicalEnvironment. The variables .. 2024. 5. 6. 이전 1 다음
