[카테고리:] 미분류

작성일자

깃허브(GitHub)의 레포지토리를 VS.Code로 작업

  1. 먼저 github에 레포지토리를 생성한다.
  2. 작업 폴더를 만든다.
  3. 만든 작업 폴더를 VS.Code에서 연다.
  4. 터미널에서 “git clone URL 생성할폴더”을 입력해서 깃허브의 레포지토리에 연결한다.
  5. VS.Code에서 푸시(push)할 파일을 복사한다.
  6. commit하고 push한다.
작성일자

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 @types/node

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

npx tsc --init

tsconfig.json에 다음 내용으로 대체

{
  "compilerOptions": {
    /* File Layout */
    "rootDir": "./src",
    "outDir": "./dist",

    /* Environment Settings */
    "module": "nodenext",
    "moduleResolution": "nodenext", // nodenext 모듈 사용 시 명시적으로 매칭 권장
    "target": "esnext",
    "lib": ["esnext"],
    "types": ["node"], // Node.js 전역 타입 활성화 (@types/node 설치 필요)

    /* Other Outputs */
    "sourceMap": true,
    "declaration": true,
    "declarationMap": true,

    /* Stricter Typechecking Options */
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true,

    /* Style Options (코드 품질 향상을 위해 활성화 권장) */
    "noImplicitReturns": true,
    "noImplicitOverride": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noPropertyAccessFromIndexSignature": true,

    /* Recommended Options */
    // "jsx": "react-jsx", // 순수 Node.js 프로젝트라면 제외하거나 주석 처리
    "verbatimModuleSyntax": true,
    "isolatedModules": true,
    "noUncheckedSideEffectImports": true,
    "moduleDetection": "force",
    "skipLibCheck": true
  },
  /* 컴파일 대상 명시 (필수 추가) */
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

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는 입력 데이터는 변경하지 않고 새로운 데이터를 만들어 반환합니다.