본문 바로가기

분류 전체보기301

제네릭 Generic // Use casetype ApiResponse = { data: Data isErrpr: boolean}// case#1const response: ApiResonse = { data: { status: 200 }, isError: false}const response: ApiResonse = { data: "abcde", isError: false}// case#2 = 타입의 확장type UserResponse = ApiResponse;type BlogResponse = ApiResponse;const response: UserResponse = { data: { name: 'abcde', age: 1 }, .. 2024. 6. 5.
Particle 만들기 - 랜덤 Geometry: BufferGeometry** 원래 가지고 있는 형태가 없어 사용자가 원하는 것(vertex positions, face indices, normals, colors)을 만들고 싶을때 사용. (여기서 vertex position 을 사용함)Material: PointsMaterialMesh: Points   ■ BufferGeometry 세팅하기1. 좌표가 들어갈 배열 만들기x, y, z는 하나의 무언가를 위치시켜주기 위해 필요한 좌표이다. 만약 내가 100개의 파티클을 만들고 싶다면, 100 곱하기 3, 총 300개의 원소를 가진 배열이 필요하다. (여기서 3은 각각 x, y, z 를 의미한다.)자바스크립트 객체 중 Float32Array 는 내가 원하는 길이를 설정하면 그 길이만큼 .. 2024. 6. 4.
Particle 만들기 - 기본 원리:Sphere, Box, Plane 등 모든 오브젝트들은 많은 vertex(꼭짓점)와 face(면), edge(선) 으로 이루어져 잇는데, 여기서 파티클 효과는 오브젝트를 구성하는 vertex 들만 보여주는 것. Geometry: Sphere, Box, Plane, etc...Material: PointsMaterialMesh: Points 여기서 파티클 효과를 만들기 위해서는 mesh 부분을 "Points" 인스턴스로 만들어 줘야 한다.  // Mesh const geometry = new THREE.SphereGeometry(1, 32, 32); const material = new THREE.PointsMaterial({ size: 1, sizeAttenuation: false // 원근법에.. 2024. 6. 4.
농장 온도변화 모니터 (plotly.js, RxJS) 설명:- 농장에 설치된 약 30개의 센서에서 감지하는 온도수치를 시각적으로 표현.- 5초 간격으로 서버에서 디바이스에 매핑된 약 30개의 온도에 대한 수치값을 가져와 최저/최고/평균 값을 동별로 보여준다.- Ploty를 활요해 농장을 3D 모델로 만들고, 실제 센서의 위치를 생성된 모델 안에 위치시킴으로써 최대한 현실과 비슷하게 만들어 사용자의 집중도를 높힘.- 왼쪽 위에 있는 항목들을 클릭하면 가운데 보이는 3D 농장의 레이어들이 토글되어 보이고 숨겨지고 한다. 특징: 1. blender로 3D 모델을 만든 뒤 gometry 를 뽑아냈다. (blener에서 geometry 뽑아내는 script 보기)2. 3D 모델(농장 inner/outer, 동/서/남/북, 센서위치)을 구성하는 geometry는 모두.. 2024. 5. 20.
Angular project, Plotly.js & WebGL is not supported issue 로컬에서는 Plotly가 잘 작동되었다. 그리고 배포이후에도 잘 작동되었는데, 1개월 후 정도 지난 뒤 서비스에서 "WebGL is not supported by your browser" 문구가 Plotly 차트가 있어야할 부분에 크게 써있었다.해당 문구를 클릭하면 내가 접속한 디바이스에서 WebGL이 구동될 수 있는 환경인지 확인해주는 페이지로 이동했고, 정상적으로 구동되는 것을 보여주었다. (3D 와이어프레임 상자가 회전하는 모습이 보이면 정상)  구체적인 이슈 상황을 정리하자면...1. 2D type의 그래프는 정상적으로 나오나, 3D 타입(scatter3d, mesh3d)의 그래프는 " WebGL is not supported by your browser" 문구와 함께 canvas가 생성되지 않는.. 2024. 5. 17.
Angular (Service & RxJS) vs NgRx / Redux 차이점 서비스와 NgRx의 비교. 개인적으로는 전역 상태관리 라이브러리인 Redux/NgRx가 Angular에서는 필요하지 않다고 생각한다. Angular의 서비스는 싱글톤이고, 컴포넌트간 데이터를 공유할 수 있도록 하기 때문이다. chatgpt에게 "what is the difference between Service from Angular and Redux"라고 질문했을때 4가지 항목으로 분류해 그 차이점을 설명한다. 1) 상태 업데이트의 추적성: Redux에서는 상태 업데이트가 엄격하게 추적되고 기록됩니다. 이는 디버깅을 용이하게 만들어줍니다. 반면에 Angular 서비스에서는 상태 변경이 어떻게 발생했는지 추적하기가 훨씬 어렵습니다. 각 컴포넌트가 서비스의 상태를 직접 변경할 수 있으며, 이는 예상치 못.. 2024. 5. 9.

티스토리툴바