인생은 효율성

웹 개발을 하다 보면 다른 탭으로 이동했다가 다시 작업 중이던 탭으로 돌아왔을 때에 특정 이벤트를 주어야 하는 경우가 있다. 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이란 값으..

변수 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름 식별자 (=변수 이름) 어떤 값을 구별해서 식별할 수 있는 고유한 이름 값이 아닌 메모리 주소를 기억함. 메모리 주소에 붙인 이름 값의 할당 변수 선언 - 런타임 이전에 먼저 실행(값은 undefined로 초기화) 값의 할당 - 소스코드가 순차적으로 실행되는 시점인 런타임에 실행 undefined로 초기화된 변수에 값을 할당할때는 기존 메모리에 덮어쓰는것이 아닌 새로운 메모 공간을 확보한 후 그곳에 값을 저장한다. 이는 값을 재할당할때도 마찬가지라서 이전 값이 저장된 메모리 공간은 필요없어짐. 이런 값들은 가비지 콜렉터에 의해 자동 해제된다. *가비지 콜렉터: 메모리 공간을 주기적으로 검사하여 더 이..

자바스크립트에는 호이스팅이라는 개념이 있다. 호이스팅은 코드를 실행하기 전 선언한 변수가 해당 스코프 최상단으로 끌어올려져 실행되는 것을 말한다. function getData() { console.log(greeting); var greeting = 'hi'; } getData(); 이와 같은 코드를 실행하면 어떻게 될까? greeting변수가 console.log 아래에 선언되어있기 때문에 에러가 날 것이라 예상할 수 있지만 var로 선언한 greeting이 최상단으로 끌어올려져 var greeting; console.log(greeting); // undefined greeting = 'hi'; 과 같이 실행되는 것과 동일하다. 변수 할당이 아닌 변수 선언만 최상단으로 끌어올려지기 때문에 값은 un..