Dachae's DevLogs

[디지털 트윈] Unity에 3D 건물 시각화하기

Unity에 3D 건물 시각화하기 디지털 트윈 프로젝트를 준비하며, 웹 브라우저 상에서 3D 지도를 구현해보려 합니다. 이를 위해 지형, 건물, 도로 등 다양한 공간 정보를 시각화할 계획입니다. 우선 V-World 디지털트윈국토에서 지원하는 GIS건물통합정보를 기반으로, Unity 위에 건물 데이터를 3D로 표현하려 합니다. 이전 글 보기 [디지털 트윈] Unity에 3D 지형 시각화하기 - 수치 지형도/정사 영상 편Unity에 3D 지형 시각화하기 - 수치 지형도/정사 영상 편 디지털 트윈 프로젝트를 준비하며, 웹 브라우저 상에서 3D 지형을 구현해보려 합니다. 이를 위해 지형, 건물, 도로 등 다양한 공간 정보를dachaes-devlogs.tistory.com [디지털 트윈] Unity에 3D 지형..

Unity에 3D 지형 시각화하기 - DEM 편 디지털 트윈 프로젝트를 준비하며, 웹 브라우저 상에서 3D 지형을 구현해보려 합니다. 이를 위해 지형, 건물, 도로 등 다양한 공간 정보를 시각화할 계획입니다. 우선 국토정보플랫폼에서 지원하는 정사 영상을 QGIS에 띄우려고 합니다. 이전 글 보기 [디지털 트윈] Unity에 3D 지형 시각화하기 - 수치 지도/정사 영상 편Unity에 3D 지형 시각화하기 - 수치 지도/정사 영상 편디지털 트윈 프로젝트를 준비하며, 웹 브라우저 상에서 3D 지형을 구현해보려 합니다. 이를 위해 지형, 건물, 도로 등 다양한 공간 정보를 시각dachaes-devlogs.tistory.com 개발 환경Node v22.16.0React v19.1.0 (TypeScript) + ..

Unity에 3D 지형 시각화하기 - 수치 지형도/정사 영상 편 디지털 트윈 프로젝트를 준비하며, 웹 브라우저 상에서 3D 지형을 구현해보려 합니다. 이를 위해 지형, 건물, 도로 등 다양한 공간 정보를 시각화할 계획입니다. 우선 국토정보플랫폼에서 지원하는 정사 영상을 QGIS에 띄우려고 합니다. 개발 환경Node v22.16.0React v19.1.0 (TypeScript) + ViteQGIS Desktop 3.42.3Unity 6000.0.50f1 (LTS)개발 순서수치 지형도 다운받기정사 영상 다운받기참고 사이트국토정보플랫폼 국토정보맵 - 수치지도받기 : https://map.ngii.go.kr/ms/map/NlipMap.do블로그 : https://bongra.tistory.com/226 1. ..

