2026/07/05 5

[Frontend] 3D 지형 종/횡단면 분석 기능 구현 (feat. MSA)

🗺️ 3D 디지털트윈 플랫폼종·횡단면 분석 마이크로프론트엔드 — 심층 기술 분석 프로젝트***-svc3d-front-mf-crossanalysis역할Cesium 3D 지형 위 선형 공간 분석 · DOCX 보고서 생성스택React 18 · Cesium 1.115 · Qiankun · Turf.js · Recharts작성일2026-07-08 Cesium 3D GIS + 마이크로프론트엔드 + 공간연산 + 다중 백엔드 API를 결합한선형 공간 분석(종단면·횡단면) 도구의 아키텍처와 알고리즘을 깊이 있게 다룹니다.📑 목차프로젝트 개요기술 스택마이크로프론트엔드 아키텍처UI 워크플로우핵심 분석 알고리즘레이어 관리보고서 생성 파이프라인API · 인프라 연동Cesium BaseClass 라이브러리아키텍처 다이어그램개..

Frontend 2026.07.05

[Frontend] 3D 시뮬레이션 기능 구현 (feat. MSA)

🌐 3D 디지털트윈 시뮬레이션 분석 마이크로프론트엔드Cesium · React 18 · Qiankun · Webpack 5로 구현한 공간 시뮬레이션 분석 플랫폼 항목내용아키텍처Yarn Monorepo + MPA Micro-Frontend3D 엔진@cesiumgs/cesium-analytics v1.115UI 프레임워크React 18 + Ant Design 4 + Redux빌드 도구Webpack 5 (UMD 번들, Multi-Entry)배포Nginx Unprivileged Container (8087) ⚠️ 보안 안내본 문서는 공개 블로그용으로 작성되었습니다.내부 IP, 회사명, 서비스 식별자 등 민감 정보는 ***, [REDACTED]로 마스킹 처리되었습니다.📑 목차프로젝트 개요시스템 아키텍처모노레포..

Frontend 2026.07.05

[TroubleShooting] 백엔드 트러블슈팅

common-api — 이슈·트러블슈팅 내역대상: 인증·권한(lx.svcauth), UserForge(lx.gygo.userdataset), 공통 인프라 목차빌드·의존성Redis·캐시보안약점 진단 대응런타임 오류·API 응답인증·권한(Auth)UserForge(사용자 맞춤 데이터셋)로컬 개발 체크리스트알려진 제약·후속 과제1. 빌드·의존성1-1. Nexus 의존성 다운로드 실패항목내용증상./gradlew compileJava 또는 bootRun 시 Maven 아티팩트 resolve 실패원인사내 Nexus(build.gradle의 192.168.211.22:8081) 접근 불가 — VPN·사내망 미연결조치VPN 연결 후 재시도. URL 변경 이력 있음(5ea8536 — MAVEN Nexus 주소 변경)예방..

TroubleShooting 2026.07.05

[Backend] 백엔드 API 구현

공통 백엔드 API를 만나다 — 인증·공간데이터·나의 지역을 하나의 Spring Boot로common-api 프로젝트 소개Java 15 · Spring Boot 2.7 · PostgreSQL(PostGIS) · Redis들어가며3D 공간정보 서비스를 운영하다 보면, 프론트엔드가 호출해야 할 API가 자연스럽게 여러 갈래로 나뉩니다. 로그인과 권한, 사용자가 직접 올린 Shapefile, 관심 지역(나의 지역) 이미지까지 — 각각 별도 서비스로 쪼개면 배포·인증·공통 응답 형식을 매번 맞춰야 합니다.gygo-svc3d-back-common-api는 이런 요구를 단일 Spring Boot 애플리케이션으로 묶은 GYGO 3D 서비스의 공통 백엔드입니다. 설정상 서비스명은 auth-service이지만, 실제로는..

Backend 2026.07.05

[Frontend] JavaScript 정복하기

⚡ 자바스크립트 핵심 개념 완전 정리"자바스크립트는 10분 만에 배울 수 있지만, 제대로 이해하는 데는 10년이 걸린다."프론트엔드 기술 면접에서 가장 자주 등장하는 것이 바로 자바스크립트 핵심 동작 원리입니다. 이 글에서는 면접에서 반드시 나오는 개념들을 원리 중심으로 정리합니다.📌 목차클로저 (Closure)이벤트 루프 (Event Loop)프로토타입 (Prototype)this 바인딩호이스팅 (Hoisting)비동기 처리: Promise와 async/await1️⃣ 클로저 (Closure)클로저는 함수가 자신이 선언될 당시의 렉시컬 스코프(Lexical Scope)를 기억해, 함수 실행이 끝난 후에도 그 스코프에 접근할 수 있는 현상입니다.function makeCounter() { let co..

Frontend 2026.07.05