기초 - class (Javascript ES6)

실무에서 사용하는 자바스크립트의 기초적인 문법들을 차근차근 정리해보려고 합니다.
// 실무에서 어떻게 사용하고 있나?

클래스

class ?!

클래스는 templete (틀) 이고 메모리에 올라가지 않고… 등등의 이야기는 뒤쪽에 정리하도록 하겠습니다.

먼저.. class 는 언제 쓰는 가?

중요한 건, 어떤 경우에 class를 쓰는 가 / 왜 쓰는 가 가 class 문법이 만들어진 중요한 포인트인 것 같습니다.

class 는 1. “연관” 있는 데이터 / 함수 들을 한 덩어리로 2. “묶어” (그 묶은 데이터를 field (속성 - 데이터) 이라고 하고, 함수를 method (행동)라고 합니다) 3. “틀” 을 만들어 데이터 마다 다른 결과물을 만들고 싶을 때 사용할 수 있습니다.

예를 들어, 삼각형의 가로, 삼각형의 세로, 삼각형의 넓이를 구하는 함수, 사각형의 가로, 사각형의 세로, 사각형의 넓이를 구하는 함수 등등의 데이터 / 함수들이 있다고 가정해 봅니다. 당연히 삼각형은 삼각형끼리 사각형은 사각형끼리 묶어서 관리하면 편리 할 것 입니다. 추가로 실제 값을 가지지 않은 삼각형 / 사각형의 틀을 가지고 있다면, 여러가지 값들을 가진 삼각형 / 사각형을 만들기 편할 것 입니다.

코드로 확인해 보겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
class 사각형 {
// you can pass data to 삼각형 as creating 삼각형 object
constructor(width, height, color){
// fields
this.width = width;
this.height = height;
this.color = color;
}

// methods
printArea() {
console.log(this.width * this height);
}
}

이제 삼각형이라는 틀을 완성했습니다.
그럼 이 틀을 이용해 가로 10, 세로 10, 빨간색 이라는 데이터를 넣은 사각형을 만들어 보겠습니다.

1
const rectangle = new 사각형(10, 10, 'red');

원하는 데이터를 이 틀(class)에 넣어서 다양한 결과물을 만들어 낼 수 있습니다.

  • 빨간(데이터) 사각형
  • 파란(데이터) 사각형
  • 가로, 세로 길이가 같은 (데이터) 사각형

(클래스를 붕어빵틀, 그리고 그 결과물을 팥 붕어빵, 크림 붕어빵 이라는 유명한 예시들이 있습니다….)

그리고, 그 결과물을 조금더 전문 용어로 표현 하면, 이것을 class 의 instance 또는 object 라고 합니다.

class 정의

  • 연관된 데이터와 함수를 묶는 틀
  • 묶인 데이터를 field(속성), 묶인 함수를 method (행동) 이라 함
  • 그 틀에 의해 실제 데이터로 만들어진 결과물을 인스턴스 라고 함

class 특징

Why Typescript?

타입스크립트에 대해 정리해 보도록 하겠습니다.
타입스크립트는 “어떤 문제를 해결하기 위해” 등장한 언어이며, 타입스크립트를 “사용하는 이유” 에 대해 여러 블로그를 읽고 정리한 글 입니다.
제 생각이 아닌 단순히 정리한 글이기 때문에 평어체를 쓰도록 하겠습니다.

Module Dependency

모듈 A가 최신버전으로 설치되는 데, 왜 이전 버전이 왜 추가로 설치되는 거지?

개발을 하던 도중 어떤 모듈의 버전을 올리면서 각 모듈들의 의존성에 대해 이해해야 했고, 그것을 정리해여 글로 남기려고 합니다.

Node packaged Magager(npm)를 사용해 저희는 개발에 필요한 모듈 패키지들을 편리하게 설치하고 제거하여 개발하고 있습니다. 하지만 때로는 각각의 패키지들이 연결 되어있는 경우가 있습니다. 그것을 “모듈 의존성” 이라고 합니다. 예를 들어, 모듈 A를 사용하기 위해서는 모듈 B 1.0 버전을 설치해야 합니다. 이때 “모듈 A는 모듈 B에 의존한다” 라고 말합니다.

Software Design Patterns - Intro

