개발감성

에러는 생성자를 가지는 객체이기 때문에 얼마든지 객체처럼 다룰 수 있다. 에러 객체 상속 class authenticationError extends Error { constructor(message) { super(message); this.name = "authenticationError"; this.favoriteSnack = "chitos"; } } const a = new authenticationError("cause err"); console.log(a.favoriteSnack); 인증 에러라는 새로운 클래스를 생성하고 Error 객체를 상속받은 후 부모의 멤버변수인 message를 생성자에 집어넣고 커스텀 하고 싶은 속성인 name과 favoriteSnack을 정의했다. 해당 생성자로 생성..

일반적인 try catch문은 비동기 코드에선 동작하지 않기에 Promise에서 따로 catch문을 지원한다. 하지만 또다시 async함수로 작성하게 된다면 Promise의 catch가 아닌 일반 try catch문의 문법대로 에러 핸들링을 하게 된다. async함수 내에서 정의된 try catch문은 비동기 오류를 잡아낼 수 있다. (async function () { try { await Promise.resolve("async fail #1"); await Promise.reject("async fail #2"); } catch (err) { console.log(err); } console.log("isnt still good?"); })(); 사용법은 일반 try catch문과 동일하다. try..

일반적인 try catch문의 문제는 비동기적 코드에는 대응하지 못한다는 것이다. 그렇기 때문에 Promise에는 비동기만을 위해 지원하는 catch문이 따로 존재한다. Promise catch문 사용법 Promise.resolve("async fail") .then((res) => { throw new Error("#1 fail"); return res; }) .then((res) => { console.log(res); }) .catch((err) => { console.log(err); return err; }) Promise에는 정상동작일 때를 위한 then문과 오류처리를 위한 catch문이 존재한다. 첫 번째 then문에서 의도적으로 #1 fail이라는 에러를 생성했고 따라서 두 번째 then문..

try catch문 //how catch err in program function fail() { try { consol.log("just do"); // throw new Error("second err"); } catch (error) { console.log("Its,,,fail", error); } } fail(); 위 try문의 console.log메서드를 일부러 오타를 내서 실행시켰다. try가 정상동작하지 않으면 자동으로 catch문으로 넘어가며 catch문은 인자로 에러를 받아서 catch문 내에서 에러인자를 자유롭게 사용할 수 있도록 해준다. try { try { never(); } catch (e) { throw new Error(e); } } catch (e) { console.lo..

다른 변수와 비슷하게 에러 또한 생성자가 존재한다. 에러 생성자는 다른 생성자와 마찬가지로 new 연산자를 통해 생성이 가능하며 콘솔에 에러 메시지를 지정해서 보여줄 수 있다. throw throw는 프로그램 동작을 멈추게 되는데 에러 생성자는 보통 throw와 함께 사용된다 에러 객체 생성자로 생성된 에러는 객체 형태를 가지는데 에러 객체의 message는 에러 메시지 stack은 에러가 발생한 위치를 알린다. 이 외에 name속성이 기본적으로 있다. function a() { const b = new Error("in a"); return b; } a(); //stack a().stack; 함수 a는 에러 객체를 리턴하며 a를 실행시키면 메시지와 스택이 함께 출력된다. 항상 콘솔에서 보던 에러 메시지..

CommonJS에 이어서 JS는 모듈 시스템을 ES6에서부터 공식지원한다. //ES6 module import module1 from "module1"; //fight import module2 from "module12"; export function fight(a) { return a; } 모듈을 가져올 때는 import문을 내보낼 때는 앞에 export를 붙여준다. import import는 require과 다르게 파일의 최상단에만 작성해야 한다.

History 코드의 양이 많아짐에 따라 변수명 중복, tight coupling 등의 문제가 생김 script파일을 나눠도 서로 간섭이 가능하여 생기는 side effect가 발생 function scope, IIFE, Closure를 사용해 각 script파일이 개별적인 scope를 보장받도록 하는 module pattern개발 module pattern은 여전히 global scope duplicate, dependency resulution of declared order 등의 문제가 있음 CommonJS, AMD 등의 모듈 시스템 개발 CommonJS // CommonJS var module1 = require("module1"); //.fight var module2 = require("mod..

이번 글인 모듈패턴을 이해하기 위해서는 즉시실행함수(IIFE)와 Scope, Clusure 개념을 이해하고 있기를 권장합니다. Module Scope Global Scope Module Scope function Scope block Scope Scope는 자신만의 고유의 공간을 가지므로 일반적으로 다른 scope에 영향을 끼칠 수도, 받지도 않는다. 이를 이용하여 모듈 또한 scope를 가지게 만들어서 이름이 겹치거나, tight coupling을 방지할 수 있다. IIFE (function (a) {return a+1}) (a)처럼 함수를 괄호로 감싼 형태로 정의되는 즉시실행함수는 함수이기에 function scope를 가진다. 모듈을 IIFE로 정의하여 자신만의 scope를 가지도록 한다. Clos..

Why do we need modules? Tight Coupling user = {}; function signin(user) { var textfield = "text"; } function isHuman(user) { // ... } // ...more extends // tight coupling 만약 위와 같은 signup과 isHuman이라는 user 인자를 받아서 처리를 하는 두 함수가 있다고 보자, user객체에는 두 함수에 필요한 모든 데이터를 저장할 필요가 있을 것이다. 그리고 user를 사용하는 함수가 계속해서 늘어나면 날수록 coupling은 더 높아지게 된다. user객체를 함부로 수정했다가는 연관되는 함수들에서 파생되는 문제가 커지게 되기 마련이다. 그럼 이 문제를 여러 js파일..

콜백 큐 JS 동작원리 5편 - 런타임 (Event Loop, Callback Queue, 비동기) 지금까지 JS가 V8엔진을 통해 어떻게 기계어로 번역되고 실행되는지 알아봤다. 하지만 JS가 브라우저에서 동작할 때는 다른 얘기가 된다. Node.js 위 사진은 노드 js의 전체 시스템 아키텍처이다. JS developefeel.tistory.com 콜백 큐에 대한 기본적인 내용을 알고 있다는 전제하에 글 작성을 한다. 콜백 큐에는 세 종류의 큐가 있는데, Task Queue, Job Queue, Animation Frame이다. Task Queue //1 Callback Queue - Task Queue setTimeout(() => { console.log("1"); }, 0); //not js, w..