[카테고리:] 미분류

작성일자

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 })
작성일자

node.js로 서버 개발 환경 설정 (with TypeScript)

package.json 파일 생성 등의 프로젝트 생성

npm init -y

개발에 필요한 패키지 설치

npm i -D typescript ts-node nodemon

tsconfig.json 파일 생성을 위해 다음 명령 수행

npx tsc --init

tsconfig.json에 다음 내용 추가

{
  ...

  "target": "es6",
  "module": "commonjs",
  "outDir": "./dist",
  "rootDir": "./src",
  "strict": true,
  "moduleResolution": "node",
  "esModuleInterop": true,

  ...
}

dist와 src 폴더를 생성하고 src에 index.ts 파일 생성

packagejson에 다음 내용 추가

{
  ...

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node dist/index.js",
    "build": "tsc -p .",
    "dev": "nodemon --watch \"src/**/*.ts\" --exec \"ts-node\" src/index.ts"
  },

  ...
}

개발 시작

npm run dev

index.ts에 다음 코드를 입력하면 터미널에 그 결과가 바로 반영됨

작성일자

groupBy API

JS에서 어떤 데이터를 표현하는 객체의 형태를 변경하는 일은 매우 자주 있고 이에 대한 코드를 작성하는 것은 한번 정도는 도전 정신이 발휘 되기도 하지만 그 다음부터는 짜증스럽기도 합니다. 아래와 같은 데이터가 있다고 가정해 봅시다.

[
  { name: "Jim", age: 48, sex: "F" },
  { name: "Kyle", age: 28, sex: "M" },
  { name: "Sally", age: 28, sex: "F" },
  { name: "Jane", age: 32, sex: "M" },
  { name: "Tom", age: 48, sex: "F" }
]

이 데이터의 필드 중 sex는 성별을 나타내는 것으로 이를 기준으로 데이터를 다음처럼 구성하려고 합니다.

{
  "F": [
    {"name":"Jim","age":48,"sex":"F"},
    {"name":"Sally","age":28,"sex":"F"},
    {"name":"Tom","age":48,"sex":"F"}
  ],
  "M": [
    {"name":"Kyle","age":28,"sex":"M"},
    {"name":"Jane","age":32,"sex":"M"}
  ]
}

데이터의 표현을 F, M으로 구분해 다시 구성한 형태입니다. 이를 위한 목적을 이루기 위해 JS는 하나의 API 제공하고 있는데 다음과 같습니다.

const people = [
  { name: "Jim", age: 48, sex: "F" },
  { name: "Kyle", age: 28, sex: "M" },
  { name: "Sally", age: 28, sex: "F" },
  { name: "Jane", age: 32, sex: "M" },
  { name: "Tom", age: 48, sex: "F" }
]

const groupBySex = Object.groupBy(people, person => {
  return person.sex
})

Object.groupBy가 핵심인데 이 API는 입력 데이터는 변경하지 않고 새로운 데이터를 만들어 반환합니다.