[카테고리:] 미분류

아래의 명령어로 패키지를 설치를 시도함

dnf install epel-release

다음과 같은 에러가 발생

PostgreSQL 10 for RHEL / Rocky 8 - x86_64 61 B/s | 146 B 00:02
Errors during downloading metadata for repository 'pgdg10':
- Status code: 404 for https://download.postgresql.org/pub/repos/yum/10/redhat/rhel-8-x86_64/repodata/repomd.xml (IP: 217.196.149.55)
오류: repo를 위한 메타자료 내려받기에 실패하였습니다 'pgdg10': Cannot download repomd.xml: Cannot download repodata/repomd.xml: All mirrors were tried


pgdg10과 관련된 repomd.xml 파일을 다운로드할 수 없다는 에러로 다음 명령을 실행하여 [pgdg10]에서 enabled=1을 enabled=0으로 변경하여 해결함

vi /etc/yum.repos.d/pgdg-redhat-all.repo

애니메이션 모델 리소스로부터 가져온 데이터를 여러개 복사해서 사용하고자 할때 필요한 코드입니다.

1개만 사용할때는 문제가 없는 기본적으로 작성된 코드는 다음과 같습니다.

import React, { useEffect, useMemo, useRef, useState } from 'react'
import { useGLTF, useAnimations } from '@react-three/drei'
import * as THREE from "three"

export function Robot({ color = "gray", ...props }) {
  const group = useRef()
  const { nodes, materials, animations } = useGLTF('/Robot.glb')
  const { actions } = useAnimations(animations, group)
  const [ animation, setAnimation ] = useState("Idle")

  useEffect(() => {
    actions[animation].reset().fadeIn(0.5).play()
    return () => actions[animation].fadeOut(0.5)
  }, [ animation ])

  materials.Alpha_Body_MAT.color = new THREE.Color(color)

  return (
    <group ref={group} {...props} dispose={null}>
      <group name="Scene">
        <group name="Armature" rotation={[Math.PI / 2, 0, 0]} scale={0.01}>
          <primitive object={nodes.mixamorigHips} />
          <skinnedMesh name="Alpha_Joints" geometry={nodes.Alpha_Joints.geometry} material={materials.Alpha_Joints_MAT} skeleton={nodes.Alpha_Joints.skeleton} />
          <skinnedMesh name="Alpha_Surface" geometry={nodes.Alpha_Surface.geometry} material={materials.Alpha_Body_MAT} skeleton={nodes.Alpha_Surface.skeleton} />
        </group>
      </group>
    </group>
  )
}

useGLTF.preload('/Robot.glb')

위의 코드에 대한 모델 여러개를 장면에 추가하기 위해 다음처럼 코드를 수정해야 합니다.

import React, { useEffect, useMemo, useRef, useState } from 'react'
import { useGLTF, useAnimations } from '@react-three/drei'
import * as THREE from "three"
import { useGraph } from '@react-three/fiber'
import { SkeletonUtils } from "three-stdlib"

export function Robot({ color = "gray", ...props }) {
  const group = useRef()
  const { scene, materials, animations } = useGLTF('/Robot.glb')
  const clone = useMemo(() => SkeletonUtils.clone(scene), [scene])
  const { nodes } = useGraph(clone)
  const { actions } = useAnimations(animations, group)
  const [ animation, setAnimation ] = useState("Idle")

  useEffect(() => {
    actions[animation].reset().fadeIn(0.5).play()
    return () => actions[animation].fadeOut(0.5)
  }, [ animation ])

  const material = materials.Alpha_Body_MAT.clone()
  material.color = new THREE.Color(color)

  return (
    <group ref={group} {...props} dispose={null}>
      <group name="Scene">
        <group name="Armature" rotation={[Math.PI / 2, 0, 0]} scale={0.01}>
          <primitive object={nodes.mixamorigHips} />
          <skinnedMesh name="Alpha_Joints" geometry={nodes.Alpha_Joints.geometry} material={materials.Alpha_Joints_MAT} skeleton={nodes.Alpha_Joints.skeleton} />
          <skinnedMesh name="Alpha_Surface" geometry={nodes.Alpha_Surface.geometry} material={material} skeleton={nodes.Alpha_Surface.skeleton} />
        </group>
      </group>
    </group>
  )
}

useGLTF.preload('/Robot.glb')

위의 코드에서 SkeletonUtils를 사용하고 있는데 이를 위해 아래의 코드를 실행하여 three-stdlib를 설치해야 합니다.

npm i three-stdlib

폴더를 하나 만들고 VS.Code에서 해당 폴더를 연 뒤 터미널에서 다음과 명령을 입력합니다.

npm create vite@latest .
npm install
npm run dev

개발에 간단히 사용할 수 있는 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에 새로운 데이터가 추가됩니다.