TypeScript 주니어 성능 최적화 기술면접

메모리 누수의 주요 원인은 제거되지 않은 이벤트 리스너, clearInterval/clearTimeout이 호출되지 않은 타이머, 클로저에 의한 불필요한 참조 유지, 전역 변수에 계속 데이터가 쌓이는 경우 등입니다. 진단 방법으로는 Node.js의 --inspect 플래그와 Chrome DevTools의 Memory Profiler를 사용하거나, process.memoryUsage()로 힙 메모리를 모니터링할 수 있습니다. 예방을 위해서는 이벤트 리스너를 등록할 때 반드시 removeEventListener로 제거하고, 타이머 사용 후 clear 함수를 호출하며, WeakMap이나 WeakSet을 사용해 약한 참조를 유지하고, 큰 객체는 사용 후 명시적으로 null을 할당하는 것이 좋습니다. TypeScript에서는 인터페이스로 cleanup 메서드를 강제하거나, Disposable 패턴을 구현하여 리소스 해제를 보장할 수 있습니다.

번들 크기를 줄이기 위해서는 먼저 webpack-bundle-analyzer 같은 도구로 번들 구성을 분석하여 큰 용량을 차지하는 라이브러리를 파악해야 합니다. Code Splitting을 통해 라우트별로 번들을 분리하고 dynamic import를 사용해 필요한 시점에만 코드를 로드합니다. Tree Shaking이 제대로 동작하도록 ES6 모듈 형식을 사용하고, 사용하지 않는 코드를 제거합니다. moment.js 대신 date-fns나 day.js처럼 가벼운 라이브러리로 대체하고, lodash 전체 대신 필요한 함수만 import합니다. tsconfig.json에서 target을 최신 브라우저에 맞게 설정하여 불필요한 polyfill을 줄이고, production 빌드 시 minification과 compression을 적용합니다.

대량 데이터 렌더링 성능 개선을 위해서는 먼저 react-window나 react-virtualized 같은 가상 스크롤 라이브러리를 사용하여 실제로 화면에 보이는 행만 렌더링해야 합니다. React.memo로 불필요한 재렌더링을 방지하고, useMemo와 useCallback으로 계산 비용이 큰 값과 함수를 메모이제이션합니다. 검색이나 필터링 기능은 debounce나 throttle을 적용하여 과도한 상태 업데이트를 방지합니다. 테이블 행 컴포넌트를 작게 분리하고 각 행이 독립적으로 업데이트되도록 구조화합니다. 또한 서버 사이드 페이지네이션을 도입하여 클라이언트에서 한 번에 렌더링하는 데이터 양 자체를 줄이는 것도 효과적입니다.

N+1 문제는 메인 쿼리로 N개의 레코드를 조회한 후, 각 레코드의 연관 데이터를 가져오기 위해 N번의 추가 쿼리가 발생하는 문제입니다. 예를 들어 100명의 사용자를 조회하면서 각 사용자의 프로필 정보를 별도로 가져온다면 총 101번의 쿼리가 실행됩니다. TypeORM에서는 relations 옵션이나 leftJoinAndSelect를 사용하여 Eager Loading을 구현해 한 번의 쿼리로 연관 데이터를 함께 가져올 수 있습니다. QueryBuilder를 사용할 때는 leftJoinAndSelect 메서드로 JOIN을 명시적으로 작성합니다. 또한 find 메서드의 relations 배열에 필요한 관계를 명시하면 자동으로 JOIN 쿼리가 생성됩니다. 성능 개선을 위해서는 필요한 관계만 선택적으로 로드하고, select를 사용해 필요한 컬럼만 조회하는 것이 좋습니다.

API 응답 크기를 줄이기 위해서는 먼저 gzip이나 brotli 같은 압축 알고리즘을 적용하여 전송 데이터를 압축해야 합니다. Express에서는 compression 미들웨어를 사용하면 자동으로 응답을 압축할 수 있습니다. 클라이언트가 필요한 필드만 선택적으로 요청할 수 있도록 GraphQL을 도입하거나, REST API에서도 쿼리 파라미터로 fields를 받아 필요한 속성만 반환하도록 구현합니다. 대량의 데이터는 페이지네이션을 적용하여 한 번에 전송하는 양을 제한하고, 이미지나 파일 URL은 CDN 링크로 제공하여 실제 바이너리 데이터는 응답에 포함하지 않습니다. TypeScript에서는 DTO(Data Transfer Object)를 정의하여 필요한 필드만 포함된 타입을 명시적으로 관리할 수 있습니다.

