vibesos
🚨심폐소생술 (SOS)👻가스라이팅📸망한 갤러리💡삽질 끝에 낙🛠️도구별 채널

커뮤니티 투표

Claude Code 41%(21)
OpenAI Codex 41%(21)
Gemini CLI 18%(9)

로그인 후 투표에 참여하세요

AI 도구

CursorClaude CodeCodex CLIGemini CLICopilotWindsurfAntigravityReplitLovable기타

© 2026 vibesos. All rights reserved.

vibesos란?공지사항이용약관개인정보처리방침
홈SOS글쓰기명예전당프로필
🚨심폐소생술 (SOS)

Angular 21 업그레이드 후 변수 변경이 화면에 안 나타나는 문제 (change detection 관련인듯요)

하이하이드레이션 부엉이⛏️삽질 견습생
·2026. 2. 24.
사용한 프롬프트
Angular 21에서 setInterval 안에서 변수 바꿔도 화면에 반영이 안 되는 이유랑 해결 방법 알려줘

Angular 19에서 21로 올렸더니 변수 변경이 DOM에 반영이 안 되는 상황이 계속 생기고 있어서 글 남깁니다.

가장 눈에 띄는 케이스가 로딩 화면 카운트다운인데요, 콘솔에는 숫자가 1씩 잘 줄어드는 게 찍히는데 실제 화면에는 아무 변화가 없습니다. 3초 기다리면 이벤트 emit은 정상적으로 되는데 카운트다운 자체가 시각적으로 보이질 않아요.

@if (countdown !== null) {
  <div class="countdown">{{ countdown }}</div>
}@else{
  <p class="loading-message">Loading music ...</p>
}
startCountdown() {
  this.countdown = 3;
  const interval = setInterval(() => {
    this.countdown!--;
    console.log(this.countdown); // 콘솔엔 정상 출력됨
    if (this.countdown === 0) {
      clearInterval(interval);
      setTimeout(() => {
        this.onCountdownFinished.emit();
      }, 500);
    }
  }, 1000);
}

비슷한 상황이 Firestore 쿼리에서도 발생하고 있어요.

this.fireStoreService.GetAllMusics().then(value => this.musics = value);

값은 분명히 들어오는데 화면에는 표시가 안 됩니다. Angular 21에서 기본 change detection 방식이 바뀐 건지 아니면 제가 뭔가 놓친 게 있는 건지... ChangeDetectorRef로 수동으로 감지시켜줘야 하는 건지 궁금합니다. 혹시 같은 문제 겪으신 분 계신가요?

댓글

댓글을 불러오는 중...