본문 바로가기

공부107

Three.js and TypeScript (2) Udemy의 Three.js and TypeScript 강의를 듣고 정리한 내용을 기록한다.8. Install Three.js Course Boilerplate 부터 9. Scene 까지.Three.js에서 필수적으로 고려해야 하는 3가지: Renderer, Scene, Camera 이다.앞으로의 강의에서는 이 3가지에 대한 개념을 먼저 짚고 넘어갈 것.중간중간 새롭게 등장하는 클래스들이 있는데, 이것들에 대해서도 나중에 살펴볼 것이다. Scene: Three.js에서 렌더링 되는 모든 것들이 존재하는 공간.카메라, 각종 3D 오브젝트들, 빛이 위치하는 공간.Three.js를 사용하기 위해 최소 한 개는 생성해야 할 필요가 있다. Scene 생성Scene 생성자를 통해 생성할 수 있다.import * a.. 2024. 11. 12.
비트마스킹 간단 정리하기 지난 게시글에서도 언급했지만, 비트마스킹을 개념적으로는 알고 있는데 아직 활용 예나 실 구현에서 망설이고 헷갈리는 모습을 보이길래 한 번 정리해두면 좋겠다는 생각이 들었다.자바스크립트 기준으로 비트마스킹에 대해 정리하고, 나중에 참고할 수 있도록 자주 사용되는 일례를 기록해두기로.비트마스킹이란? 데이터를 비트, 즉 2진수의 형태로 표현하는 것을 의미한다.집합이나 배열, 부분집합 등을 표현할 때 활용할 수 있다.ex) 5개의 원소를 갖는 집합의 부분집합은 아래와 같이 표현할 수 있다.const arr = [1, 2, 3, 4, 5];/* {1, 3, 5} 를 원소로 갖는 부분 집합 -> 10101 {2} 를 원소로 갖는 부분 집합 -> 10000*/  왜 사용할까?빠르다. 기본적으로 비트 연산을 수행하기 .. 2024. 11. 11.
외판원 순환 문제 알아보기 몇 달 내려놓았던 알고리즘을 다시 풀고자 문제를 찾아보던 중 처음 보는 문제를 접하게 되었다.외판원 순환 문제라는 것인데, 문제를 풀고 이해한 것을 남겨보고자 한다.외판원 순환 문제(Traveling Salesman Problem - TSP)란?  여러 도시와 도시 사이의 이동 비용이 주어질 때, 어느 한 도시에서 시작하여 모든 도시를 순회한 후 처음 시작점이 되는 도시로 돌아올 때까지 걸리는 최소 비용을 구하는 문제이다.  외판원 문제 - 위키백과, 우리 모두의 백과사전위키백과, 우리 모두의 백과사전.ko.wikipedia.org  해결 방법에 대한 고민  처음 문제를 딱 봤을 때 떠오른 점을 나열하자면 아래와 같다.도시와 도시 사이의 이동 비용이 주어진다.도시가 노드, 도시 사이의 이동 비용이 가중.. 2024. 11. 10.
Three.js and TypeScript (1) Udemy의 Three.js and TypeScript 강의를 듣고 정리한 내용을 기록한다.1. Introduction ~ 7. Dat GUI 까지 들은 내용이 기록되어있다. 개발환경 구성하기실습 프로젝트 구성으로 Vite + TypeScript 를 사용한다. Three.js 설치yarn add -D three @types/three  Three.js 모듈 Import 하기기본적으로 Three.js의 코어 부분은 3D 엔진에서 가장 중요한 컴포넌트들 (렌더러, 카메라, 텍스쳐 등)을 중점적으로 갖고 있다.코어를 가능한 한 작게 유지하고 빠르게 취급하기 위해 다른 모듈들을 별도의 경로에 빼두고 있다.따라서 사용하고 싶은 모듈이 있을 경우 이들을 따로따로 Import 해야 한다.import { OrbitCo.. 2024. 11. 9.
Hydration이란? 전에 Next.js를 공부할 때 hydration이란 단어를 접한 적이 있었다. 그런데 근래에 Zustand 공식문서를 훑어 보다가 Hydrate라는 단어를 또 접했다.둘이 같은 의미라기엔 정의가 미묘하게 달라서 헷갈리는 일이 없도록 간단하게라도 정리하기로.Next.js 에서의 Hydration사실 Next.js에서만 쓰는 개념은 아닌 것 같다.정확히는, SSR에서 언급되는 용어. (https://www.patterns.dev/react/server-side-rendering/)React 공식 문서에도 서버에서 생성된 컨텐츠를 처리하는 hydrateRoot 가 존재한다.https://react.dev/reference/react-dom/client/hydrateRoot  hydrateRoot – Reac.. 2024. 11. 7.
실시간으로 서버에서 데이터를 가져와보기 (feat. Polling/Websocket/SSE) 회사에서 다양한 프로젝트를 진행하며, 서버에서 실시간으로 갱신되는 데이터를 가져오는 작업을 몇 번 경험했다.그 과정에서 다양한 방식을 접하고 경험할 수 있었는데, 간단하게 복습 겸 정리해보기로.Polling 방식새로운 데이터를 받아오기 위해 API를 일정한 간격으로 계속해서 호출하는 것. 즉 클라이언트가 주기적으로 서버에 요청을 보낸다.setInterval 등으로 일정 간격을 두고 서버에 데이터를 요청하는 방식으로 구현하면 되기 때문에, 다른 방식들에 비해 비교적 구현이 간단하다.다만, 새로 가져올 데이터가 없더라도 무조건 요청을 보내기 때문에 비효율적이고 서버의 부담을 증가시킨다는 단점이 존재한다.또한, 갱신된 데이터를 제때제때 받아오는 방식이 아니기 때문에 실시간성이 떨어진다.   위에서 언급한대로 .. 2024. 11. 3.

티스토리툴바