대량의 비동기 작업을 효율적으로 처리하기 위해서는 동시 실행 개수를 제한하는 Concurrency Control이 필요합니다. p-limit 같은 라이브러리를 사용하거나 직접 구현하여 한 번에 실행되는 Promise 개수를 제한할 수 있습니다. 예를 들어 동시에 최대 10개씩만 처리하도록 설정하면 API Rate Limit을 초과하지 않으면서도 순차 처리보다 빠릅니다. 배열을 일정 크기의 청크로 나누어 각 청크를 순차적으로 처리하되 청크 내에서는 병렬로 처리하는 방식도 효과적입니다. 실패한 요청은 재시도 로직을 구현하되, exponential backoff를 적용하여 일시적인 오류에 대응합니다. TypeScript에서는 제네릭을 활용하여 재사용 가능한 배치 처리 유틸리티 함수를 타입 안전하게 구현할 수 있습니다.

특정 사용자의 최근 활동을 조회하려면 user_id와 created_at 컬럼에 복합 인덱스를 생성해야 하며, 인덱스 컬럼 순서는 WHERE 절에 사용되는 user_id를 먼저, ORDER BY에 사용되는 created_at을 나중에 배치합니다. 복합 인덱스는 (user_id, created_at) 순서로 생성하면 특정 사용자를 빠르게 찾고 그 사용자의 레코드를 시간순으로 정렬할 수 있습니다. TypeORM에서는 @Index 데코레이터로 엔티티에 인덱스를 정의하거나 마이그레이션에서 createIndex를 사용합니다. 쿼리 작성 시 WHERE user_id = ? ORDER BY created_at DESC 형태로 작성해야 인덱스가 효과적으로 사용되며, EXPLAIN 명령어로 실행 계획을 확인하여 인덱스가 실제로 사용되는지 검증해야 합니다. 인덱스 컬럼 순서가 잘못되면 인덱스를 타지 않거나 부분적으로만 사용될 수 있습니다.

이미지 로딩 최적화를 위해서는 먼저 Intersection Observer API를 사용한 Lazy Loading을 구현하여 뷰포트에 보이는 이미지만 로드해야 합니다. img 태그의 loading='lazy' 속성을 사용하면 브라우저 네이티브 Lazy Loading을 활용할 수 있습니다. 이미지 포맷은 WebP나 AVIF 같은 최신 포맷을 사용하되 picture 태그로 fallback을 제공하고, srcset과 sizes 속성으로 반응형 이미지를 구현하여 디바이스에 맞는 크기를 로드합니다. 썸네일은 원본보다 작은 크기로 리사이징된 이미지를 CDN에서 제공하고, 중요한 상단 이미지는 preload 링크 태그로 우선 로드합니다. TypeScript에서는 이미지 URL과 크기 정보를 타입으로 정의하여 올바른 이미지가 로드되도록 보장할 수 있습니다.

Redux에서 불필요한 재렌더링을 방지하려면 먼저 useSelector를 사용할 때 필요한 상태만 선택하고, Reselect 라이브러리의 createSelector로 메모이제이션된 셀렉터를 만들어야 합니다. 상태 구조를 정규화(normalization)하여 중첩된 객체 대신 평탄한 구조로 관리하면 특정 엔티티 업데이트 시 영향 범위를 최소화할 수 있습니다. shallowEqual 같은 커스텀 비교 함수를 useSelector의 두 번째 인자로 전달하여 얕은 비교로 변경을 감지합니다. 큰 리스트는 React.memo로 개별 아이템 컴포넌트를 메모이제이션하고, Redux Toolkit의 createSlice를 사용하면 Immer가 내장되어 불변성을 쉽게 유지할 수 있습니다. TypeScript에서는 RootState 타입을 정의하여 셀렉터의 타입 안정성을 보장하고, 제네릭으로 재사용 가능한 셀렉터를 만들 수 있습니다.

서버 부하 문제를 해결하려면 먼저 New Relic이나 PM2 모니터링으로 CPU, 메모리, 이벤트 루프 지연 시간을 측정하여 병목 지점을 파악해야 합니다. 동기적으로 처리되는 무거운 작업(이미지 처리, 파일 압축 등)이 있다면 Worker Threads나 별도의 작업 큐(Bull, BullMQ)로 분리하여 메인 스레드를 차단하지 않도록 합니다. Nginx나 AWS ALB 같은 로드 밸런서를 도입하여 여러 서버 인스턴스로 트래픽을 분산하고, PM2 클러스터 모드로 CPU 코어 수만큼 프로세스를 실행하여 수평 확장합니다. 데이터베이스 커넥션 풀 크기를 적절히 설정하고, 자주 조회되는 데이터는 Redis 같은 인메모리 캐시에 저장합니다. TypeScript에서는 타입을 활용하여 큐 작업 페이로드와 결과를 안전하게 정의하고, 헬스 체크 엔드포인트를 구현하여 로드 밸런서가 서버 상태를 모니터링할 수 있게 합니다.