미생의 Node서버 이야기
1.웹캠과 MediaPipe로 실시간 이미지 분할, 그 비밀을 파헤치다!
WebRTC로 웹캠 영상을 가져와 MediaPipe로 실시간 이미지 분할을 구현하는 방법을 소개합니다. 개발 중 만나는 INFO: Created TensorFlow Lite XNNPACK delegate for CPU. 메시지의 의미를 명확히 알려드려 궁금증을 해결해
2.[Nest.js] CLI로 RESTful API 리소스 쉽게 생성하기
Nest.js CLI의 nest g resource 명령어를 사용해 RESTful API 또는 GraphQL 리소스를 손쉽게 생성하는 방법을 소개합니다. 기본 구조와 옵션을 통해 빠르고 효율적으로 개발하는 방법을정리하였습니다.
3.[Nest.js] @Injectable() 데코레이터로 의존성 주입 이해하기
Nest.js에서 @Injectable() 데코레이터는 의존성 주입을 가능하게 하는 중요한 기능입니다. 이 포스팅에서는 @Injectable()의 역할, 사용 방법, 그리고 의존성 주입의 장점을 정리하였습니다.
4.[Nest.js] Provider로 의존성 주입 쉽게 이해하기
Nest.js에서 Provider는 의존성 주입의 핵심 개념입니다. 이 포스팅에서는 Provider의 역할, 생성 방법, 그리고 실제 모듈에서 사용하는 방법을 예시와 함께 작성하였습니다.
5.[Nest.JS] 애플리케이션 라이프사이클
NestJS의 애플리케이션 라이프사이클에 대해 자세히 알아보세요. 모듈 초기화, 의존성 주입, 라이프사이클 후크 등을 통해 애플리케이션의 상태를 제어하는 방법을 학습하였습니다.
6.[Nest.JS] Dependency Injection 과 Inversion of Control
NestJS에서 Dependency Injection (DI)과 Inversion of Control (IoC)의 개념을 이해하고 활용하는 방법을 학습하였습니다.
7.[Nest.js] pnpm으로 Redis 클라이언트 설치 및 연동하기
Node.js에서 Redis를 사용하려면 ioredis 또는 redis 패키지를 사용할 수 있습니다. 이 포스팅에서는 pnpm으로 Redis 클라이언트를 설치하고 간단한 연동 방법을 정리하였습니다.
8.[Nest.js] Jest를 활용한 CRUD 회원가입 테스트 작성하기
Nest.js에서 TDD 방식을 활용해 회원가입과 관련된 CRUD 기능을 테스트하는 방법을 소개합니다. Jest를 사용한 describe, it 구조로 테스트 코드를 효율적으로 작성하는 과정을 학습하였습니다.
9.[Nest.JS] PostgreSQL 연동
NestJS와 PostgreSQL을 TypeORM을 통해 연동하는 방법을 자세히 설명합니다. 프로젝트 설정부터 엔티티 정의, 서비스 및 컨트롤러 작성까지 데이터 저장과 조회를 학습하였습니다.
10.[Nest.JS] class-validator를 활용한 유효성 검사
NestJS에서 class-validator를 사용하여 유효성 검사를 자동화하고, 코드의 가독성을 높이는 방법을 알아보세요. 기본 사용법부터 커스터마이즈된 에러 메시지 설정까지 학습하였습니다.
11.[Nest.JS] class-transformer로 객체 변환
NestJS와 class-transformer를 활용해 JSON과 TypeScript 클래스 간의 변환을 간편하게 처리하는 방법을 알아보세요. 기본 사용법부터 커스터마이징까지 학습한것을 정리하였습니다.
12.[Nest.JS] 신용카드, 색상코드, UUID, 위도/경도 유효성 데코레이터
NestJS에서 자주 사용하는 @IsCreditCard, @IsHexColor, @IsUUID, @IsLatLong 데코레이터의 활용 방법을 예제 코드와 함께 소개합니다. 프로젝트에서 데이터 유효성을 간편하게 처리하는 방법을 작성하였습니다.
13.[Nest.JS] @UseInterceptors와 @Expose/@Exclude로 직렬화 최적화하기
1. NestJS의 @UseInterceptors에 대해 @UseInterceptors는 NestJS에서 제공하는 데코레이터로, 인터셉터(Interceptor)를 지정할 때 사용됩니다. 인터셉터는 NestJS의 미들웨어와 유사하지만, 더욱 강력하고 다양한 기능을 제
14.[Nest.JS] 환경변수를 활용하여 애플리케이션 설정 관리하기
NestJS에서 환경변수를 사용하는 방법과 중요성을 다룹니다. 보안, 유연성, 유지보수성을 높이는 환경변수 관리로 애플리케이션 설정을 효과적으로 관리하는 방법 학습하였습니다.
15.[Nest.JS] Joi로 데이터 검증 하기
NestJS에서 Joi를 사용해 데이터 검증을 설정하는 방법을 소개합니다. 유연한 스키마 정의와 강력한 검증 기능을 통해 API의 신뢰성을 높이고, 오류를 사전에 방지하는 방법을 학습하였습니다.
16.[Nest.js] TypeORM QueryBuilder의 5가지 실행 타입과 주요 메서드 이야기
TypeORM의 QueryBuilder는 복잡한 SQL 쿼리를 객체로 쉽게 작성할 수 있는 도구입니다. 이 포스팅에서는 QueryBuilder의 개념과 5가지 실행 타입을 정리하였습니다.
17.[Nest.js] 사이드프로젝트하면서 트랜잭션 문제점 발생한 격리 수준 학습 정리하기
사이드프로젝트 하면서 트랜잭션의 주요 문제점과 해결 방법을 정리하였습니다. 특히 Lost Reads, Dirty Reads, Non-repeatable Reads, Phantom Reads를 포함한 트랜잭션의 다양한 문제와 격리 수준에 대해 좀더 알게된 시간이였습니다.
18.[Nest.js] TypeORM을 활용한 PostgreSQL 마이그레이션하기
Nest.js와 TypeORM을 사용해 PostgreSQL 데이터베이스 마이그레이션을 효과적으로 관리하는 방법을 정리하였습니다. 마이그레이션의 중요성과 TypeORM으로 마이그레이션을 생성하고 적용하는 과정을 학습한계기가 되었습니다.
19.[Nest.js] Pipe로 데이터 검증과 변환 쉽게 처리하기
Pipe 기능을 통해 데이터를 어떻게 검증하고 변환할 수 있는지 학습하게된 기회였습니다.기본 제공되는 Pipe부터 사용자 정의 Pipe까지 다양한 활용법을 정리하였습니다.
20.[Nest.Js] Mapped Types
TypeScript의 Mapped Types를 통해 타입을 쉽게 변형하고 재사용할 수 있는 방법을 알아보세요. Partial, Pick, Omit 등 학습한내용을 작성하였습니다.
21.[Nest.JS] Middleware 이해하기
Middleware는 요청과 응답 사이에서 중요한 역할을 수행합니다. 이 글에서는 Middleware의 개념, 활용 방법을 학습하였습니다.
22.[Nest.js] 커스텀 데코레이터로 코드 간결화 및 재사용성 향상하기
Nest.js에서 커스텀 데코레이터를 만들어 프로젝트 코드의 재사용성을 높이고 유지보수를 쉽게 만드는 방법을 알아봅니다. 실제 사례와 함께 데코레이터 구현 및 활용법을 포스팅하였습니다.
23.[Nest.JS] WebSocket을 활용한 실시간 알림 기능 구현하기
NestJS와 WebSocket을 이용해 실시간 알림 기능을 구현해보세요. 알림 저장, 읽음 상태 관리, 실시간 알림 전송 등 주요 기능의 설계와 구현 과정을 포스팅하였습니다.
24.[Nest.js] 활용한 효율적인 사용자 이미지 파일 업로드 기능 구현하기
Nest.js와 PostgreSQL을 활용하여 사용자 이미지 파일 업로드 기능을 구현하고 이를 데이터베이스에 저장하는 방법 포스팅하였습니다. 또한 효율적인 데이터 관리와 파일 처리 로직을 통해, 대규모 트래픽에서도 안정적인 성능을 유지할 수 있는학습을 하게...
25.[Nest.js] Guard와 Custom Decorator 및 Bearer Token Middleware 개선하기
Guard, Custom Decorator, Bearer Token Middleware에 대한 개념과 구현 방법을 소개합니다. 안전한 웹 애플리케이션 개발을 위한 필수 기술을 학습하였습니다.
26.[Nest.js] Role-Based Access Control(RBAC) 구현하기
Nest.js에서 역할 기반 접근 제어(RBAC)를 쉽게 구현하는 방법을 포스팅하였습니다. Guard와 Decorator를 활용한 권한 관리 방법과 실제 사이드프로젝트에 적용해본 경험이였습니다.
27.[Nest.js] Pagination 구현하기: 특징과 종류, 문제점 분석
Nest.js에서 Pagination의 특징과 종류, 문제점 에대해 포스팅하게되었습니다.
28.[Nest.JS] 인터셉터의 응답 시간, 캐시, 트랜잭션 관리 구현하기
인터셉터를 활용해 응답 시간 측정, 캐싱, 트랜잭션 관리 구현 방법을 학습한다음. 사이드프로젝트에 적용한 것을 포스팅하였습니다.
29.[Nest.js] Exception Filter로 에러 처리하기
Exception Filter를 사용하여 애플리케이션에서 발생하는 에러를 중앙 집중적으로 관리하는 방법을 포스팅합니다. 클라이언트에게 일관된 에러 응답을 할수 있을것같습니다.
30.[Nest.js] 성능 최적화와 인증 간소화 하는 캐싱의 모든 것
캐싱을 활용한 성능 최적화 방법과 JWT 인증 프로세스를 간소화하는 방법을 포스팅하였습니다.
31.[Nest.js] API 버전 관리하는 3가지 방법 - URI, Header, Media Type
"API 버전 관리는 서비스 업데이트와 확장성을 위해 필수적인 부분입니다. 이번 글에서는 Nest.js에서 자주 사용하는 세 가지 API 버전 관리 방법, URI, Header, Media Type을 설정하고 사용하는 방법을 자세히 포스팅하였습니다.
32.[Nest.js] 효율적인 로깅 관리하기: 기본 Logger, 커스텀 Logger, 그리고 Winston 활용법
기본 Logger를 활용하는 방법과 더 나아가 커스텀 Logger를 작성해보세요. Winston을 활용한 고급 로깅 설정까지, 애플리케이션 로그 관리를 체계적으로 하고 싶은 개발자분들에게 필요한 정보가 담긴 포스팅입니다.
33.[Three.js] 점곱에서 최적화까지 주사위 값 판별하기
Three.js를 활용해 3D 주사위의 윗면을 판별하는 방법을 학습하였습니다. 점곱(Dot Product)과 Quaternion을 사용한 로직 구현부터 최적화 후기를 포스팅하였습니다
34.[Vite] 빌드 Top-level await 최적화 해결
Top-level await 문제로 인해 발생하는 Vite 빌드 에러를 해결하는 방법을 심도 있게 다룹니다. 효율적인 모델 로딩, 메모리 관리, 성능 모니터링, 에러 처리 전략을 통해 대규모 애플리케이션의 안정성과 성능을 극대화하세요.
35.[Three.js] Rapier로 현실감 있는 자동차 물리 엔진 구현하기
Three.js와 Rapier를 활용해 현실적인 자동차 물리 엔진을 구현하는 방법을 소개합니다. 서스펜션, 엔진, 공기역학, 타이어 물리, 충돌 손상 시스템까지 학습한내용을 포스팅하였습니다.
36.[Tree.js] 게임과 3D 웹 개발을 위한고급 카메라 시스템 구현 하기
Three.js로 전문적인 카메라 시스템을 구현하는 방법을 상세히 알아봅니다. 카메라 전환, 충돌 처리, 쉐이크 효과부터 성능 최적화까지, 실전에서 바로 활용 가능한 완벽한 카메라 시스템에 대해 학습하는 시간이되었습니다.
37.[three.js] Rapier를 활용한 심화 자동차 물리 엔진 구현
Rapier를 활용하여 차량의 서스펜션, 손상 시스템, 날씨 효과 등을 구현하고, 성능 최적화 및 네트워크 동기화까지 지원하는 물리 엔진을 심화 구현한 내용입니다.
38.[Three.js] 성능 최적화 및 고급 제어 테크닉으로 3D 렌더링 효율 극대화하기
Three.js를 활용한 고급 성능 최적화 기법과 PointerLockControls, 충돌 감지, LOD 등 다양한 기술을 적용하여 3D 씬의 렌더링 성능을 극대화하는 방법을 소개합니다.
39.[React.js] Worker Threads를 사용해 비동기 작업 처리하기
JavaScript의 단일 스레드 문제를 해결하기 위한 Worker Threads와 React에서의 사용 사례를 포스팅해봤습니다. 복잡한 계산, 이미지 처리 등 UI 성능 최적화를 위한 전략을 배웠습니다.
40.[THREE.js] Rapier.js 디버그 렌더러 최적화
물리 엔진 디버깅, 더 이상 답답하지 않습니다! Rapier.js와 THREE.js를 활용한 고성능 디버그 렌더러 구현 방법을 상세히 알아봅니다. 실제 프로덕션 환경에서 적용 가능한 최적화 기법부터 개발자 경험을 향상시키는 확장 기능까지 완벽 정리!
41.[Three.js] Rapier.js로 구현하는 캐릭터, 차량, 파괴 가능한 구조물 구현하기
Rapier.js를 활용한 고급 물리 시스템 구현 가이드! 캐릭터 컨트롤러, 차량 물리, 파괴 가능한 구조물, 소프트바디 시뮬레이션까지 실전에서 바로 적용 가능한 심화 예제와 최적화 기법을 상세히 다룹니다. Three.js와의 통합 구현 방법부터 성능 최적화 팁까지 한
42.[three.js] GLTF 모델 최적화 DRACO 압축과 성능 극대화
3D 모델 최적화를 위한 DRACO 압축 심화 가이드! 동적 로딩, 압축 자동화, 성능 분석까지. 이 포스팅을 통해 GLTF 모델의 효율성을 극대화하세요
43.[three.js] GLTF 애니메이션 최적화 하기
GLTF 애니메이션을 다룬다면, 성능과 확장성은 필수입니다. 메모리 관리, 복합 애니메이션, 디버깅까지 실무에서 바로 사용할 수 있는 고급 테크닉을 소개합니다.
44.[Three.js] 애니메이션에서 프로젝트 최적화하기
Three.js를 활용한 복잡한 애니메이션 시스템 설계와 성능 최적화 전략을 소개합니다. 고급 보간 테크닉과 실무 사례 연구로 실력을 한층 업그레이드하세요!
45.[Three.js] OrbitControls 심화 활용과 프로젝트 최적화 학습하기
제어 제한, 성능 최적화까지, 실무에서 자주 활용되는 기술을 다룹니다.
46.[Three.js] Raycaster 성능 향상과 사용자 경험 개선
Three.js에서 성능을 극대화하는 레이캐스터 최적화 기법과 다양한 3D 인터랙션 구현 방법을 소개합니다. 실무에서 유용한 팁을 확인해보세요!
47.[Three.js] GLTF 모델 렌더링 하기
GLTF 모델 최적화와 고급 렌더링 테크닉을 통해 3D 웹 애플리케이션의 성능을 높이고, 시각적 품질을 개선하는 방법을 소개합니다.
48.[Three.js] 에셋 로딩 최적화 및 문제 해결 하기
Three.js에서 대규모 3D 에셋을 효율적으로 관리하는 심화 기법을 소개합니다. 로딩 매니저 구현부터 메모리 최적화, LOD 시스템 구현까지 실무에서 즉시 활용 가능한 코드와 함께 상세히 설명합니다. 6년 경력 개발자의 실전 노하우를 공유합니다.
49.[Three.js] Environment Map과 MeshMaterial: 3D 렌더링에서의 사실적 반사
Environment Map과 MeshMaterial을 활용한 사실적인 3D 렌더링과 성능 최적화 방법을 알아봅니다. 환경맵의 적용과 메탈릭, 거칠기 조정 등 심화 기술을 다룹니다.
50. [Three.js] Shadow Map, Camera 설정부터 최적화 그림자 효과
Three.js에서 그림자 효과를 구현하는 방법을 심도 있게 다뤘습니다. Shadow Map 설정, Light Camera 조정, 그림자 최적화까지 실습 코드와 함께 배워보세요!
51.[Three.js] Ambient, Directional, Point, Spot 조명 학습하기
Three.js로 3D 세계를 구현할 때 필수적인 조명의 종류와 활용법을 소개합니다. Ambient, Directional, Point, Spot 조명의 특징과 구현 방법을 자세히 살펴보세요.
52.[Three.js] 다양한 메테리얼과 특징 비교
Three.js에서 사용 가능한 다양한 메테리얼(Materials)의 종류와 특징을 알아보세요. MeshBasicMaterial, MeshNormalMaterial, MeshStandardMaterial 등 주요 메테리얼 비교와 코드 예제를 통해 활용 방법을 배워보세요
53.[Three.js] BufferGeometry를 활용한 성능 개선하기
3D 건물 모델링 프로젝트에서 발생한 심각한 성능 저하 문제를 BufferGeometry 도입으로 해결한 실제 사례를 공유합니다. 15 FPS에서 55 FPS로 성능이 개선되었고, 메모리 사용량은 60% 감소했습니다. 최적화 과정과 성능 측정 결과를 상세히 다룹니다.
54.[Three.js] 3D 모델 렌더링 성능 개선 및 병목 지점 분석
Three.js로 3D 모델 렌더링 성능을 최적화한 경험을 공유합니다. 성능 테스트 결과를 포함하여, 개선 전후의 차이점과 실제 적용 사례를 확인하세요.
55.[Three.js] 3D 씬 렌더링 시 성능 저하 문제
Three.js의 기본 개념부터 Scene, Camera, Renderer를 활용하는 방법까지! 3D 그래픽 웹 개발을 시작하는 이들에게 필요한 필수 가이드를 제공합니다.
56.[Three.js] 효율적인 3D 객체 계층 구조 관리하기
Three.js에서 Object3D를 활용해 효율적인 3D 계층 구조를 구성하는 방법과 실제 문제 해결 사례를 소개합니다. 계층적 월드 포지션 관리까지!
57.[Three.js] 렌더링 성능 최적화와 병목 현상 해결하기
Three.js로 3D 애니메이션 성능 최적화! Stats.js와 Lil GUI를 활용한 FPS 개선과 메모리 최적화 방법을 소개합니다. 성능 병목 해결로 더욱 빠르고 효율적인 렌더링 경험을 제공해 보세요
58.[Three.js] 대규모 3D 시각화 프로젝트의 렌더링 성능 개선하기
대규모 부동산 3D 시각화 프로젝트에서 겪은 성능 문제와 해결 과정을 공유합니다. 텍스처 캐싱, LOD 시스템 구현, Frustum Culling 최적화 등을 통해 초기 로딩 시간 70% 감소, FPS 200% 향상을 달성한 경험을 정리했습니다.
59.[React.js] 컴포넌트 초기화 시 useEffect 의존성 배열의 문제 해결하기
React에서 컴포넌트 초기화 시 useEffect의 빈 배열 사용으로 발생할 수 있는 성능 문제를 다루고, 이를 해결하는 최적화 방법과 실제 적용 사례를 소개합니다.
60.[React.js] 새롭게 추가된 훅으로 코드
React 19에서는 상태 관리와 UI 반응성 최적화에 도움을 주는 새로운 훅들이 추가되었습니다. useTransition, useActionState, useOptimistic, useFormStatus를 통해 개발이 더 간편하고 효율적으로!
61.[NestJS] v10 업데이트 라이브러리 호환성 문제 해결 및 기술 부채 해소하기
NestJS v6에서 v10으로의 업데이트 과정을 공유합니다. 기술 부채 해결과 최신 라이브러리 호환성 확보를 위한 핵심 변화 및 하위 호환성 전략을 포스팅하였습니다.
62.[Vue.js] 코드 스플리팅으로 웹 최적화 줄이기
웹 애플리케이션의 느린 로딩 속도 때문에 고민이신가요? 이 글은 Vue.js 프로젝트에 코드 스플리팅을 적용해 초기 로딩 시간을 획기적으로 개선하는 실전 가이드입니다. 라우트, 컴포넌트, 권한 기반 스플리팅까지, 성능 최적화의 모든 것을 담았습니다.
63.[Vue.js] React만 에러 바운더리가 있나? 에러 격리 시스템 구축하기
웹 앱 개발에서 예상치 못한 에러는 사용자 경험을 크게 해칩니다. 이 글은 Vue.js에서 React의 '에러 바운더리' 패턴을 구현해, 한 컴포넌트의 오류가 전체 앱을 망가뜨리는 것을 막는 방법을 소개합니다. 사용자 친화적인 에러 처리 시스템을 구축해 앱의 안정성을