본문 바로가기

오블완21

Electron + Vite + React 환경 세팅 살펴보기 나중에 Electron과 지금 공부하고 있는 Three.js를 엮어 작은 프로젝트를 해보면 좋겠다는 생각이 들었다.마침 Vite를 사용했을 때, 만족으러운 개발 경험을 했기 때문에 Vite도 쓸 수 있나? 했는데 딱 쓰기 좋은 템플릿이 보였다.간단하게 어떤 방법으로 환경을 간단히 구성할 수 있는지, 어떤 구성으로 되어있는지 살펴보기로.    서론에서 언급한대로, Electron과 Vite 환경을 쉽게 구성할 수 있나? 싶어 가볍게 살펴보았다. 몇 가지 방법이 있었는데 아래와 같다. 1. electron-forge의 vite 템플릿을 사용하기.Electron-forge는 OpenJS 재단에서 관리하고 있는 오픈소스 프로젝트이다.Electron으로 개발된 프로젝트의 패키징과 배포를 한 번에 처리할 수 있도록.. 2024. 11. 15.
Three.js and TypeScript (4) Udemy의 Three.js and TypeScript 강의를 듣고 정리한 내용을 기록한다.11. Renderer 부터 13. Object3D 까지.RendererScene과 Camera에 대한 정보를 canvas 요소 내부에 그려내는 역할을 수행한다.Three.js에서 가장 보편적으로 쓰이는 Renderer는 WebGLRenderer이다.WebGL을 사용하여 GPU 가속 이미지 처리를 진행하고, Renderer가 canvas에 2D 이미지를 생성할 수 있도록 한다.⇒ 빠른 성능import * as THREE from 'three';const renderer = new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight.. 2024. 11. 14.
Three.js and TypeScript (3) Udemy의 Three.js and TypeScript 강의를 듣고 정리한 내용을 기록한다.10. Camera 를 듣고 정리한 내용이다.CameraThree.js에는 다양한 타입의 카메라가 존재한다.Perspective, Orthographic, Stereo Camera…이번 강의에서는 Perspective / Orthographic 위주로 살펴본다.Camera의 각종 속성을 통해, 렌더링되는 Scene 내부의 차원(Dimension)인 ‘절두체(Frustum)’를 설정하는 것이 가능하다.즉, 카메라를 통해 보일 영역을 설정 가능하다는 의미인 것 같다.모든 카메라 클래스는 Camera 클래스를 확장하고, 지난 번에 살펴본 Scene처럼 Camera 또한 Object3D를 확장한다. 따라서 카메라 클래스에.. 2024. 11. 13.
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.