인생은 효율성

어느 날 문득 ‘이벤트 루프가 실행되는 과정을 시작적으로 확인해 볼 수 있는 방법이 있을까?’ 하는 궁금증이 들었다.물론 console.log()를 코드 곳곳에 넣어서 출력을 확인하거나 console.trace()로 콜스택을 살펴볼 수도 있지만, 뭔가 더 간편하게 보여주는 방법이 있을 것 같았다.이 글에서는 debugger를 이용해 콜스택(Call Stack)과 마이크로태스크 큐(Microtask Queue)의 실행 과정을 직접 눈으로 확인하는 방법을 알아보겠다.1. 이벤트 루프 실행 순서 확인하기프론트엔드 면접에서 자주 등장하는 문제 중 하나가 다음 코드의 실행 순서를 예상하는 것이다.console.log("1");setTimeout(() => { console.log("2");}, 0);Promis..

TypeScript에서 type과 interface는 둘 다 타입을 정의하는 데 사용되지만, 각각의 특성과 활용 방식이 다르다.1. 인터페이스 (interface) ✅ 객체 형태 확장에 유리✅ 라이브러리 확장에 적합 • extends 키워드로 쉽게 확장 가능 • 동일한 이름의 인터페이스를 여러 번 선언하면 속성이 합쳐짐 (Declaration Merging) interface User { name: string}interface User { age: number}// 병합됨const user: User = { name: "Alice", age: 25 } 이러한 특징 덕분에 라이브러리의 타입을 확장할 때 유용하다. 2. 타입 별칭 (type) ✅ 복잡한 타입 조합에 유리✅ 튜플, 유니온, 리터럴 타입 ..

웹 개발을 하다 보면 다른 탭으로 이동했다가 다시 작업 중이던 탭으로 돌아왔을 때에 특정 이벤트를 주어야 하는 경우가 있다. document.visibilityState를 이용하면 간단하게 구현할 수 있다. const onVisible = async function () { if (document.visibilityState) { // 페이지(탭) 활성화 시 동작 } }; document.addEventListener('visibilitychange', onVisible); 참고: https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilityState Document.visibilityState - Web APIs | MDN The Docume..

Set 중복되지 않는 유일한 값들의 집합이다. 배열과 비교했을 때 다음과 같은 차이점이 있다. 중복된 값을 가지지 않음 요소 순서에 의미가 없음 인덱스로 요소에 접근 불가 Set의 이런 특성을 이용해 배열에서 중복을 제거하고 싶을 때 유용하게 사용할 수 있다. const set = new Set(); // 빈 set 객체 생성 const set = new Set([1,2,3]); // 중복 제거된 {1,2,3} 생성 console.log(set.size); // 요소 개수 set.add(1); // 요소 추가 console.log(set.has(1)); // 요소 존재 확인 set.delete(1); // 요소 삭제 set.clear(); // 요소 전부 삭제 Map 키-값으로 이루어진 컬렉션이다. 객체..

프로젝트에서 메일 전송 기능을 구현해야 했다. 관련 라이브러리를 찾아봤는데 nodemailer가 가장 많이 사용되고 있고 공식 문서에 정리도 잘 되어 있어서 이걸 선택했다. 사용 방법은 예제에 잘 나와있다. https://nodemailer.com/about/ Nodemailer :: Nodemailer Nodemailer Nodemailer is a module for Node.js applications to allow easy as cake email sending. The project got started back in 2010 when there was no sane option to send email messages, today it is the solution most Node.js us..

node.js 서버에서 데이터를 등록하는 API를 만드는데 이 API는 총 5개의 동작이 반드시 순서를 지켜서 실행되어야 한다. 처음에는 함수 내부에 promise객체를 만들어서 리턴하고 그 함수를 .then()으로 연결하였다. 1. 함수에서 프로미스 객체 리턴 X 5 const insertProfit = async cateJson => { const query = `insert into [table] ([col1], [col2], [col3], [col4]) values ('${month}', ${id}, ${aim}, ${rate}) `; let res: any; const promise = new Promise((resolve, reject) => { resolve( excuteQuery(query..

this란 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수 this에 바인딩될 값은 함수가 어떻게 호출되었는지에 따라 동적으로 결정된다. this 바인딩 함수 호출 방식 this 바인딩 일반 함수 전역 객체 메서드 메서드를 호출한 객체 생성자 함수 미래에 생성할 인스턴스 apply/call/bind 해당 메서드에서 첫번째 인수로 전달한 객체 *일반 함수로 호출된 모든 함수(메서드 내에서 정의한 중첩 함수, 콜백 함수 포함)내부의 this에는 전역 객체가 바인딩된다.

함수란 일련의 과정을 statement로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것 함수 리터럴 함수 리터럴은 함수 이름, 매개변수 목록, 함수 몸체로 구성되어 있다. 리터럴과 마찬가지로 함수 리터럴도 평가되어 값을 생성하며 이 값은 객체다. 하지만 일반 객체와는 다르게 함수는 호출할 수 있다. 함수 정의 방법 함수 선언문 함수 표현식 생성자 함수 화살표 함수 1. 함수 선언문 함수 리터럴과 형태가 동일하다. 차이점은 함수 선언문은 함수 이름을 생략할 수 없다는 것이다. 함수 선언문은 표현식이 아닌 문인데 변수에 할당할 수 있는 것처럼 동작한다. 이 이유는 자바스크립트 엔진이 코드의 문맥에 따라 함수 선언문 혹은 함수 리터럴 표현식으로 해석하기 때문이다. 함수 선언문이 값으로 평가되어야..

객체 생성 방법 객체 리터럴 Object 생성자 함수 생성자 함수 Object.create 메서드 클래스 객체 리터럴은 값으로 평가되는 표현식 프로퍼티 객체는 프로퍼티의 집합 * 이미 존재하는 프로퍼티 키를 중복 선언하면 기존 프로퍼티를 덮어쓴다. var foo = { name: 'Lee', name: 'Kim' }; console.log(foo.name); // Kim 메서드 객체에 묶여 있는 함수. 함수는 값으로 취급할 수 있기 때문에 프로퍼티 값으로 사용할 수 있다. 일반 함수와 구분하기 위해 메서드라고 부른다. 프로퍼티 읽기, 삭제 - 객체에 존재하지 않는 프로퍼티에 접근하면 ReferenceError가 아닌 undefined를 반환 var person = { name: 'Lee' }; conso..

값(value) 표현식이 평가되어 생성된 결과 // 10 + 20은 평가되어 값 30을 생성함 10 + 20; // 30 // 변수sum에 값 30이 할당 var sum = 10 + 20; 리터럴(literal) 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법 표현식(expression) 값으로 평가될 수 있는 문. 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조함 var score = 100; // 100은 리터럴. 100은 자바스크립트 엔진에 의해 평가되어 값을 생성하므로 // 그 자체로 표현식 var score = 50 + 50; // 50 + 50은 리터럴과 연산자로 이루어짐. 100이란 값을 생성하므로 표현식 score; // 변수를 참조하여 100이란 값으..