Jacob's Development Blog

Prototype 프로토 타입이란 클래스나 객체의 내용 복사 없이도 상속의 효과를 구현할 수 있게 해주는 방법이다. 프로토타입은 직접 참조 당하지 않고 프로토타입 링크(__proto__)를 통해 부모의 프로토타입 링크만 참조한다. 프로토 타입 속성(property's)의 값은 객체이며, 프로토타입 체인 아래에 있는 객체에 상속되기를 원하는 속성과 메서드를 저장하기 위한 공간인 객체이다. 그래서 Object.is(), Object.keys()같은 메서드들은 프로토타입 객체 안에 정의되지 않았기 때문에 Object.prototype에서 상속되는 객체 인스턴스나 객체 유형(object type)에 의해 상속되지 않는다. 프로토타입 객체에는 속성과 메서드를 추가할 수 있으며, 원하는 객체로 완전히 교체할 수도 ..

this 자바스크립트의 함수에는 메서드가 호출된 개체를 참조하는 this라는 특수한 변수가 있다. this의 값은 함수 호출에 따라 동적으로 변하며, 이 때문에 작은 문제 상황에 직면하게 된다. 함수는 정적 범위(static/lexical scope)와 동적 범위의 두 가지 범위(scope)에서 실행된다. '정적 범위'는 함수를 둘러싸는 범위이고, '동적 범위'는 함수를 호출한 범위이다. 자바스크립트에서 함수는 생성자, 메서드(객체의 일부), 함수(서브 루틴, subroutines)의 역할을 하는데, 함수가 서브루틴(이름이 겹쳐 아래부터는 서브루틴으로 명명)의 역할을 할 때 this가 동적으로 변해 문제가 생긴다. 서브루틴이 객체에 대해 호출되지 않기 때문에 this의 값은 strict 모드에서 정의되지..

호이스팅(hoisting) 호이스팅은 선언한 함수와 변수를 자바스크립트가 해석할 때 가장 상단에 있는 것처럼 인식하는 것을 말한다. 좀 더 자세하게 말하자면 자바스크립트는 코드의 라인 순서와 관계없이 함수 선언식과 변수를 위한 메모리 공간을 먼저 확보한다. 따라서 함수와 변수(var)는 코드의 최상단으로 끌어 올려진 것(hoisted)처럼 보이게 되는데 이를 호이스팅이라고 한다. 함수 전체가 호이스팅 된다. var로 변수 선언시, 선언은 호이스팅되지만, 할당을 호이스팅 되지 않는다. 변수 스코프는 함수이며, 함수만이 새 스코프를 도입할 수 있다. 호이스팅을 이해하기 위한 사전 지식들 호이스팅을 이해하기 위해 조금 축약하여 개념만 쉽게 이해해 보자. 스코프(scope) 스코프란 그 변수나 함수에 접근할 수..

객체 객체는 외부에 드러나는 행위(behavior)와 행위를 지원하기 위한 상태(state)를 묶어주는 편리한 단위이다. 만약 객체가 없다고 생각해 본다면, 하나의 프로그램의 상태가 마구잡이로 섞여서 프로그램을 수정하기도 어렵고 이해하기도 어렵기 때문에 유지보수도 힘들 것이다. 하지만 객체를 사용하여 참조할 수 있는 상태의 네임스페이스가 훨씬 작아지므로, 특정 변화에 의해 상태가 어떤 영향을 받을지 분석하기 더 쉬워진다. 또한 객체의 목표 중 하나는 저장소를 관리하는 것이다. 각 객체는 조그마한 메모리를 갖고 있는 별도의 작은 컴퓨터라 볼 수 있다. 1. 객체 리터럴 가장 접하기 쉽고 일반적으로 객체를 만드는 방법이다. const person = {name: 'jacob', age: 20} 1-1. 새로..

Modern Browser 흔히 Chrome, Safari, Edge, Firefox 같은 최신(modern) 웹 브라우저를 말한다. 특히 앞에서 언급한 4개의 브라우저의 경우 브라우저 시장의 90% 이상을 차지하며, 동일한 렌더링 엔진에 의존하는 다른 브라우저 5%를 추가하면, 전 세계 웹 트래픽의 95%가 위 브라우저이나, 위 브라우저 기반이라고 할 수 있다. Modern JavaScript 모던 자바스크립트란, 특정 ECMAScript 사양 버전으로 작성된 자바스크립트 코드를 의미하지 않으며, 최신 브라우저가 모두 지원하는 구문을 말한다. 아래의 기능은 구글에서 말하는 10년 동안 가장 널리 사용된 자바스크립트의 기능이다. Classes (ES2015) Arrow functions (ES2015) ..

나는 왜 갑자기 리팩터링에 관심을 가졌을까? 최근 실무를 하다가 고객이 보는 정산서 로직을 리팩터링 해야 되는 경우가 생겼다. 이것이 필요했던 가장 큰 이유는 첫째는 성능 이슈가 컸다. 기존에 사용하던 레거시 코드의 경우 처음에는 많은 계산 로직이 없었으나, 점점 요구 사항과 세금 관련 이슈가 많이 생기다 보니, 한 가지 서비스가 정말 많은 것들을 판단하고 계산하는 로직이 되어버린 것이다. 두 번째 이유는 첫 번째 이유로 인해 이미 너무 복잡해져 버리고 비대해져 버린 서비스 로직의 문제였다. 평소 리팩터링을 자주하긴 했었다. 우리는 항상 보이스카우트('지나간 자리는 지금보다 깨끗이 만든다')라는 원칙을 가지고 있고, 나는 그 누구보다 그 원칙을 따랐었다. 그래서 기존 로직을 약간 수정하거나 정말 작은 규..

async await는 Promise를 가독성 좋게 사용하는 한 가지 방법에 불과합니다. 이미 앞에 글에서 봤듯이 자바스크립트를 통해 비동기 코드를 처리하는 가장 기본적인 방법은 콜백 함수, 프라미스(Promise), Async-await 등이 있었다. 그리고 각각은 장점과 단점이 있었고, 각각의 함수가 중첩되는 상황이 깊어질수록 콜백 함수는 콜백헬을 만들고, 여러 프라미스가 체인닝되어 선언되었다면 에러를 디버깅하는데 힘들었다. 그에 반해 async await를 간결한 코드와 기존 에러 핸들링 방식이었던 try~catch문을 통해 더 깔끔한 처리(?)가 가능했다. 이런 이야기만 들으면 async-await만 쓸 것같지만, 실제로는 꼭 그렇지 않다. 여기에 대한 이야기를 차근차근 풀어보자. 여러 개의 비동..

프론트엔드 개발자로 있다 보면, 한 번쯤은 들어봤을 용어이다. 사실 CSS도 알고 JS도 이미 알고 있다. 그렇다면 직역을 해보자면, 자바스크립트 안에 있는 CSS 정도일 것이다. 이것도 당연 이해가 된다. 언뜻 보면 어렵지 않아 보이는 이 개념이 왜 궁금한 것일까. 조금 더 깊게 파보자. 기존 CSS 사용 방식에는 어떤 문제가 있었을까? css는 기본적으로 전역으로 사용된다. 그래서 우리는 class name을 통해 CSS를 제어하기 시작했다. 또한 한 엘리먼트(element)에 여러 개의 클래스 이름을 붙였다. 참고로 className은 class와 동일하다. class 이름이라고 부르기가 애매해서 className이라고 적었다. 아래 간단한 예를 보자. 만약 버튼의 배경색을 파란색으로 해달라는 요구..

프론트엔드 개발자로 있다 보면, 웹팩(webpack)에 대해서 이해했냐는 질문 혹은 웹팩에 대한 이해도가 있는 사람을 모집한다는 공고를 자주 접하게 된다. CRA로 create-react-app을 통해 프로젝트를 하나라도 만들어 봤다면, 이미 사용해본 것이다(물론 웹팩이 react에 종속적인 개념은 아니다). 자주는 접하지만, 자주 까먹는... 그래서 이번 글에서는 모듈 번들러인 웹팩(webpack)에서 대한 내용이다. 그전에 먼저 모듈 번들러가 무엇인지 알아보자. What's module bundler? 모듈 번들러(module bundler)란, 자바스크립트 모듈을 브라우저에서 실행할 수 있는 단일 자바스크립트 파일로 묶어주는(=번들링 해주는) 도구이다. 예를 들어 아래와 같이 자바스크립트 파일로 구..

이벤트란? events are actions or occurrences that happen in the system you are programming. 이벤트는 프로그래밍 중인 시스템에서 발생하는 동작(actions) 또는 발생(occurrences)이며, 동기식 혹은 비동기식으로 전달된다. 시스템은 이벤트가 발생할 때 어떤 종류의 신호를 생성(또는 발동)하고 어떤 종류의 동작이 수행될 수 있는 메커니즘을 제공한다. 이벤트가 발생하면 자동으로 일부 코드가 실행되며 동작한다. 이벤트 핸들러 이벤트 핸들러(event handler)란, 이벤트가 발생할 때 실행되는 함수를 말하며, 이벤트 리스너(event listeners)라고도 불린다. 하지만 엄밀히 말하면 이벤트 리스너는 이벤트 발생을 수신하며, 이벤..