[카테고리:] 미분류

웹 UI 라이브러리인 GWC에서 제공하는 ValueRangesColorMatcher 컴포넌트에 대한 예제 코드입니다.

먼저 DOM 구성은 다음과 같습니다.

그리고 CSS 구성은 다음과 같구요.

.center {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    gap: 1em;
}

#matcher {
    width: 30em;
    height: 15em;
}

js 코드는 다음과 같습니다.

window.onload = () => {
    const data = [ 165, 120, 160, 200, 135, 115, 100, 125, 135, 190, 156, 130 ]
    const rangeColors = [
        { ranges: [100, 120], color: '#00ff00'},
        { ranges: [120, 141], color: '#88ff00'},
        { ranges: [141, 160], color: '#ffff00'},
        { ranges: [160, 180], color: '#ff8800'},
        { ranges: [180, 200], color: '#ff0000'}
    ]

    matcher.defineData(data, rangeColors)

    document.querySelector(".btn-get").addEventListener("click", () => {
        alert(JSON.stringify(matcher.valueRangeColors, null, 4))
    })

    GeoServiceWebComponentManager.instance.update();
};

실행 결과는 다음과 같습니다.

소수점을 설정할 수 있으며 속성은 toFixed 입니다.

무작위 값을 얻기 위한 흔한 방법은 random API 사용인데, 실제로 무작위 값을 얻기 위해 많이 사용하는 것은 Noise라는 개념이고 이 Noise를 얻기 위한 몇가지 알고리즘 중 특허에 대한 저작권 침해에 대한 문제가 없고 또 품질면에서 Simplex Noise가 많이 사용됩니다.

아래는 Simplex Noise에 대한 시각화에 대한 결과물로 누군가의 유튜브 채널에 올라온 영상의 내용입니다.

three.js를 이용해 시각화한 경우로 다음과 같은 라이브러리를 사용하고 있습니다.

"devDependencies": {
  "vite": "^4.3.9"
},
"dependencies": {
  "simplex-noise": "^4.0.1",
  "three": "^0.153.0",
  "three-fatline": "^0.6.1"
}

그리고 주요 코드는 다음과 같습니다.

...

const noise2D = createNoise2D()

function createLines() {
  for(let r=-20; r<20; r++) {
    const wnoise = noise2D(0, r*0.125) * 1.0
    const lineWidth = 0.25 + Math.pow(wnoise * 0.5 + 1, 2)

    const dashed = Math.random() > 0.5
    const dashScale = 1
    const dashSize = Math.pow(Math.random(), 2) * 15 + 4
    const gapSize = dashSize * (0.5 + Math.random() * 1)
    
    const material = new LineMaterial({
      color: "rgb(241, 231, 222)",
      linewidth: lineWidth,
      resolution: new Vector2(res, res),
      dashed,
      dashScale,
      dashSize,
      gapSize
    })

    const vertices = []
    for(let i=0; i<100; i++) {
      let height = 0
  
      height += noise2D(i * 0.0189 * 1, r * 0.125) * 2.0
      height += noise2D(i * 0.0189 * 2, r * 0.125) * 1.0
      height += noise2D(i * 0.0189 * 4, r * 0.125) * 0.5
      height += noise2D(i * 0.0189 * 8, r * 0.125) * 0.25
      height += noise2D(i * 0.0189 * 16, r * 0.125) * 0.125
  
      vertices.push(
        -330 + 660 * (i / 100), 
        height * 20 + r * 16, 
        0
      )
    }  

    const geometry = new LineGeometry()
    geometry.setPositions(vertices)
  
    const line = new Line2(geometry, material)
    line.computeLineDistances()
  
    scene.add(line)
  }
}

...

완전한 코드는 앞서 언급해 드린 유튜브 영상을 보시기 바랍니다.

작년에 3D 인터렉티브 웹 개발에 대한 내용으로 한국메타버스산업협회를 통해 교육을 진행했고, 올해도 교육을 진행합니다. 작년에는 바닐라 JS로 three.js 라이브러리를 살펴보았다면, 이번에는 React로 three.js를, 정확히는 React three fiber 라이브러리(R3F)를 살펴보는 내용으로 구성됩니다. R3F는 더 적은 코드로 더 높은 품질의 3D 웹 페이지를 개발할 수 있습니다. 교육기간의 경우 작년에는 3일간이였지만 이번에는 4일간의 교육으로 진행하며, 마지막 날에 실습을 통해 만들 코드 결과는 다음과 같습니다.

교육에 대한 참여 신청은 아래의 교육 소개 이미지를 클릭하시면 됩니다.

웹브라우저의 기능 중 Ctrl + Plus나 Ctrl + Minus를 누르면 화면이 커지거나 작아집니다. 즉 화면의 확대, 축소 기능인데요. 이 Zoom 값을 얻는 JS 코드입니다.

const zoom = (window.outerWidth / window.innerWidth);

위의 zoom 값은 비율이고 % 값을 원한다면 100을 곱해주면 됩니다. 마우스로 어떤 UI를 드래그 해서 이동 시킬때 꼭 반영해 줘야 할 Zoom 값입니다.

먼저 App.jsx 파일에 코드가 작성된 App 컴포넌트가 있습니다.

import { useRef } from 'react'
import './App.css'
import MyComponent from './MyComponent'

function App() {
  const refComponent = useRef()
  
  return (
    <>
      <MyComponent ref={refComponent} />
      <button onClick={ () => { refComponent.current.setName("Dip2K") } }>set Name</button>
      <button onClick={ () => { refComponent.current.setAge(100) } }>set Age</button>
      <button onClick={ () => { 
        alert(`Name: ${refComponent.current.getName()}, Age: ${refComponent.current.getAge()}`) 
      } }>get Info</button>
    </>
  )
}

export default App

실행 결과에 대한 화면은 다음과 같구요.

화면에서 App 컴포넌트의 코드에서 보이는 MyComponent는 Name과 Age를 입력받는 부분입니다. 그 외 3개의 버튼을 보면 MyComponent의 매서드를 호출하고 있습니다. 리엑트에서 컴포넌트의 매서드를 호출한다라는 것은 리엑트 계에서는 매우 어색한 경우이며 피해야 하는 경우라고 합니다.

MyComponent에 대한 코드는 다음과 같습니다.

import { forwardRef, useImperativeHandle, useRef } from "react";

function MyComponent(props, ref) {
  const refNameInput = useRef()
  const refAgeInput = useRef()

  useImperativeHandle(ref, () => ({
    getName: () => { return refNameInput.current.value },
    setName: (v) => { refNameInput.current.value = v },
    getAge: () => { return refAgeInput.current.value },
    setAge: (v) => { refAgeInput.current.value = v },
  }))

  return (
    <div>
      <p><span>Name </span><input ref={refNameInput} /></p>
      <p><span>Age </span><input ref={refAgeInput} /></p>
    </div>
  )
}

export default forwardRef(MyComponent)

리엑트에서 함수형 컴포넌트에 매서드를 추가하기 위해서는 forwardRef라는 고차함수와 useImperativeHandle라는 훅을 동시에 사용해야 하며 useImperativeHandle을 통해 매서드를 정의해줍니다.