2026년 Angular 접미사 이름 바꾸기: ‘Legacy’ 프로젝트를 위한 실용 가이드

Source: Dev.to

I know, I know. We’re already on Angular v21. If you’re starting a greenfield project today, you’re probably already using the latest style‑guide conventions without a second thought. But plenty of us are maintaining codebases that are at least a year old—ancient history in Angular Renaissance time.

If you’re working on one of these “legacy” projects (anything created before breakfast yesterday), you may have noticed the Angular style guide’s suggestion to drop the .component, .service, and .directive suffixes. With 500+ components, a manual rename feels impossible.

---

네임스페이스 충돌 문제

접미사를 제거하면 동일한 식별자를 내보내는 파일이 여러 개 생길 수 있습니다:

user.component.ts   // class UserComponent
user.service.ts      // class UserService
user.interface.ts    // interface User

접미사를 순진하게 제거한 뒤:

user.ts   // class User
user.ts   // class User
user.ts   // interface User

User 심볼을 내보내는 user.ts 파일이 세 개가 되면 컴파일러는 오류를 내고, 린터는 멈추며, 당신은 git reset --hard를 외치게 됩니다.

접근 방식 1 – Git Diff를 이용한 수동 대량 이름 변경

1. Rename Angular Component 확장 프로그램에서 “Rename all Angular file types” 명령을 실행합니다.
2. Git이 즉시 충돌을 표시합니다(예: profile.component, profile.service, user.component).
3. 아직 커밋하지 마세요; 변경 사항을 스테이징하거나 작업 트리에 두어 diff를 확인할 수 있도록 합니다.
4. 문제를 일으킨 파일을 되돌리고, 제외 목록에 추가한 뒤 이름 변경을 다시 실행합니다.
5. 남은 충돌에 대해서는 의미론적인 결정을 내립니다(예: UserService를 UserDataAccess 또는 UserAuth로 이름 변경).
6. 확장 프로그램이 모든 참조, import, 템플릿 셀렉터를 1초 이내에 업데이트합니다.

이 방법은 문제가 되는 파일 몇 개에 대해 빠르게 처리할 수 있으며, 전체 제어권을 유지합니다.

접근법 2 – AI 에이전트가 충돌 해결하기

프로젝트가 크면, 각 이름 변경을 수동으로 결정하는 것이 번거로울 수 있습니다. 확장 프로그램에는 내장된 AI‑agent 프롬프트가 포함되어 있습니다:

1. “Rename all Angular file types” 명령을 실행하고, 충돌이 발생하면 빌드가 중단되도록 합니다.

2. AI 어시스턴트(Cursor, Windsurf 등)를 다음 프롬프트와 함께 호출합니다 (확장 프로그램 문서에 제공됨):

   I just broke my build by renaming everything to User. Please look at the usage.
   If a service has HTTP calls, rename it UserDataAccess.
   If it has Signals, rename it UserState.
   Fix the imports.

3. 에이전트가 제안하는 변경 사항을 검토합니다. Angular RealWorld Example App에서 테스트한 결과, AI는 HTTP 클라이언트 사용을 기반으로 UserService를 UserDataAccess로 정확히 이름을 바꾸고, 충돌을 해결했으며, 내보낼 수 있는 요약을 생성했습니다.

4. 결과 변경을 PR로 제출합니다 (저는 RealWorld 레포지토리에서 이렇게 했습니다).

AI는 hard naming decisions를 처리하고, 확장 프로그램은 import, selector, template 업데이트와 같은 grunt work를 담당합니다.

전용 확장 프로그램을 사용하는 이유?

• 결정론적 AST 기반 리팩터링 – 일반적인 LLM 문자열 교체와 달리 추측이 필요 없습니다.
• 속도 – 498개의 파일을 즉시 이름을 바꾸며, AI는 몇몇 모호한 경우에만 개입합니다.
• 안전성 – Git diff가 변경된 내용을 명확히 추적할 수 있는 감사 로그를 제공합니다.
• 포괄성 – 이 확장 프로그램은 “파일당 하나의 개념” 규칙을 따르는 개별 Angular 엔티티(컴포넌트, 서비스, 디렉티브, 모듈, 가드, 파이프, 인터페이스, 열거형, 클래스, 함수, 변수)도 이름을 바꿉니다.

시작하기

• VS Code 마켓플레이스에서 Rename Angular Component를 설치하세요 (Cursor 또는 Antigravity를 사용하는 경우 Open VSIX Registry에서도 가능합니다).
• 탐색기 패널에서 파일을 마우스 오른쪽 버튼으로 클릭하고 Rename Angular Component를 선택하여 단일 엔티티의 이름을 바꾸거나, 대량 작업을 위해 Rename all Angular file types 명령을 사용하세요.

행복한 이름 바꾸기!