GIS Developer

2023-05-282023-05-29

체스 모델링

체스 보드에 놓여진 말 중 하나를 정해 모델링해 봅니다. 워낙 간단한 모델인지라 모델링은 몇분 걸리지 않는데.. 재질을 만드는데 상대적으로 더 많은 시간이 소요되었습니다.

하나의 체스 모델에 대해 3개의 재질이 보이는데, 유리를 제외하고.. 먼저 금 재질은 다음과 같습니다.

그리고 다음은 조개 껍질 비슷한 재질(Narce) 재질은 다음과 같습니다.

다음은 체스 말 중 상대적으로 가장 복잡한 나이트를 모델링하고 동일한 재질을 부여한 렌더링 결과입니다.

2023-05-202023-05-20

[React] 함수형 컴포넌트에 매서드 추가해서 사용하기

먼저 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을 통해 매서드를 정의해줍니다.

2023-05-132023-05-13

TypeScript로 보는 GoF의 디자인패턴에 대한 강좌입니다. GoF의 23개의 패턴 모두를 설명하고 있고 각 패턴에 대한 실습을 TypeScript 언어와 클래스다이어그램을 통해 설명합니다. 이제 막 TypeScript 언어를 학습했고 TypeScript 언어에 대한 실습이 필요하다면 이 강좌를 통해 소프트웨어의 설계 방법인 디자인패턴을 학습함과 동시에 구체적인 실습도 진행할 수 있습니다.