Fall in IT.

ESBuild는 JavaScript와 TypeScript 코드를 빠르게 번들링하고 변환(트랜스파일링)하기 위한 고성능 빌드 도구입니다. Evan Wallace가 개발했으며, 속도와 효율성을 극대화하는 것을 목표로 설계되었습니다.ESBuild의 주요 특징빠른 속도:ESBuild는 Go 언어로 구현되어 있어 단일 스레드에서도 매우 빠른 성능을 발휘합니다.병렬 처리가 가능하여 멀티 코어 CPU 환경에서도 속도가 빠릅니다.TypeScript와 Babel 기반 도구에 비해 10~100배 더 빠릅니다.지원하는 언어와 기능:JavaScript: 최신 ES6+ 문법 지원.TypeScript: 트랜스파일링을 기본적으로 지원하지만, 타입 검사는 수행하지 않음.JSX/TSX: React 문법 지원.CSS: CSS 코드를 번..

tsx와 ts-node는 각각 타입스크립트를 실행하기 위한 도구지만, 두 도구는 서로 다른 사용 사례와 강점이 있어서 공존하고 있습니다. ts-node와 tsx 모두 런타임에 TypeScript를 JavaScript로 트랜스파일링하고 실행하지만, tsx가 더 빠른 이유는 트랜스파일링 방식, 캐싱 전략, 그리고 ES 모듈 처리 최적화 때문입니다. 아래에 두 도구의 작동 방식과 성능 차이의 이유를 자세히 설명드리겠습니다.1. 트랜스파일링 방식의 차이ts-node:ts-node는 TypeScript 컴파일러(tsc) 또는 TypeScript 서비스(typescript)를 사용해 TypeScript 코드를 JavaScript로 변환합니다.이 과정은 컴파일러가 전체 코드를 읽고 변환하므로 무겁고 느릴 수 있습니다..

안녕하세요. 오늘은 JavaScript에서 유용하게 사용되는 null 병합 연산자(nullish coalescing operator)에 대하여 알아보겠습니다. null 병합 연산자(nullish coalescing operator)란? 짧은 문법으로 여러 피연산자 중 값이 확정되어 있는 변수를 쉽게 찾을 수 있도록 도와주는 연산자이다. 예제 1 변수 a와 b가 있을때 a가 null이나 undefined가 아니면 a를 그 외의 경우는 b를 대입하는 경우를 생각해보자 // null 병합 연산자 사용 안했을경우 let result = (a !== null && a!== undefined) ? a : b // or let result = a ? a : b // null 병합 연산자 사용한 경우 let resul..

안녕하세요. 오늘은 자바스크립트 개발을 하다보면 보게되는 파일인 package-lock.json, yarn.lock 파일에 대해서 알아보겠습니다. package.json 파일은 무엇인가? package.json 파일은 프로젝트에서 사용된 패키지 의존성 관리를 도와준다. 자바스크립트에서는 패키지 매니저로 npm 또는 yarn을 사용한다. (패키지 매니저는 자바스크립트 프로젝트에서 특정 패키지를 설치하거나 삭제하는데 사용되는 도구를 말한다.) 이때, 설치된 패키지들의 종류와 버전이 package.json 파일에 적혀서 관리된다. 그렇다면 package-lock.json 파일은 무엇인가? 패키지 설치시점과 상관없이 모두 동일한 패키지를 설치할 수 있도록 도와준다. (이를 패키지 잠금 기능이라고 부른다) pac..

function main() { console.log("main start"); console.time("sumFunction"); sum(1, 1000000); console.timeEnd("sumFunction"); /** * OUTPUT * - PC의 상태에 따라 차이가 있을 수 있습니다. * * $ main start * $ sumFunction: 4.050ms */ } /** * 정수 a부터 b까지 더한값을 리턴하는 함수 * @param {*} a * @param {*} b */ function sum(a, b) { let sum = 0; for (let i = a; i < b; i++) { sum += i; } return sum } main();

안녕하세요. 오늘은 배열 안에 Object 형태의 원소가 담겨 있을때 특정 값이 배열 안에 있는지 확인하는 방법에 대해서 알아보도록 하겠습니다. 코드 /** * Array의 Object 형태의 Elements 사이에 원하는 Element 찾는 방법 */ function main(studyClass: IStudyClass): void { /** * 학급에 `동백이`라는 학생이 있는지 확인하는 방법 * array의 내장객체인 map을 사용한다. */ // includes로 확인할 경우 boolean let flag: boolean = studyClass.students .map((student: IStudent) => student.name) .includes("동백이"); // expected output..

안녕하세요. 오늘은 자바스크립트의 Array 객체의 내장함수 sort()에 대해서 알아보겠습니다. sort() 내장함수에는 파라미터가 Optional하게 들어갑니다. 구체적인 비교가 필요할 경우 compareFunction을 작성하여 넣어주면 됩니다. 코드 (TypeScript) /** * 자바스크립트 Array 객체의 내장 함수 sort() * * sort() 내장함수에는 파라미터가 Optional(compareFunction)하게 들어간다. * 구체적인 비교가 필요할 경우 compareFunction을 작성하여 넣어주면 된다. * * compareFunction(a, b) * - 리턴값이 0보다 작은 경우 a를 b보다 앞으로 정렬 * - 리턴값이 0보다 큰 경우 b를 a보다 앞으로 정렬 * - 리턴값..

안녕하세요. 오늘은 Javascript에서 객체를 복사하는 방법에 대해서 알아보겠습니다. 객체를 복사하는 방법에는 얕은 복사 방법이있고 깊은 복사 방법이 있습니다. 얕은 복사와 깊은 복사 얕은 복사란, 객체의 첫 번째 부분만 복사하는 것을 의미합니다. Object의 내장객체인 assign() 함수를 사용하여 구현합니다. 깊은 복사란, nested한 객체의 모든 하위 객체까지 복사하는 것을 말합니다. JSON.parse()와 JSON.stringify() 함수를 사용하여 구현합니다. 코드 /** * 얕은 복사 * * @param {*} obj */ function shallowObjectCopy(obj) { let copyObj = {}; Object.assign(copyObj, obj) return co..

Javascript의 Array 내장객체인 shift, unshift, push, pop에 대해서 알아보겠습니다. 코드 /** * shift() & pop() * * shift: 배열의 가장 첫 번째 원소를 제거하고 제거된 요소를 반환 * pop: 배열의 가장 마지막 원소를 제거하고 제거된 요소를 반환 */ let arr = [1, 2, 3]; let firstElement = arr.shift(); console.log(firstElement); // expected output: 1 console.log(arr); // expected output: [2, 3] let lastElement = arr.pop(); console.log(lastElement); // expected output: 3 c..

자바스크립트의 배열에서 특정 원소가 포함 되어있는지 확인하는 방법 // Sample Code let arr = [1, 1, 2, 3, 5, 8, 13, 21, 34, 55]; /** * # 1. Use indexOf() * 해당 원소의 index 값도 필요할 경우에 사용 */ console.log(arr.indexOf(2)); // 2 console.log(arr.indexOf(4)); // -1 /** * # 2. Use includes() * 간단히 값의 유무만 확인하는 경우에 사용 */ console.log(arr.includes(2)); // true console.log(arr.includes(4)); // false 참조 https://developer.mozilla.org/ko/docs/We..