소프트웨어 엔지니어링에서 디자인 패턴은,

  • 일반적이며(general) 재사용이 가능한
  • 소프트웨어 설계의 상황에서 흔히 일어나는 문제에 대한

솔루션이다.

이것은 설계에서 끝나지 않으며, scoure와 machine code로 전환가능 하다.
by wikipedia


한마디로, 소프트웨어 설계에서 문제들을 해결하기 위해 고안되었고, 실용적이며, 재사용 가능한 설계 패턴입니다.

디자인 패턴을 익히면서 저의 코드 전체 구조에 대한 이해가 점점 높아지고, 패턴 간의 장단점을 익혀 적용해 볼 수 있기를 기대합니다.
많은 디자인 패턴 중에서, 구조 패턴에 대해 정리해 보려고 합니다.

Structural Patterns

  1. Adapter
  2. Bridge
  3. Composite
  4. Decorator
  5. Facade
  6. Flyweight
  7. Proxy

this란 무엇일까?

“그래서, this가 뭔가요?”

this는 해당함수를 어떤 방식으로 호출하느냐에 따라 결정 됩니다. blur blur blur…”
“그래서, this가 뭔가요?”

면접에서 this에 대해 한참을 설명하고 나서 들었던 질문입니다. 저는 this를 단순히 객체를 가리키는 것 이라고만 생각하고 있었습니다. 면접 후, this에 대해 좀더 자세히 공부하였고, 머릿속에 있던 자바스크립트의 개념들과 이것(여기서의 이것은?)을 연결하여 이해 할 수 있었습니다. 아래의 내용들은 제가 this에 대해서 공부하면서 함께 공부했던 내용들을 정리해놓은 것입니다. 주로 ZeroCho 님의 블로그를 보고 공부하였습니다.

객체를 생성자 함수처럼 사용하기, Object.create(obj)

1
Object.create(obj);

obj을 프로토타입으로 가질 객체를 생성하시오
return 값은, 명시된 객체를 프로토 타입으로 가지고, 명시된 속성들을 가지는 새로운 객체

this 를 원하는 객체와 연결하기, call, apply, arguments

1
function.call(object);

의미: function이라는 함수가 실행될 때 그 안의 this가 object를 가리키도록 해

DOM, Document Object Model 이란?

HTML을 작성할 때에는 HTML 콘텐츠를 다른 HTML 콘텐츠 내에 캡슐화하여 문서를 작성한다.

1
2
3
4
<html>
<head></head>
<html></html>
</html>

이를 통해 Tree로 표현 가능한 계층 구조가 만들어진다. 브라우저는 HTML 문서를 로딩할 때, 이 계층구조 (Tree)를 해석하여 마크업이 어떻게 캡슐화 되었는 지를 보여주는 노드 개체(객체) 트리를 생성한다.

Prototype

자바스크립트의 Prototype 이란, 어떠한 객체가 만들어지기 위한 그 객체의 모태(원형)를 말한다. 자바스크립트의 모든 객체는 Object 객체의 프로토타입을 기반으로 확장 되었다.

Prototype은 크게 두가지 특징을 가지고 있다.

  1. 생성자 (constructor) 와 쌍을 이룬다.
  2. Instance 와 연결되어 있다. (Dunder proto와 prototype chain)

첫번째, 생성자 (constructor) 와 쌍을 이룬다.

마치 “부부”처럼, 생성자가 있으면 Prototype은 반드시 존재한다. 생성자에는 아내인 Prototype에 대한 정보를 “기본적”으로 가지고 있다. 그 정보(prototype의 reference)를 prototype 이라는 속성에 저장 한다. 반대로 아내 prototype도 남편의 정보(constructor의 reference)를 constructor라는 속성에 저장하고 있다.

아래 이미지에서 파란색 줄은 Object라는 생성자의 prototype 속성에 저장된 정보를, 노란색 줄은 생성자 아내(prototype)의 constructor 속성에 저장된 정보를 보여준다.

각각의 속성의 값들은 그 자체로 아내(prototype)와 남편(constructor)을 가리킨다.

this keyword

this가 객체를 가리킨다 하지만, 어떤 객체를 가리키는지는 this를 사용하는 해당 함수를 “어떤 방식으로 호출하느냐” 에 따라 결정된다.

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×