[카테고리:] JavaScript

작성일자

JavaScript, 객체의 프로퍼티 개수 얻기

Object 타입의 객체에 대한 프로퍼티의 개수를 얻기 위해서 다음처럼 접근할 수 있습니다.

const obj = { .... };

let result = 0;
for (let fid in rows) {
  result++;
}

느낌이 쎄합니다. 다행히 다음과 같은 매우 효과적인 방식이 있습니다.

Object.keys(obj).length
작성일자

바닐라 JS의 동적 스크립트 임포팅

바닐라 JS로 어떤 라이브러리를 동적으로 포함하고 해당 라이브러리가 완전히 로딩되었을때 코드를 실행하는 방식

const url = "https://~.min.js";
const htmlMeshScript = document.createElement("script");

htmlMeshScript.type = "module";
htmlMeshScript.src = url;

document.body.appendChild(htmlMeshScrip);

htmlMeshScript.onload = (event) => {
  console.log("loaded");
};
작성일자

TypeScript의 배열로 Union Type 정의하기

다음과 같은 배열이 있다.

const SideTypes = [ "FRONT", "BACK", "DOUBLE" ] as const;

위의 배열 객체를 가지고 FRONT와 BACK 또는 DOUBLE 문자열을 갖는 Union Type을 정의하는 코드는 다음과 같다. (as const를 반드시 붙여야 한다.)

type OptionType = {
  side: typeof SideTypes[number];
};

즉, 위의 코드는 아래와 코드와 동일하다. 하지만 아래처럼하면 배열 객체의 값과 유니온 타입을 정의하기 위한 값에 대한 코드가 중복되는 문제가 있다. 이는 반드시 고쳐야 하는 아주 나쁜 리펙토링 대상이다.

type OptionType = {
  side: "FRONT" | "BACK" | "DOUBLE";
};

이제 OptionType은 다음처럼 사용될 수 있다.

const options: OptionType = {
  side: "FRONT"
};

이제 lil-gui 라이브러리에서 다음처럼 효과적인 코드로 작성될 수 있다.

const gui = new GUI();
gui.add(options, "side", SideTypes).onChange(v => {
  if(v === "FRONT") {
    material.side = THREE.FrontSide;
  } else if(v === "BACK") {
    material.side = THREE.BackSide;
  } else if(v === "DOUBLE") {
    material.side = THREE.DoubleSide;
  }
});

위의 코드가 적용된 실행 화면인데, 화면의 우측 상단의 GUI를 위해 적용된 코드다.

작성일자

TypeScript로 보는 GoF의 디자인 패턴

TypeScript로 보는 GoF의 디자인패턴에 대한 강좌입니다. GoF의 23개의 패턴 모두를 설명하고 있고 각 패턴에 대한 실습을 TypeScript 언어와 클래스다이어그램을 통해 설명합니다. 이제 막 TypeScript 언어를 학습했고 TypeScript 언어에 대한 실습이 필요하다면 이 강좌를 통해 소프트웨어의 설계 방법인 디자인패턴을 학습함과 동시에 구체적인 실습도 진행할 수 있습니다.