포트 포워딩(Port Forwarding) 포트 포워딩(Port Forwarding)은 내부 네트워크에 위치한 장치나 서비스를 외부에서 접근할 수 있도록 해주는 네트워크 설정 기법입니다. 일반적으로 가정이나 회사에서 사용하는 공유기(라우터)는 외부에서 직접 내부 IP에 접근할 수 없게 보호되어 있는데, 이때 특정 포트를 열고, 외부 요청을 내부 장치로 전달하는 역할을 하는 것이 포트 포워딩입니다. 웹 서버, 게임 서버, 원격 데스크톱 등을 외부에서 사용하기 위해 꼭 필요한 기술이며, 네트워크 보안이나 방화벽 설정과도 밀접하게 연결됩니다. 1. 포트 포워딩이란?포트 포워딩은 외부에서 특정 포트로 들어오는 요청을 내부 네트워크의 특정 IP 주소와 포트로 전달하는 라우터의 기능입니다. 일반적으로 NAT(Ne..

Base64 디코딩 성능 최적화 프론트엔드에서 실시간으로 Base64로 인코딩된 온도 데이터를 디코딩해 Float32Array로 변환해야 하는 작업이 있었습니다. 그런데 개발자 도구로 성능을 분석해보니, 디코딩 과정에서 상당한 시간이 소요되고 있었습니다. 개선 전에는 Promise 기반의 비동기 로직을 사용했지만, 실제로는 동기 처리만으로 충분한 작업이었기에 오히려 오버헤드를 유발하고 있었습니다.이 코드 개선만으로도 993.9ms → 60.5ms, 약 16.4배의 성능 향상을 얻을 수 있었고, 그 과정을 아래에 정리했습니다. 개발 환경Node v22.16.0React v18.3.1 (JavaScript) + CRABase64란 무엇인가?Base64는 바이너리 데이터를 문자 데이터(영문자, 숫자, 특수문자..

React + canvas로 열화상 영상 실시간 렌더링하기 실시간으로 전달되는 열화상 카메라의 영상 데이터를 웹 브라우저 상에서 시각화해야 했습니다. 영상은 base64 형태의 JPEG 이미지를 HTML5 요소에 렌더링하는 방식으로 구현했습니다. 이 글에서는 해당 과정 중 영상 처리 및 시각화 로직을 정리해보려고 합니다. 개발 환경Node v22.16.0React v18.3.1 (JavaScript) + CRA 개발 순서기본 구조 확인하기영상 데이터 렌더링 준비하기컬러맵 적용하기 (흑백 → 컬러)최고/최저 온도 위치 표시하기 1. 기본 구조 확인하기 (표준적인 방식) 서버에서 전달받은 이미지 데이터는 base64 형식의 JPEG입니다.const canvas = canvasRef.current;cons..

React의 StrictMode란? React에는 라는 컴포넌트가 있습니다. 특히 create-react-app으로 생성한 프로젝트에서는 기본적으로 루트에 사용되고 있는데요, "StrictMode는 개발 모드에서만 작동한다"는 것 외에 명확히 알고 있는 사람은 의외로 많지 않습니다.StrictMode는 단순한 개발 도구를 넘어, 리액트 컴포넌트의 동작을 더 엄격하게 감시하고, 잠재적인 문제를 조기에 감지할 수 있게 도와주는 중요한 역할을 합니다. 특히 비동기 렌더링 환경이나 React 18의 동시성 모드와 관련된 이슈를 디버깅할 때, StrictMode는 필수적인 점검 도구로 기능합니다. 예를 들어, 부작용(side effect)을 유발할 수 있는 코드를 감지하기 위해 컴포넌트를 의도적으로 두 번 마운트..

React와 CesiumJS로 3D 건물 시각화하기 디지털 트윈 프로젝트를 준비하며, 웹 브라우저 상에서 3D 지도를 구현해보려 합니다. 이를 위해 CesiumJS를 활용하여 지형, 건물, 도로 등 다양한 공간 정보를 시각화할 계획입니다. 우선 V-World 디지털트윈국토에서 지원하는 GIS건물통합정보를 기반으로, CesiumJS 위에 건물 데이터를 3D로 표현하려 합니다. 이전 글 보기 [디지털 트윈] React에서 CesiumJS 사용하기CesiumJS는 3D 지구본과 도시 시각화를 위한 오픈소스 라이브러리입니다. 디지털 트윈 프로젝트를 준비하며, 웹 브라우저 상에서 3D 지도를 구현해보려 합니다. 본격적인 개발에 앞서 CesiumJS 환경을dachaes-devlogs.tistory.com 개발 환..

React에서 CesiumJS 사용하기 CesiumJS는 3D 지구본과 도시 시각화를 위한 오픈소스 라이브러리입니다. 디지털 트윈 프로젝트를 준비하며, 웹 브라우저 상에서 3D 지도를 구현해보려 합니다. 본격적인 개발에 앞서 CesiumJS 환경을 먼저 구성하고, 간단한 예시 지도를 띄워보는 과정을 진행했습니다. 또한 이번 작업은 폐쇄망(인터넷이 단절된 환경)을 전제로 하기 때문에, Cesium Ion은 사용하지 않습니다. 개발 환경Node v22.16.0React v19.1.0 (TypeScript) + Vite개발 순서Cesium 설치하기정적 리소스 복사하기Cesium 환경 설정하기기본 뷰어 코드 작성하기 (Ion 제거)참고 사이트CesiumJS 공식 사이트 : https://cesium.com/pl..

OSM 데이터를 Unity 3D에 불러오기 디지털 트윈 프로젝트를 위해 OSM2World를 활용하여 OpenStreetMap(OSM) 데이터를 가져와 Unity 상에서 3D 환경으로 구현해보고자 했습니다. 개발 환경Node v22.16.0React v19.1.0 (TypeScript) + ViteUnity 6000.0.50f1 (LTS)OSM2World (Java 기반 도구)JDK 21.0.7Apache Maven개발 순서OSM 파일 다운로드하기Maven 설치하기OSM2World 프로젝트 다운로드하기 OSM2World 으로 .osm 파일을 .obj 파일과 .obj.mtl 파일로 변환하기유니티 프로젝트 생성하기유니티에 변환한 파일을 불러오기유니티 프로젝트 빌드하기WebGL로 웹 프로젝트에 띄우기참고 사이트..

연상코드(Associative Code) 연상코드(Associative Code)는 인간의 기억 방식에서 영감을 받아 데이터를 특정한 주소나 위치가 아닌 내용(Content) 자체를 기반으로 접근하는 방식입니다. 일반적인 컴퓨터 메모리가 주소 기반으로 동작하는 것과 달리, 연상코드는 데이터의 일부 내용만 알아도 관련 정보를 찾아낼 수 있다는 점에서 매우 직관적이고 효율적인 접근을 제공합니다. 이러한 원리는 인공지능, 캐시 시스템, 그리고 인간 두뇌를 모방한 뉴로모픽 컴퓨팅에서 많이 응용됩니다. 1. 연상코드란?연상코드(Associative Code)는 데이터를 고유한 주소로 접근하지 않고, 일부 정보(키, 패턴, 속성)를 기반으로 해당 데이터 전체를 찾아내는 방식입니다. 이는 "내용 기반 접근(Con..

스마트 워크(Smart Work) ‘스마트 워크(Smart Work)’는 단순히 재택근무나 유연근무제를 뜻하는 것이 아닙니다. 스마트 워크는 정보통신기술(ICT)을 활용해 시간과 장소에 구애받지 않고 효율적으로 일할 수 있는 환경과 문화를 만드는 것을 의미합니다. 이는 조직의 생산성을 높이고, 구성원의 삶의 질을 향상시키며, 더 나은 워라밸(Work-Life Balance)을 실현하기 위한 전략입니다. 팬데믹 이후 급속히 확산된 원격근무 환경은 스마트 워크의 필요성과 가능성을 널리 인식시켰고, 많은 기업이 이를 새로운 표준으로 채택하고 있습니다. 1. 스마트 워크의 정의스마트 워크(Smart Work)란 다음과 같은 요소를 포함하는 개념입니다.시간과 장소의 제약 없는 근무 방식 : 재택근무, 원격근무,..

SDK(Software Development Kit) SDK(Software Development Kit)는 소프트웨어를 만들 때 필요한 도구들을 모아놓은 개발 키트입니다. 예를 들어, 안드로이드 앱을 만들려면 Android SDK가 필요하고, iPhone 앱을 만들려면 iOS SDK를 사용해야 합니다. SDK는 단순히 기능을 호출하는 API만 있는 것이 아니라, 코드를 실행하고 테스트할 수 있는 프로그램, 샘플 코드, 개발 가이드 문서 등도 함께 포함되어 있습니다.초보자 입장에서 보면, SDK는 “무언가를 만들기 위해 꼭 설치하고 따라야 하는 공식 도구 세트”라고 생각하면 됩니다. 예를 들어 어떤 회사에서 제공하는 기능(예: 페이스북 로그인)을 앱에 넣고 싶다면, 그 회사가 제공하는 SDK를 사용해야 ..

응집도(Cohesion) 응집도(Cohesion)는 소프트웨어 설계에서 모듈이 하나의 작업에 집중하는 정도를 나타내는 중요한 개념입니다. 간단히 말하면, 하나의 모듈이 얼마나 "관련 있는 기능들"만 포함하고 있느냐를 측정하는 지표입니다. 응집도가 높을수록 모듈의 책임이 명확하고 변경에 강하며, 유지보수가 쉬운 구조가 됩니다. 반대로 응집도가 낮은 모듈은 다양한 목적의 기능이 섞여 있어 코드가 복잡하고 버그가 발생하기 쉬워집니다.소프트웨어 공학에서는 응집도를 일곱 단계로 분류하며, 낮은 응집도에서 높은 응집도로 갈수록 더 좋은 설계로 간주됩니다. 각 단계는 모듈의 목적 일관성에 따라 구분되며, 이를 이해하면 더 나은 모듈 설계를 할 수 있습니다.이 글에서는 응집도의 정의와 함께 일곱 가지 종류를 상세히 설..

써드 파티(Third-party) 써드 파티(Third-party)라는 용어는 단순히 외부에서 가져온 코드나 도구를 의미하는 것 같지만, 실제로는 그 이상의 의미를 지닙니다. 현대 애플리케이션 개발은 혼자 모든 기능을 구현하기보다는, 이미 잘 만들어진 외부 라이브러리나 API, 서비스들을 조합하여 효율적으로 완성하는 방식으로 진화해 왔습니다. 이 과정에서 사용되는 다양한 외부 기술 요소들을 통칭하는 것이 바로 써드 파티입니다. 예를 들어, 날씨 정보를 가져오기 위해 외부 API를 연동하거나, 인증 기능을 구현하기 위해 Firebase 같은 서비스를 사용하는 것도 모두 써드 파티의 활용입니다. 써드 파티를 적절히 활용하면 개발 생산성을 높이고, 안정적이며 검증된 기능을 손쉽게 적용할 수 있습니다. 그러나..