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 })

대한민국 행정구역(SVG) 다운로드

대한민국의 행정구역을 SVG(Scalable Vector Graphics) 형식으로 내려받을 수 있습니다. 보고서 및 웹앱 개발에 유용하게 사용할 수 있는 데이터로 (주)지오서비스에서 직접 가공하여 제공됩니다. 최신 자료는 GEOSERVICE-WEB의 아카이브를 통해 다운로드 받을 수 있고 아래와 같습니다.

향후 지속적으로 보완 되며 찾는 자료가 없거나 커스터마이징이 필요할 경우 문의하시기 바랍니다. 아래는 그 샘플입니다.

서울특별시 부산광역시 대구광역시 인천광역시 광주광역시 대전광역시 울산광역시 세종특별자치시 경기도 강원도 충청북도 충청남도 전라북도 전라남도 경상북도 경상남도 제주특별자치도

종로구 중구 용산구 성동구 광진구 동대문구 중랑구 성북구 강북구 도봉구 노원구 은평구 서대문구 마포구 피카추 강서구 구로구 금천구 영등포구 동작구 관악구 서초구 강남구 송파구 강동구

중구 동구 서구 남구 북구 수성구 달서구 달성군

전주시완산구 전주시덕진구 군산시 익산시 정읍시 남원시 김제시 완주군 진안군 무주군 장수군 임실군 순창군 고창군 부안군

목포시 여수시 순천시 나주시 광양시 담양군 곡성군 구례군 고흥군 보성군 화순군 장흥군 강진군 해남군 영암군 무안군 함평군 영광군 장성군 완도군 진도군 신안군

반곡동 소담동 보람동 대평동 가람동 한솔동 나성동 새롬동 다정동 어진동 종촌동 고운동 아름동 도담동 조치원읍 연기면 연동면 부강면 금남면 장군면 연서면 전의면 전동면 소정면

수원시 장안구 수원시 권선구 수원시 팔달구 수원시 영통구 성남시 수정구 성남시 중원구 성남시 분당구 의정부시 안양시만안구 안양시동안구 부천시 광명시 평택시 동두천시 안산시상록구 안산시단원구 고양시덕양구 고양시일산동구 고양시일산서구 과천시 구리시 남양주시 오산시 시흥시 군포시 의왕시 하남시 용인시처인구 용인시기흥구 용인시수지구 파주시 이천시 안성시 김포시 화성시 광주시 양주시 포천시 여주시 연천군 가평군 양평군

동구 중구 서구 유성구 대덕구

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에 다음 코드를 입력하면 터미널에 그 결과가 바로 반영됨