플러스프로젝트 배경
1) 예상 리스크 및 대응 계획 - @react-three/fiber GLB 로딩 실패 시 Suspense + Error Boundary로 2D 이미지 폴백하는 안전한 렌더링 구조 설계 - NestJS 다언어 인터셉터에서 원본 데이터 변경 없이 언어 필터링된 새 응답을 반환하는 불변성 처리 구현 - TypeORM Tree Entity findTrees()의 대용량 데이터 N+1 쿼리를 Eager Rela
프로젝트 성과
Three.js 기반 3D 제품 뷰어 통합 구현
@react-three/fiber와 drei를 활용한 GLB 3D 모델 뷰어를 구현하고 로딩 실패 시 2D 이미지 폴백을 포함한 안정적 렌더링 구조를 적용할 예정
i18next 기반 한/영 다언어 콘텐츠 구조 설계
DB 레벨에서 ko/en 컬럼을 분리 저장하고 API 응답 시 Accept-Language 기반으로 해당 언어 데이터를 반환하는 NestJS 인터셉터를 설계할 예정
ISO 인증서 버전 관리 시스템 구현
동일 인증서 신규 버전 업로드 시 이전 버전 보존 및 현재 버전 태깅 구조를 TypeORM 트랜잭션으로 구현할 예정
NestJS CQRS 패턴 기반 어드민 API 구조 적용
콘텐츠 생성·수정 커맨드와 조회 쿼리를 CQRS로 분리하여 테스트 가능한 핸들러 구조를 설계·구현할 예정
제품 스펙 비교 테이블 컴포넌트 설계
최대 4개 제품을 동시 선택하여 스펙 항목별로 비교하는 동적 테이블과 빈 셀 처리·하이라이트 로직을 포함한 재사용 구조를 설계할 예정
핵심 기능
홈
한/영 언어 전환, 풀스크린 제품 쇼케이스, 기술 역량 인포그래픽, ISO 인증 배지, 글로벌 납품 실적 지도 섹션을 구현
진행 단계
NestJS 아키텍처 설계 및 다언어 구조 구성
2026.03.
NestJS 모듈 구조, TypeORM 엔티티 및 Tree Entity 모델링, i18next 다언어 JSON 구조, Multer 파일 업로드 환경 구성
프로젝트 상세
1) 포트폴리오 소개 정밀 부품 제조 기업의 한/영 이중 언어 공식 홈페이지와 통합 어드민을 React + NestJS + PostgreSQL로 설계·구현할 예정. 제품 3D 뷰어, 스펙 비교 테이블, ISO 인증 문서 라이브러리, 다언어 콘텐츠 관리까지 확장된 기능을 구축할 예정. 2) 작업 범위 - 홈: 한/영 언어 전환, 풀스크린 제품 쇼케이스, 기술 역량 인포그래픽, ISO 인증 배지, 글로벌
