[작성자:] 김 형준

작성일자

#GWC UI Library : Grid (Custom Draw)

웹 UI 라이브러리인 GWC에서 제공하는 Grid 컴포넌트에서 셀 내용을 사용자정의 형태로 표현하는 예제 코드입니다.

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

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

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

#grid {
    width: 500px;
    height: 250px;
}

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

window.onload = () => {
    grid.columns = [
        { name: "NO", width: "20px" },
        { name: "색상" },
        { name: "범위" },
    ];

    const columnIndex = 1
    grid.setCustomDrawMethod(columnIndex, (item, parentDom) => {
        const dom = document.createElement("div")
        dom.style.width = "100%"
        dom.style.height = "10px"
        dom.style.backgroundColor = item

        parentDom.style.width = "90px"

        return dom
    })

    grid.data = [
        { values: ["1", "#ff0000", "100-200"] },
        { values: ["2", "#ffff00", "200-300"] },
        { values: ["3", "#ff00ff", "300-400"] },
        { values: ["4", "#00ffff", "400-500"] },
        { values: ["5", "#9f9f9f", "500-600"] },
        { values: ["6", "#ff0000", "600-700"] },
        { values: ["7", "#ffff00", "800-900"] },
        { values: ["8", "#ff00ff", "1000-1100"] },
        { values: ["9", "#00ffff", "1100-1200"] },
        { values: ["10", "#9f9f9f", "1300-1400"] },
    ];

    // grid의 data를 먼저 지정하고 setCustomDrawMethod를 그 다음에 호출할 경우 아래의 코드가 필요함
    //grid.update() 

    grid.fixFirstColumn = true;

    grid.addEventListener("columnclick", (event) => {
        const v = grid.getColumn(event.detail.index).name;
        gwcMessage(`컬럼명: ${v}`);
    });

    grid.addEventListener("dataclick", (event) => {
        const v = grid.getData(event.detail.row, event.detail.column);
        gwcMessage(`데이터: ${v}`);
    });
};

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

작성일자

개발용 JSON Server 간단하게 구축하기

개발에 간단히 사용할 수 있는 JSON 서버를 구축하기 위한 글입니다.

다음처럼 json-server를 구동할 수 있습니다.

npx json-server --port 9999 --watch db.json

json-server가 설치되어 있지 않다면 설치할 것인지를 묻고 설치되면 서버가 실행됩니다. 포트는 9999이고 서비스할 json 데이터는 db.json 파일이 저장되어 있는데요. 다음 예시와 같습니다.

{
  "profile": {
    "name": "typicode"
  },

  "topics": [
    {"id": 1, "title": "html", "body": "html is ..."},
    {"id": 2, "title": "css", "body": "css is ..."}
  ]
}

json 데이터가 위와 같다면 다음과 같은 url을 통해 서버에 데이터를 요청해 받아올 수 있습니다.

http://localhost:9999/topics
http://localhost:9999/topics/1
http://localhost:9999/topics/2

이 정도도 나쁘진 않으나 서비스할 데이터를 변경할 수도 있습니다. 클라이언트 단에서 서비스할 데이터를 추가하기 위한 서비스 호출 코드는 다음과 같습니다.

const title = event.target.title.value
const body = event.target.body.value
const options = {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({ title, body })
}

fetch(`http://localhost:9999/topics`, options)
  .then(res => res.json())
  .then(result => {
    console.log(result)
  })

위의 코드가 실행되면 서버 단의 db.json에 새로운 데이터가 추가됩니다.

작성일자

gltfjsx

GLTF 모델에 대한 리엑트 컴포넌트 코드를 작성해 주는 명령 예시

npx gltfjsx ./public/Robot.glb -o ./src/components/Robot.jsx