TS-LOG

프로그래밍/JavaScript 디자인 패턴

팩토리 패턴 (Factory Pattern)

객제 지향 언어에서 new 라는 키워드로 생성된 객체는 결합 관계가 강력한 코드이다. 이것을 의존성이라고 하는데, 팩토리 패턴은 이러한 의존성을 느슨하게 만들어 코드의 가독성을 높이고 유연성을 올려주는 디자인 패턴이다. 팩토리 패턴 기본 개념 팩토리 패턴은 객체 생성을 담당하는 별도의 팩토리 클래스를 정의하고 이 클래스를 통해 객체를 생성한다. 즉, 클라이언트 코드에서 직접 new를 통한 객체를 생성하지 않고 팩토리 클래스에 생성을 위임 하는 것이다. 팩토리 패턴 구현 캔버스 태그에 도형을 그려야 하는 코드를 프로그래밍 한다고 가정해 보자. 도형의 모양이 사각형이라면 사각형 클래스(Rect Class)로 생성을 하고 원형이라면 원형 클래스(Circle Class)로 생성을 해야 한다. 여기에 팩토리 패턴..

프로그래밍/JavaScript 기초

자바스크립트 스프레드 연산자 활용 및 확장

"자바스크립트 스프레드 연산자 ('...')는 배열이나 객체의 요소를 펼쳐서 개별 요소로 분리하거나, 복사할 때 사용하는 유용한 문법입니다." 배열에서의 스프레드 연산자 배열 병합 배열을 펼쳐서 개별 요소로 분리하거나 다른 배열과 병합할 때 사용할 수 있습니다. const arr0 = ['a', 'b', 'c', 'd', 'e']; const arr1 = ['f', 'g', 'h', 'i', 'j']; const alphabet = [...arr0, ...arr1]; console.log(alphabet); // ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']; 배열 복사 스프레드 연산자를 사용하여 배열을 복사할 수 있습니다. const arr = ['a', '..

프로그래밍/JavaScript 기초

자바스크립트 배열(Array) 생성, 접근, 추가, 삭제

"배열은 여러 값을 순서대로 나열하는 데이터 구조 입니다. 자바스크립트의 배열은 동직이며, 유연한 특징을 가지고 있습니다." 배열 생성 자바스크립트에서 배열 생성은 대괄호 [ ] 나 new Array() 로 생성 할 수 있습니다. // 배열 생성 const arr0 = []; const arr1 = new Array(); 값 대입과 생성을 동시에 할 수도 있습니다. 한 가지 데이타 타입이 아닌, 여러 데이타 타입의 자료를 담을 수 있습니다. // 숫자로 이루어진 배열 const arr0 = [0,1,2,3,4]; // 혼합된 자료형을 가진 배열 const arr1 = new Array(0,'a',1,'b'); 배열 요소 접근 배열의 인덱스는 0부터 시작합니다. 인덱스 값으로 배열의 요소에 접근할 수 있습..

프로그래밍/JavaScript 게임 개발

슬라이딩 퍼즐 게임 만들기 #1/4 (타일 배치)

"슬라이딩 퍼즐은 타일을 움직여서 순서대로 맞추면 되는 퍼즐 게임 입니다. 숫자의 순서를 맞추거나, 분할한 그림을 맞추게 됩니다. " tile.js 만들기 클래스를 생성할 파일을 따로 생성합니다. 위치는 main.js와 동일하게 src 폴더에 만들겠습니다. Tile 클래스 생성 Tile 클래스는 Pixi.js 의 Container를 상속 받아서 만듭니다. Container 는 Pixi.js 에서 가장 범용적인 클래스 입니다. Sprite 나 Graphics 을 배치 할 수 있습니다. 클래스 이름 그대로 뭔가 담을 수 있는 디스플레이 객체 입니다. import * as PIXI from "pixi.js"; export default class Tile extends PIXI.Container { const..