Muscardinus

개발하는데에 있어서 새로운 것을 계속 개발하는 것도 좋지만, 기존의 코드를 계속 보완하는 것 또한 중요하다. 보완을 위해서 하는 행동 중 한 가지가 바로 Error을 찾는 것이고 그것을 처리하는 Logic을 구현하는 것이다. Error 선언 우리는 Error 생성자를 통하여 오류 객체를 생성한다. Error 객체의 인스턴스는 런타임 오류가 발생했을때 던져진다. 그리고 Error 객체 안에는 두 가지의 property가 있다. 그것은 message와 stack이다. message -> Error을 선언할 때 arguments로 준 인자(첫 번째 인자)를 그대로 보여준다. stack -> Error를 일으킨 파일에 대한 history를 전달해준다. let err = new Error("I'm Error");..

What is Modules ? 모듈은 단지 한 개의 파일에 불과하다. 개별의 파일 안에는 개별적인 로직이 있으며, 일반적으로 모듈은 대개 클래스 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성된다. Module Patterns Block Scope이 나오기 전에 JS에는 Global Scope과 Function Scope이 존재하였고, Module Pattern이라는 개념을 도입하기 위해서 JS에서는 Function Scope 위에 Module Scope을 도입하였다. 이를 통하여 우리는 Globla Scope에 선언하지 않고도, 함수들 끼리 변수들을 공유할 수 있었다. 함수로 된 모듈은 단지 IIFE(Immediately Invoked Function Expression) 형태였..

JS Engine은 많은 일을 한다. 하지만 그 중에서 가장 핵심적인 2가지 역할을 해준다! 그것은 바로 Reading과 Executing이다. Reading 정보(변수, 함수 등)를 특정한 장소에 저장 Executing 현재 실행되고 있는 코드를 추적하는 작업 여기서 정보를 저장하는 공간이 바로 Memory Heap이고, 실행 중인 코드를 추적하는 공간이 Call Stack이다. Memory Heap Memory Heap은 수 많은 서랍을 가지고 있는 하나의 큰 서랍장이라고 생각하면 된다. 내가 놓고 싶은 물건을 서랍에 넣어두었다가 필요할 때 마다 꺼내쓰기 위한 서랍장이라고 생각해두자. 각각의 서랍에 우리는 변수 및 함수를 저장하는 서랍장이 Memory heap이다. // tell the memory ..

What is JS Engine? muscardinus.tistory.com/171 저번 시간에 우리는 JS Engine의 구동원리에 대해서 배웠다. 그리고 마무리하면서 더 빠르고 최적화된 JS Engine의 작동을 돕기 위해서 우리 자신 또한 Optimized Code를 작성해야한다고 하였다. 그렇다면 그 방법에는 어떠한 것이 있을까? 우선 해당 항목들의 사용을 자제하는 것을 추천한다. - eval() - arguments -> arguments를 직접으로 사용하는 것을 피하고, arguments.length와 arguments[i]의 형식으로 사용하자 - for in문 -> 차라리 Object.key()를 사용하자 - with - delete 자 그러면 이제 시작해보자! Inline Caching f..

우리는 웹개발을 하면서 HTML, CSS, 그리고 자바스크립트를 작성한다. 하지만 우리가 작성한 파일들을 컴퓨터에서 어떻게 알고 웹페이지상으로 보이게 하는지 고민한 적은 잘 없을 것이다. 이번 글은 그 원리를 설명하기 위해서 작성하게 되었다. JavaScript Engine 자바스크립트 엔진은 JS 코드를 컴퓨터가 이해하고 실행할 수 있는 언어(Machine Language)로 변형하는 작업을 해주는 Engine이다. 그 종류는 매우 많다. 그리고 그 많은 종류의 엔진들은 ECMA Script에 표준을 두어서 개발을 한다. 그 중 가장 대표적으로 사용하는 엔진이 Chrome Broswer에서 제공하는 V8 Engine이다. ※ 해당 글은 V8 Engine을 기준으로 작성하겠습니다. List Of Java..

지금까지 this의 1,2,3탄을 읽었다면 이 자리를 빌려서 무한한 감사를 표합니다. 제가 조금이나마 도움이 되었다면 그것만으로도 보람찰것 같습니다! 자 그러면 이제 this의 마지막인 new에 관하여 이야기해보자! new 아직 실력이 부족하여 설명을 정확히 하기에는 부족한 감이 있어 예제로 대체하겠습니다 new 키워드를 사용한 함수 내부에서의 this가 가르키는 것은 새로운 빈 객체이다. 그리고 이것(this)을 new 키워드를 통하여 부여한다. 이거 하나만 기억하자! 출력값 위 코드를 보면 알듯이 type 인자에 "muscardinus"를 주면, 하나의 새로운 animal 인스턴스가 생기고 그것의 this는 this.type으로 "muscardinus"를 보유하고 있다. new 키워드와 함께 사용될 ..

this에 관하여 내용을 계속 진행하기 전에 JS의 함수에 관하여 한 가지 사실을 알아보자 JavaScript 함수(Function)는 함수이기 이전에 Object(객체)이다. 그러기에 자신 고유의 method를 가지고 있다. Function 자체의 proto를 가다 보면 결과적으로 Object가 나온다는 것을 확인 할 수 있다. MDN 웹사이트에서 Javascript Object method를 찾아보면 아래 그림과 같이 수 많은 method들이 있다는 사실을 볼 수 있다. 출처: developer.mozilla.org/en-US/ 이렇듯 객체에는 많은 내장 method가 있다. 물론 우리가 상황에 맞게 prototype에 접근하여 우리만의 method를 만드는것 또한 가능하다. 자 그러면 이제 다시 t..

Props 단어 듯 그대로 컴포넌트의 속성값이다 props는 부모 Component로부터 전달 받은 데이터를 지니고 있는 객체 props를 통해 부모 Component로부터 자식 컴포넌트에게 state의 상태 값, event handler를 넘겨줄 수 있다 state와 마찬가지로 Component의 props는 객체이다 Props를 통한 event handler 전달 // Parent.js class Parent extends React.Component { constructor() { super(); this.state = { color: 'red' } } handleColor = () => { this.setState({ color: 'blue' }) } render() { return ( Paren..