Dachae's DevLogs

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로 웹 프로젝트에 띄우기참고 사이트..

useContext React 애플리케이션에서 컴포넌트 간 데이터를 공유할 때 props drilling(깊게 전달되는 props)이 반복되면 유지보수가 어려워집니다. 이때 useContext 훅은 컴포넌트 트리 전체에 걸쳐 데이터를 쉽게 공유할 수 있는 강력한 도구가 됩니다. 이 글에서는 useContext에 대한 개념 설명은 생략하고, 실제로 프로젝트에서 어떻게 useContext를 사용하는지 A부터 Z까지 구현 중심으로 자세히 안내합니다. 1. Context 생성하기 (Create Context)먼저 context 객체를 생성합니다.// ThemeContext.jsimport { createContext } from 'react';export const ThemeContext = createCon..

useEffect 리액트에서 함수형 컴포넌트를 사용할 때 가장 자주 만나게 되는 훅 중 하나가 useEffect 입니다. useEffect 는 컴포넌트가 렌더링된 이후 특정 작업(사이드 이펙트)을 실행할 수 있게 도와주는 훅입니다. 예를 들어, API 호출, 이벤트 리스너 등록, 타이머 설정, 외부 라이브러리 초기화 등의 작업이 이에 해당합니다.이 글에서는 useEffect 의 기본 개념부터 동작 방식, 의존성 배열, 정리(clean-up) 함수까지 단계별로 알아보겠습니다. 1. useEffect란?useEffect 는 리액트 컴포넌트가 렌더링된 이후 실행되는 함수입니다. 컴포넌트가 처음 렌더링될 때, 특정 값이 바뀔 때, 컴포넌트가 사라질 때 등 다양한 타이밍에 맞춰 동작할 수 있습니다.useEffe..

useRef 리액트에서 DOM에 직접 접근하거나 컴포넌트 간 특정 값을 공유하고 싶을 때, useRef 훅은 매우 유용한 도구입니다. 초보자에게는 조금 낯설 수 있지만, 잘 활용하면 불필요한 리렌더링을 줄이고, DOM 요소를 직접 제어하며, 타이머나 이전 상태 값을 저장하는 등 다양한 상황에서 활용할 수 있습니다. 1. useRef란?useRef 는 리액트 훅 중 하나로, 변경 가능한 참조 객체(mutable ref object)를 반환합니다. 이 객체는 .current 라는 프로퍼티를 가지고 있으며, 여기에 원하는 값을 저장하거나 DOM 요소를 참조할 수 있습니다.const myRef = useRef(initialValue);myRef.current 에 값이 저장됩니다..current 의 값이 변경..

useState 리액트를 처음 접하거나 훅(Hook)에 입문하는 개발자라면 가장 먼저 만나게 되는 개념 중 하나가 바로 useState입니다. useState는 컴포넌트 내부에서 상태(state)를 관리할 수 있게 해주는 리액트 훅이며, 함수형 컴포넌트에서도 클래스 컴포넌트 못지않게 동적인 UI를 구현할 수 있게 해줍니다. 1. useState란?useState는 리액트에서 제공하는 훅(Hook) 중 하나로, 함수형 컴포넌트에서 상태(state)를 선언하고 관리할 수 있게 해주는 함수입니다. 상태는 컴포넌트의 데이터나 UI를 동적으로 변경할 때 사용하는 값입니다.기본 문법const [state, setState] = useState(initialValue);state : 현재 상태 값setState :..

useContext 리액트 앱을 만들다 보면 컴포넌트 간 상태를 공유해야 하는 경우가 많습니다. 예를 들어, 로그인 여부, 테마 설정, 다크모드, 언어 설정 등은 여러 컴포넌트가 함께 사용하는 전역 상태입니다.이럴 때 React의 Context API + useContext 훅을 사용하면 아주 깔끔하게 상태를 관리할 수 있습니다. 1. useContext란?useContext는 Context 객체의 값을 쉽게 꺼내 쓰기 위한 React 훅입니다.Context는 React에서 전역 상태를 만들 수 있도록 도와주는 기능이고, useContext는 이 Context에 저장된 값을 컴포넌트 내부에서 간단히 꺼내 쓰게 해주는 도구입니다.언제 useContext를 쓰는가? 로그인 여부 관리 : isAuthenti..

