성장, 그리고 노력

부족하더라도 어제보다 더 잘해지자. 노력은 절대 배신하지 않는다.

자바스크립트 18

[Javascript] 프로토타입(Prototype)

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

Javascript 2022.01.01

this, arrow-function

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

Javascript 2021.12.31

호이스팅(hoisting)

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

Javascript 2021.12.30

Object를 만드는 3가지 방법

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

Javascript 2021.09.20

싱글톤 (Singleton Pattern)

싱글톤 패턴 싱글톤 패턴이란 클래스의 인스턴스화를 하나의 객체로 제한하는 패턴이다. 싱글톤 패턴이 유용했는지 아닌지에 대한 논란은 계속 있어왔으니, 다른 글을 참고하면 좋을 거 같다. 일단 어떻게 만들면 좋을지 간단하게 만들어 보자. Object literal 이 자체로는 유용하진 않지만 객체 리터럴로 간단하게 만들 수 있다. var Person = { name: 'jacob', age: 30, greeting: function () { return `Hi! ${this.name}`; }, }; 유용하지 않은 이유는 이 코드가 불변성을 제공하지 않기 때문에 언제든지 재정의될 수 있기 때문이다. 조금만 더 개선해 보자. const Person = { name: 'jacob', age: 30, greetin..

Typescript 2021.09.19

[Typescript] 타입 가드(type guard)

기본적인 타입 가드 방법 타입스크립트를 사용하다 보면 커스텀한 타입을 만들고, 그것들을 조합해 하나의 유니온 타입으로 만들어 사용하는 경우가 많다. 그런데 그 다음에 어떻게 타입을 좁혀야 할지(type narrow)를 몰라 타입 캐스팅을 해버리는 경우를 코드 리뷰를 하다보면 종종 볼 수 있다. 어떻게 이를 해결할 수 있을까? typeof 타입 축소를 하는 가장 기본적인 방법이다. 단, 런타임에 값에 유형에 대한 가장 기본적인 정보(타입스크립트 내장 타입)만 제공할 수 있다. ※ "string:", "number", "bigint", "boolean", "symbol", "undefined", "object", "function" function print(char: string | string[] | n..

Typescript 2021.09.18

이젠 Modern JavaScript로 publish 하자

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

Javascript 2021.05.22

동기(Synchronous) vs 비동기(asynchronous) 그리고 IOC

사실 이 주제는 자바스크립트에만 종속된 이야기는 아니지만, 대부분의 개념을 자바스크립트를 통해 설명할 것이기 때문에 자바스크립트라는 카테고리에 위치시켰다. 동기(Synchronous) vs 비동기(asynchronous) 동기와 비동기로 작성한 코드의 가장 큰 차이 중 하나는 런타임(runtime)시에 발생하는 지연시간(latency)이다. 모든 코드가 동기적으로(순서대로만) 실행된다면 어떤일이 벌어질까? 내가 만약 메시지를 보낸다고 하면 메시지를 보내고 응답이 오기까지 아무것도 할 수가 없다. 왜냐하면 앞에 작업이 아직 안 끝났기 때문이다. 물론 이런 방식이 전혀 사용이 안되는 것은 아니다. ATM 기계, 키오스크, 단순 단말기 같은 방식은 이런 동기적인 방식을 따르고 있다. 동기적 방식의 장점은 코드..

Javascript 2020.02.01

2부 - 자바스크립트 비동기적 프로그래밍(콜백, 프라미스)

동기적 프로그래밍 동기적 프로그래밍 모델에서는 일(task)은 한 번에 하나씩 일어난다. 그러다 보니 오랫동안 실행되는 동작을 수행하는 함수를 호출했다면, 그 함수가 종료될 때까지 그 프로그램은 중지되게 된다. 이제 1부에 이어, 2부에서는 비동기적 프로그래밍에 대해 알아보자. 1부 - 자바스크립트 함수 표현식, IIFE 그리고 비동기 함수 표현식 함수 표현식(function expression)은 값이 될 수 있고, 함수 역시 값이 될 수 있다. 이는 함수를 선언하는 한 가지 방법일 뿐이며, 그 함수가 익명이 될 수도 있을 뿐이다. 함수 표현식은 식별자에 할.. code-masterjung.tistory.com 비동기적 테크닉을 사용해야 하는 경우 사용자의 행동과 관련된 것(입력, 클릭 등) Ajax ..

Javascript 2020.01.28

1부 - 자바스크립트 함수 표현식, IIFE 그리고 비동기

함수 표현식 함수 표현식(function expression)은 값이 될 수 있고, 함수 역시 값이 될 수 있다. 이는 함수를 선언하는 한 가지 방법일 뿐이며, 그 함수가 익명이 될 수도 있을 뿐이다. 함수 표현식은 식별자에 할당할 수도 있고 즉시 호출(IIFE)할 수도 있다. 함수 표현식은 함수 이름을 생략할 수 있다는 점을 제외하면 함수 선언과 문법적으로 완전히 같다. const f = function() { // ... }; 위 예제는 결과적으로 함수 선언과 동등하다. 식별자 f가 이 함수를 가리키며, 일반적인 함수 선언과 마찬가지로 f()로 이 함수를 호출할 수 있다. 차이점은 먼저 함수 표현식으로 익명 함수를 만들고 그 함수를 변수에 할당했다는 거다. 익명 함수는 어디든지 쓸 수 있다. 다른 함..

Javascript 2020.01.27
반응형