[카테고리:] 프로그래밍

작성일자

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를 위해 적용된 코드다.

작성일자

Vite React(또는 바닐라), shader 코드를 별도의 파일로 분리하기

이를 위해서는 vite가 쉐이더 코드를 이해하는 척 해야 하는데, 이를 위해 다음 패키지를 설치합니다.

npm i -D vite-plugin-glsl

그리고 vite.config.js(파일이 없으면 직접 생성해야 함)의 코드를 수정합니다. 기존 코드에서 변경된 부분은 3번과 7번 줄입니다.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import glsl from "vite-plugin-glsl"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), glsl()],
})

이제 다음처럼 별도의 파일로 지정한 쉐이더 코드를 import할 수 있고 사용할 수 있습니다.

import { shaderMaterial, useGLTF } from '@react-three/drei'
import { extend } from '@react-three/fiber'

import stripesVertex from "./stripes.vertex.glsl"
import stripesFragment from "./stripes.fragment.glsl"

const StripesShaderShaderMaterial = shaderMaterial(
  {},
  stripesVertex,
  stripesFragment
)

extend({ StripesShaderShaderMaterial })