공부/etc20 PostgreSQL 로컬 DB 세팅기 Query/Mutation 등을 작성할 때, 이를 테스트 하는 과정에서 DB 내에 잘못된 데이터(Bad data)가 들어갈 수 있다는 애로사항이 있었다.이를 방지하고 싶어서 생각해보던 중, 로컬 DB를 세팅하고 백엔드 프로젝트에 연결하여 사용하는 것으로 해결할 수 있겠다는 생각이 들어 PostgreSQL로 로컬 DB를 세팅해보기로 하였다.아래는 이를 세팅하면서 겪은 이런저런 오류들과 GPT와의 논의 과정(?)을 개인적으로 기록했다. 과정을 꼼꼼하게 기록하질 않았어서... 중간중간 애매모호한 부분이나 의문점이 있는데, 이 부분들은 나중에 한 번 더 확인해봐야 할 것 같다.과정1. PostgreSQL 설치 PostgreSQL 공식 홈페이지에서 운영체제에 맞는 버전을 받아 설치한다. Mac 기준 Homebr.. 2025. 3. 23. Three.js and TypeScript (11) Udemy의 Three.js and TypeScript 강의를 듣고 정리한 내용을 기록한다.31. GLTF DRACO 부터 33. Rapier Debug Renderer 까지.DRACO loader three.js docs threejs.org 3D Mesh를 압축하거나 압축을 풀기 위해 사용하는 오픈소스 라이브러리.그동안 사용해온 GLTF 파일도 압축될 수 있으며, GLTFLoader를 통해 불러오는 것도 가능하다. gltf-transform 설치gltf 파일 형식을 읽고, 수정할 수 있게 한다(참고)강의에서는 모델 파일을 압축하기 위해 사용한다.// 설치yarn global add @gltf-transform/cli// 예제 파일을 압축한다gltf-transform optimize './public/.. 2024. 12. 3. Three.js and TypeScript (10) Udemy의 Three.js and TypeScript 강의를 듣고 정리한 내용을 기록한다.29. JEasings 부터 30. GLTF Animations 까지.JEasings애니메이션에 사용할 수 있는 자바스크립트의 Easing 엔진.Easing: 사전적 의미로는 ‘완화’라는 의미를 갖는다. 애니메이팅에서는 애니메이션을 자연스럽게 만들기 위해 천천히 움직이도록 완화하는 기법을 의미하는 것 같다.일정 시간동안 물체의 속성을 새로운 값으로 변하도록 해주는 기능을 제공한다.아래의 값들을 설정할 수 있다.변환 시간새로이 설정할(변환될) 값시작하기 까지의 딜레이변환이 끝났을 때 실행될 스크립트변환 시간 동안 변환에 걸리는 시간을 변경하는 Easing 함수등등…강사분이 직접 만드신 패키지같다. Tween.js에 .. 2024. 11. 25. Three.js and TypeScript (9) 27. Orbit Controls 부터 28. Lerp 까지.Orbit Controls카메라가 타켓 근처 궤도를 돌도록 한다.별도의 설정을 하지 않았을시, 마우스를 통해 다양한 조작을 할 수 있다.마우스 왼쪽 클릭 시 카메라를 회전한다.마우스 휠로 줌 인/줌 아웃을 할 수 있다.마우스 오른쪽 클릭 시 Panning(pan: ’카메라가 대상을 따라다니며 보여주다, 찍다’ 라는 의미) 한다.Orbit Controls가 설정된 카메라가 바라보는 타겟을 이동시키는 행위인 듯.addons에서 import 하여 사용할 수 있다.생성자는 2개의 인자를 받는다.object: 컨트롤될 카메라 객체. Scene 이외의 다른 객체의 자식이어선 안 된다.domElement: 이벤트 리스너에 사용될 HTML 요소.import .. 2024. 11. 22. Three.js and TypeScript (8) 24. GLTF Loader : Part 1 부터 26. Raycaster 까지.GLTF LoaderGLTF (GL Transmission Format)3D Scene과 모델들의 효율적인 전송과 로딩을 위한 파일 형식.3D 에셋의 크기 및 에셋들을 분석하는데 걸리는 시간을 최소화한다.하나의 GLTF 파일은 하나 혹은 그 이상의 Scene, Meshes, Materials, Textures, Skeletons, Cameras, 기타 등등을 포함할 수 있다.에셋은 JSON 형식(gltf) 혹은 이진 파일(glb)의 형태로 제공될 수 있다.3D 모델링 툴인 블렌더(Blender)를 통해 gltf 파일을 내보낼 수 있다. 구성GLTFLoader로 gltf 파일을 불러온 후, 콘솔로 확인해보면 아래와 같은 각종 .. 2024. 11. 21. Three.js and TypeScript (7) 21. Environment Maps 부터 23. Loading Multiple Assets 까지.Environment MapsEnvironment Mapping: 미리 계산된 텍스쳐를 사용해서 빛을 반사하는(reflective) 표면을 묘사하는 이미지 기반 lighting 기술.MeshStandardMaterial이나 MeshPhysicalMaterial을 쓸 때 가장 좋은 결과물을 얻을 수 있다고 한다.⇒ PBR (Physically Based Rendering) Materials정의를 종합해서 생각해보길, 주변 물체의 표면을 렌더링하는데 영향을 줄 환경을 설정하고, 그 환경이 물체 표면에 반사되어 보이는 것처럼 만드는 것을 의미하는 것 같다. 구현import * as THREE from 'three.. 2024. 11. 20. 이전 1 2 3 4 다음
