prefer2 Log

자바스크립트는 단일 스레드(single thread)이면서 비동기 작업을 수행할 수 있다. 이가 가능한 이유를 알아보자 JavaScript has a runtime model based on an event loop, which is responsible for executing the code, collecting and processing events, and executing queued sub-tasks -MDN- 비동기로 동작하는 핵심적인 이유는 자바스크립트가 아니라 브라우저가 가지고 있다. 자바스크립트가 '단일 스레드' 기반의 언어라는 말은 ‘자바스크립트 엔진이 단일 호출 스택을 사용한다’에서 나온 말이다. 실제로 자바스크립트가 구동되는 환경(브라우저, nodejs)에서는 주로 여러개의 스레드..

코드를 작성하다보면 object를 복사해서 쓸 일이 있다. 앝은 복사(직접 할당)을 하게 되면 같은 주소를 공유하게 되어 한 값을 수정시 이가 다른 값에도 반영되게 된다. 정말 값만을 복사해서 쓸 수 있도록 깊은 복사에 대해 알아보자. 가장 쉬운 방법부터 조금 어려운(?) 조금 더 완벽한(?) 방법 순으로 진행해보겠다. shellow copy • spread operator const obj1 = { a:1, b:2 }; const obj2 = { ...obj }; obj2.a = 3 console.log( obj1 === obj2 ) // false console.log( obj1.a ) // 1 spread 연산자를 통해 값을 복사하는 방법이다. 단, 이 방법은 1depth까지만 가능하다. Sprea..

이벤트 핸들러 이벤트에 반응하려면 이벤트가 발생했을 때 실행되는 함수인 핸들러(handler)를 할당해야 한다. 핸들러는 사용자의 행동에 어떻게 반응할지를 코드로 표현한 것이다. addEventListener HTML에 직접 이벤트 핸들러를 등록하는 방법은 단 1개의 이벤트만을 등록할 수 있다. 또한 코드가 길어져 가독성이 떨어지게 된다. addEventListener를 사용하면 복수의 핸들러를 등록할 수 있다. element.addEventListener(event, handler, [options]); event: 이벤트 이름. “click”, “scroll” 등 handler: 핸들러 함수 option once: true이면 이벤트가 트리거 될 때 리스너가 자동으로 삭제된다. capture: 어느 ..

create-react-app 없이 react를 설정할 수 있는 그날까지....! 배경 왜 webpack을 사용하기 시작했는지를 알아보자. 웹팩의 깃헙에서 웹팩을 아래와 같이 소개하고 있다. webpack is a bundler for modules. The main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset. 웹팩은 모듈(module)을 위한 번들러(bundler)이다. 그렇다면 모듈과 번들러에 대해 알아보자. 모듈(module) 모듈(module)은 재사용 가능한 ..

나도 모르게 export와 export default를 섞어 쓰고 있음을 발견했다. 이 둘의 차이를 명확하게 알아보면서 좀 더 일정한 코드 작성을 해보고자 한다. export export 문은 JavaScript 모듈에서 함수, 객체, 원시 값을 내보낼 때 사용한다. export 키워드는 선언문 앞에 사용한다. // 변수의 export export const name = 'Ann'; // 함수의 export export function sayHello() { console.log('Hello World!'); } // 클래스의 export export class Person { constructor(name){ this.name = name; } } 선언문 앞에 매번 export 키워드를 붙이는 것이 번..

promise를 쓰면 콜백헬에서는 벗어날 수 있지만 연속되는 then의 사용으로 가독성이 떨어진다. async와 await은 이러한 promise를 조금 더 읽기 쉽고 사용하기 쉽도록 만들어진 문법이다. 사용방법 async function 함수명() { await 비동기처리메서드(); } 함수 앞에 async를 붙이면 해당 함수는 반드시 프라미스를 반환한다. 프라미스가 아닌 값을 반환하더라도 이행 상태의 프라미스(resolved promise)로 값을 감싸 이행된 프라미스가 반환되도록 한다. 자바스크립트는 await 키워드를 만나면 프라미스가 처리(settled)될 때까지 기다린다. 결과는 그 이후 반환된다. 프라미스가 처리되길 기다리는 동안 엔진이 다른 일(다른 스크립트를 실행, 이벤트 처리 등)을 할..

Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다. 콜백 헬 비동기처리를 위해서 콜백 함수를 사용하다보면 여러개의 콜백 함수가 중첩되는 상황을 경험한 경우가 많을 것이다. 특히 한 콜백 함수의 처리 결과를 가지고 다른 비동기 함수를 처리하고자(비동기 함수간에 처리 순서가 정해져 있을 때) 할 때 함수의 중첩이 일어나게 된다. 함수의 호출이 중첩(nesting)이 되어 복잡도가 높아지는 현상을 콜백 헬(Callback Hell)이라 한다. 전통적인 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하며 여러 개의 비동기 처리를 한번에 처리하는 데도 한계가 있다. ES6에서는 비동기 처리를 위한 또 다른 패턴으로 프로미스(Prom..

Object.create() 메서드는 지정된 프로토타입 객체 및 속성을 갖는 새 객체를 만든다. (MDN) 문법 Object.create(proto[, propertiesObject]) Object.create() 메소드는 지정된 프로토타입(prototype) 객체와 프로퍼티를 가지고 새로운 객체를 만들어 준다. 따라서 이 메소드를 이용하면 사용자가 프로토타입 객체를 직접 명시할 수 있어 유용하다. 예시를 보며 자세하게 살펴보자. 코드 const PersonProto = { check() { console.log('how obejct.create() works!'); }, calcAge() { console.log(2021 - this.birthYear); }, init(firstName, birthYe..

생성자 함수 Student가 Person을 상속받고자 할 때 const Person = function (firstName, birthYear){ this.firstName = firstName; this.birthYear = birthYear; } Person.prototype.calcAge = function() { console.log(2037-this.birthYear); } const Student = function(firstName, birthYear, course){ // this.firstName = firstName; // this.birthYear = birthYear; Person.call(this, firstName, birthYear); this.course = course; }..

❗ Javascript의 Class는 syntatic suger일뿐 새로운 문법이 아닙니다. prototype의 이해를 기반으로 공부하는 것을 추천합니다. c++나 java의 Class와는 다르게 프로토타입 기반의 언어입니다. Class는 특별한 함수이다. 다른 함수들과 동일하게 class 표현식과 class 선언식으로 정의할 수 있다. // class 선언식 class Rectangle { constructor(height, width) { this.height = height; this.width = width; } } // class 표현식 var Rectangle = class { constructor(height, width) { this.height = height; this.width = w..