React Lifecycle 리액트 컴포넌트를 사용하다 보면 "언제 데이터를 불러와야 할까?", "언제 정리(clean-up)를 해야 할까?" 같은 고민이 생깁니다. 이럴 때 중요한 개념이 바로 컴포넌트의 라이프사이클(Lifecycle) 입니다. 이 글에서는 리액트 컴포넌트가 생성되고, 업데이트되고, 제거되는 일련의 과정을 클래스형 컴포넌트와 함수형 컴포넌트(Hooks 사용) 관점에서 자세히 설명합니다. 1. 리액트 라이프사이클이란?리액트 컴포넌트는 화면에 렌더링되는 동안 여러 가지 단계를 거칩니다. 이 일련의 과정이 라이프사이클이며, 크게 세 단계로 나뉩니다:마운트(Mount) : 컴포넌트가 DOM에 삽입될 때업데이트(Update) : 상태나 props가 바뀌어 컴포넌트가 다시 렌더링될 때언마운트(U..

Next.js Next.js는 React 기반의 웹 애플리케이션 개발을 위한 프레임워크입니다. React는 컴포넌트 기반 UI 라이브러리로 강력하지만, 실제 웹 애플리케이션을 만들기 위해서는 라우팅, 데이터 패칭, 서버 렌더링, SEO 최적화, 코드 분할 등의 여러 요소를 직접 구현해야 합니다.Next.js는 이러한 복잡한 기능들을 기본 제공하여, 개발자가 더 적은 설정과 코드로 더 강력한 웹 애플리케이션을 만들 수 있도록 도와줍니다. 1. Next.js란 무엇인가요?Next.js는 React 기반의 웹 애플리케이션을 쉽고 빠르게 개발할 수 있도록 도와주는 프레임워크입니다. 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), API 라우팅, 이미지 최적화 등 React로는 직접 구현하기 복잡한 ..

xlsx 웹 애플리케이션에서 사용자가 직접 엑셀 파일을 업로드하고, 그 내용을 읽어온 뒤 수정하거나 다시 다운로드할 수 있다면 정말 유용합니다. 특히 보고서 처리, 데이터 검증, 간단한 데이터 편집 UI 등에 적합하죠. 라이브러리로는 가장 널리 쓰이는 xlsx를 사용합니다. 이 글에서는 Node.js 없이, 순수 React에서 엑셀 파일을 읽고, 수정하고, 다시 엑셀이나 CSV로 다운로드하는 과정을 소개합니다. 1. xlsx 라이브러리란?xlsx는 JavaScript에서 엑셀 파일을 읽고 쓰기 위해 만들어진 라이브러리입니다.브라우저, Node.js 환경 모두에서 사용할 수 있고, .xlsx, .xls, .csv 등 다양한 포맷을 지원합니다.공식 명칭은 "SheetJS"이며, xlsx는 그 중 핵심 모듈..

소셜 로그인 요즘 웹 서비스에서 소셜 로그인은 필수적인 기능이 되었습니다. 사용자는 구글이나 카카오 같은 계정으로 간편하게 로그인할 수 있고, 서비스는 복잡한 회원가입 과정을 줄일 수 있죠. 하지만 개발자 입장에서는 단순한 버튼 클릭만으로 끝나지 않습니다. OAuth 인증 흐름, 인가 코드 처리, 백엔드 연동, JWT 토큰 관리까지 고려할 요소가 많습니다.그리고 이런 흐름은 일반 로그인과도 대부분 유사합니다. 인증 요청, 응답 처리, 토큰 저장 및 상태 관리라는 구조는 동일하죠. 이 글에서는 프론트엔드 관점에서 소셜 로그인 구현의 전체 흐름을 정리하고, React로 구글 로그인을 어떻게 구현하는지 실습 코드와 함께 설명합니다. 1. 전체 구조 - 소셜 로그인 흐름 (간단 정리)프론트엔드사용자가 "구글..

useCallback React를 사용하다 보면 컴포넌트가 생각보다 자주 리렌더링되거나, 자식 컴포넌트가 의미 없이 반복해서 렌더링되는 문제를 경험하게 됩니다. 이럴 때 자주 등장하는 해결책이 바로 useCallback 훅입니다.useCallback 은 함수의 참조값을 유지해 불필요한 렌더링을 줄이는 데 도움을 주는 도구이지만, 언제 써야 효과가 있고, 언제 쓰지 말아야 하는지에 대한 명확한 기준 없이 무작정 사용하는 경우가 많습니다.이 글에서는 useCallback 의 기본 개념부터, 실제 사용 예제, 그리고 사용을 권장하는 상황과 피해야 할 상황까지 모두 정리합니다. 성능 최적화를 위해 useCallback 을 고민하고 있다면, 이 글이 그 판단에 확실한 기준을 줄 수 있을 거예요. 1. useCa..