VSCode TypeScript 자동완성 지연 현상 해결

프로젝트를 진행하던 중 VSCode의 자동완성 추천이 평소보다 현저히 느리게 뜨는 현상을 겪었다. 개발 생산성에 직접적인 악영향을 주고 있어 원인 파악과 개선이 시급했다.

문제 현상과 목표

.tsx 파일에서 컴포넌트나 타입을 입력할 때 발생하는 주요 증상은 다음과 같았다.

• 타입, 함수, 컴포넌트 등의 자동완성 표시가 심하게 지연된다.
• import 구문 자동 추가 및 경로 추천 반응이 느리다.
• 파일 이동이나 저장 후 TypeScript 서버가 눈에 띄게 버벅거린다.

자동완성 추천 속도를 정상화하기 위해 TypeScript Server, VSCode 확장 프로그램, ESLint, 혹은 프로젝트 설정 중 어디서 병목이 발생하는지 정확한 원인을 파악하기 시작했다.

원인 파악 및 해결 과정

TS 서버를 재시작해 보거나 확장 프로그램을 하나씩 꺼보는 등 여러 각도로 테스트를 진행했다. 그 결과, 원인은 의외로 프로젝트 설정 파일 내에 있었다.

VSCode의 code-snippets 설정에 포함된 정규식 치환 스니펫이 문제였다. ${TM_FILENAME_BASE/\\.page$//}와 같이 파일명을 조작하는 복잡한 정규식 연산이 자동완성 목록을 평가하고 렌더링하는 과정마다 개입하면서 심각한 성능 저하를 유발하고 있었다.

문제를 해결하기 위해 해당 스니펫에서 정규식 치환 로직을 제거하고, 단순 변수 치환 방식으로 설정을 변경했다.

결과 및 마무리

스니펫 설정을 수정한 직후, 자동완성 반응 속도가 체감상 즉각적으로 개선된 것을 확인했다.

편의를 위해 무심코 추가했던 스니펫의 정규식 연산 하나가 에디터 전체의 퍼포먼스를 크게 떨어뜨릴 수 있다는 점을 배웠다. 앞으로 에디터 설정이나 스니펫을 추가할 때는 렌더링이나 평가 과정에 오버헤드를 주지 않는지 한 번 더 고민해 보아야겠다.