javascript
-
[JavaScript] 비동기 처리 : Callback, Promise, Async/Await카테고리 없음 2020. 3. 22. 19:27
바르셀로나 스타일이라고 하면 티키타카로 대표되는 패스 축구를 가장 먼저 떠올릴 것이다. 바르셀로나의 더운 날씨로 인해서 직접 뛰기보다는 패스로 공을 운반하는 티키타카 스타일이 자리 잡게 되었다고 한다. 골키퍼부터 시작해서 최전방 공격수까지 이어져 골을 만들어 내는 모습은 감탄스럽다. 골키퍼가 피케에게 공을 패스한다. 피케는 1초 뒤에 부스케츠에게 공을 패스한다. 부스케츠는 1초 뒤 호르디 알바에게, 알바는 1초 뒤 그리즈만에게, 그리즈만은 1초 뒤 메시에게 패스한다. 그리고 1초 뒤 메시가 득점한다. 이를 코드를 통해 짜 보면 어떻게 될까? 포인트는 모든 동작들이 1초의 텀을 두고 이루어진다는 것이다. 이 경우 setTimeOut 함수를 이용할 수 있다. 비동기로 이루어진다. 패스 순서를 정확하게 맞추기..
-
[JavaScript] Instantiation Patterns카테고리 없음 2020. 2. 21. 23:16
객체 지향 프로그래밍은 수작업이 아닌 공장에서의 생산작업을 의미한다. 하나의 공장(원형)을 만든 후, 같은 성격의 제품들(인스턴스)을 계속해서 찍어내는 것이다. 자바스크립트에 class 가 등장하면서, 공장을 만들어내기가 훨씬 쉬워졌지만, 그 전에는 어떤 방식으로 인스턴스들을 만들어냈을까? 크게 다음의 네 가지 방법이 있다. 이들은 레거시 코드로 이와 같은 방식으로 코드를 작성할 일은 많지 않다. 하지만 이미 만들어진 코드를 이해하는 데 중요하므로 알아둘 필요가 있다. 1. Functional var Shoes = function(brand){ var shoeInstance = {}; shoeInstance.brand = brand; shoeInstance.run = function(){ console...
-
[JavaScript] 상속 2 : Class카테고리 없음 2020. 2. 21. 22:41
* Class 앞서 Obejct.create() 를 이용한 상속을 알아보았다. 하지만 ES6가 나오면서 class를 사용해 훨씬 간단하게 상속을 구현할 수 있게 되었다. 아래 코드는 이전 포스팅에서 Object.create()를 이용해 구현한 상속을 ES6 문법의 class 를 사용해 구현한 것이다. // Class class Shape { // class 명 constructor(){ // 기존 생성자함수 부분 this.x = 0; this.y = 0; } move(x,y){ // 기존 prototype 객체에 정의하 메소드 부분 this.x += x; this.y += y; console.info('Shape moved.'); } } class Rectangle extends Shape { const..