Angular 신호 시작하기

1. 시작하기 전에

Angular 신호는 익숙한 Angular에 세 가지 반응형 프리미티브를 도입하여 개발을 간소화하고 기본적으로 더 빠른 앱을 빌드하는 데 도움이 됩니다.

빌드할 항목

• Angular 신호에 도입된 세 가지 반응형 프리미티브인 signal(), computed(), effect()에 관해 알아봅니다.
• Angular Signals를 사용하여 Angular Cipher 게임을 구동합니다. 암호화는 데이터를 암호화하고 복호화하는 시스템입니다. 이 게임에서 사용자는 단서를 드래그 앤 드롭하여 암호를 해독하고, 메시지를 맞춤설정하고, URL을 공유하여 비밀 메시지를 친구에게 보낼 수 있습니다.

기본 요건

• Angular 및 Typescript에 관한 지식
• 권장: 신호로 반응 다시 생각하기를 보고 Angular Signals 라이브러리 알아보기

2. 코드 가져오기

이 프로젝트에 필요한 모든 것이 Stackblitz에 있습니다. Stackblitz는 이 Codelab을 진행하는 데 권장되는 방법입니다. 또는 코드를 클론하여 원하는 개발 환경에서 엽니다.

Stackblitz를 열고 앱을 실행합니다.

시작하려면 즐겨 사용하는 웹브라우저에서 Stackblitz 링크를 여세요.

1. 새 브라우저 탭을 열고 https://stackblitz.com/edit/io-signals-codelab-starter?file=src%2Fcipher%2Fservice.cipher.ts,src%2Fsecret-message%2Fservice.message.ts&service.massage.ts로 이동합니다.
2. Stackblitz를 포크하여 수정 가능한 자체 작업공간을 만드세요. Stackblitz가 자동으로 앱을 실행하므로 바로 시작할 수 있습니다.

대안: 저장소 클론 및 앱 제공

이 Codelab에서는 VSCode 또는 로컬 IDE를 사용하는 방법이 있습니다.

1. 새 브라우저 탭을 열고 https://github.com/angular/codelabs/tree/signals-get-started로 이동합니다.
2. 저장소를 포크하고 클론하고 cd codelabs/ 명령어를 사용하여 저장소로 이동합니다.
3. git checkout signals-get-started 명령어로 시작 코드 브랜치를 확인합니다.
4. VSCode 또는 선호하는 IDE에서 코드를 엽니다.
5. 서버를 실행하는 데 필요한 종속 항목을 설치하려면 npm install 명령어를 사용합니다.
6. 서버를 실행하려면 ng serve 명령어를 사용합니다.
7. 브라우저 탭을 열고 http://localhost:4200으로 이동합니다.

3. 기준 설정

시작점은 Angular Cipher 게임이지만 아직 작동하지 않습니다. Angular Signals는 게임의 기능을 구동합니다.

시작하려면 빌드하려는 버전의 완성된 버전을 살펴봅니다. Angular Signals Cypher

1. 화면에서 코딩된 메시지를 봅니다.
2. 키패드에서 문자 버튼을 드래그 앤 드롭하여 암호화를 풀고 비밀 메시지를 디코딩합니다.
3. 성공 시 메시지가 업데이트되는 방식을 확인하여 더 많은 보안 비밀 메시지를 디코딩합니다.
4. 맞춤설정을 클릭하여 발신자와 메시지를 변경한 다음 URL 생성 및 복사를 클릭하여 화면의 값과 URL 변경사항을 확인합니다.
5. 보너스: URL을 복사하여 새 탭에 붙여넣거나 친구와 공유하고 URL에 발신자와 메시지가 저장되는 방식을 확인합니다.

4. 첫 번째신호() 정의

신호는 변경될 때 Angular에 알릴 수 있는 값입니다. 일부 신호는 직접 변경할 수 있지만 다른 신호는 다른 신호의 값에서 값을 계산합니다. 함께 신호를 사용하면 앱에서 데이터가 흐르는 방식을 모델링하는 종속 항목의 방향성 그래프가 생성됩니다.

Angular는 신호의 알림을 사용하여 변경 감지해야 하는 구성요소를 파악하거나 개발자가 정의한 효과 함수를 실행할 수 있습니다.

superSecretMessage를 signal()로 변환

superSecretMessage는 플레이어가 디코딩하는 보안 비밀 메시지를 정의하는 MessageService의 값입니다. 현재 값이 앱에 변경사항을 알리지 않으므로 맞춤설정 버튼이 깨집니다. 신호를 사용하여 이 문제를 해결할 수 있습니다.

superSecretMessage를 신호로 만들면 앱이 언제 변경되었는지 아는 데 의존하는 앱 부분에 알릴 수 있습니다. 대화상자에서 메시지를 맞춤설정할 때 앱의 나머지 부분을 새 메시지로 업데이트하도록 신호를 설정합니다.

첫 번째 신호를 정의하려면 각 파일의 TODO(1): Define your first signal() 주석 아래에 있는 다음 단계를 따르세요.

1. service.message.ts 파일에서 Signals 라이브러리를 사용하여 superSecretMessage를 반응형으로 만듭니다.

src/app/secret-message/service.message.ts

superSecretMessage = signal(
  'Angular Signals are in developer preview in v16 today!'
);

@angular/core에서 signal를 가져올지 묻는 메시지가 자동으로 표시됩니다. 페이지를 새로고침하면 이전에 superSecretMessage를 참조했던 오류가 발생할 수 있습니다. superSecretMessage 유형을 string에서 SettableSignal<string>로 변경했기 때문입니다. Signals API를 사용하도록 superSecretMessage의 모든 참조를 변경하여 이 문제를 해결할 수 있습니다. 값을 읽을 때마다 신호 getter superSecretMessage()를 호출합니다. 값을 작성할 때마다 SettableSignal에서 .set API를 사용하여 메시지의 새 값을 설정할 수 있습니다.

2. secret-message.ts 및 service.message.ts 파일에서 superSecretMessage의 모든 참조를 superSecretMessage()로 업데이트합니다.

src/app/secret-message/secret-message.ts

// Before
this.messages.superSecretMessage
this.messages.superSecretMessage = message;

// After
this.messages.superSecretMessage()
this.messages.superSecretMessage.set(message);

src/app/secret-message/service.message.ts

// Before
this.superSecretMessage

// After
this.superSecretMessage()

다른 두 가지 신호 살펴보기

• 앱에 다른 두 개의 신호가 있습니다.

src/app/cipher/service.cipher.ts를 사용하세요.

cipher = signal(this.createNewCipherKey());
decodedCipher = signal<CipherKey[]>([]);

CipherService는 알파벳 한 글자의 키-값 쌍을 새로운 cipher 글자로 무작위로 생성하는 cipher 신호를 정의합니다. 이를 사용하여 메시지를 스크램블 처리하고 플레이어가 키보드에서 일치하는 게임을 찾았는지 판단합니다.

또한 성공적으로 디코딩된 키-값 쌍의 decodedCipher 신호도 있으며 플레이어는 이 정보를 암호화할 때 추가합니다.

Angular의 신호 라이브러리 디자인은 고유하고 강력한 속성을 통해 어디서나 반응성을 도입할 수 있습니다. 앱의 서비스에서 신호를 한 번 정의하고 템플릿, 구성요소, 파이프, 기타 서비스 또는 애플리케이션 코드를 작성할 수 있는 모든 곳에서 신호를 사용할 수 있습니다. 구성요소 범위에 제한되지도 않습니다.

변경사항 확인

• 한 단계만 더 완료하면 앱이 작동합니다. 지금은 앱의 여러 부분에 console.log()를 추가하여 새 superSecretMessage가 어떻게 설정되어 있는지 확인합니다.

5. 첫 번째 compute() 정의

많은 경우 기존 값에서 상태를 도출할 수 있습니다. 종속 값이 변경될 때 파생 상태를 업데이트하는 것이 좋습니다.

computed()를 사용하면 다른 신호에서 값을 가져오는 신호를 선언적으로 표현할 수 있습니다.

solvedMessage를 computed()로 변환

solvedMessage는 decodedCipher 신호를 사용하여 secretMessage 값을 인코딩된 값에서 디코딩된 값으로 변환합니다.

이는 다른 컴퓨팅을 기반으로 계산된 파생을 확인할 수 있기 때문에 매우 유용합니다. 매핑된 반응형 컨텍스트 내의 신호가 변경될 때마다 종속 항목에 알림이 전송됩니다.

현재 secretMessage, decodedCipher 또는 superSecretMessage를 변경해도 solvedMessage는 업데이트되지 않습니다. 따라서 플레이어가 암호화를 해결할 때 화면에 업데이트가 표시되지 않습니다.

solvedMessage를 컴퓨팅으로 만들면 메시지를 업데이트하거나 암호화를 해결할 때 반응형 종속 항목에서 상태 업데이트를 도출할 수 있습니다.

solvedMessage를 computed()로 변환하려면 각 파일의 TODO(2): Define your first computed() 주석 아래에 있는 다음 단계를 따르세요.

1. service.message.ts 파일에서 Signals 라이브러리를 사용하여 solvedMessage를 반응형으로 만듭니다.

src/app/secret-message/service.message.ts

solvedMessage = computed(() =>
  this.translateMessage(
    this.secretMessage(),
    this.cipher.decodedCipher()
  )
);

@angular/core에서 computed를 가져올지 묻는 메시지가 자동으로 표시됩니다. 페이지를 새로고침하면 이전에 solvedMessage를 참조했던 오류가 발생할 수 있습니다. superSecretMessage 유형을 string에서 함수인 Signal<string>로 변경했기 때문입니다. 이 문제는 solvedMessage의 모든 참조를 solvedMessage()로 변경하여 해결할 수 있습니다.

2. secret-message.ts 파일에서 solvedMessage의 모든 참조를 solvedMessage()로 업데이트합니다.

src/app/secret-message/secret-message.ts

// Before
<span *ngFor="let char of this.messages.solvedMessage.split(''); index as i;" [class.unsolved]="this.messages.solvedMessage[i] !== this.messages.superSecretMessage()[i]" >{{ char }}</span>

// After
<span *ngFor="let char of this.messages.solvedMessage().split(''); index as i;" [class.unsolved]="this.messages.solvedMessage()[i] !== this.messages.superSecretMessage()[i]" >{{ char }}</span>

superSecretMessage와 달리 solvedMessage는 SettableSignal가 아니므로 값을 직접 변경할 수 없습니다. 대신 종속 항목 신호 (secretMessage 및 decodedCipher)가 업데이트될 때마다 값이 최신 상태로 유지됩니다.

다른 computed() 함수 2개 살펴보기

• 앱에 다른 두 개의 계산된 값이 있습니다.

src/app/secret-message/service.message.ts

secretMessage = computed(() =>
  this.translateMessage(
    this.superSecretMessage(),
    this.cipher.cipher()
  )
);

src/app/cipher/service.cipher.ts를 사용하세요.

unsolvedAlphabet = computed(() =>
  ALPHABET.filter(
    (letter) => !this.decodedCipher().find((guess) => guess.value === letter)
  )
);

MessageService는 플레이어가 해결하려는 cipher로 인코딩된 superSecretMessage인 계산된 secretMessage을 정의합니다.

CipherService는 decodedCipher의 확인된 암호화 키 목록에서 파생된 unsolvedAlphabet, 계산된 플레이어가 해결하지 않은 모든 문자 목록을 정의합니다.

변경사항 확인

이제 superSecretMessage는 신호이고 solvedMessage는 계산된 것이므로 앱이 작동합니다. 게임의 기능을 테스트합니다.

1. LetterGuessComponent를 CipherComponent의 LetterKeyComponent로 드래그 앤 드롭하여 암호화를 해결하고 보안 비밀 메시지를 디코딩하세요.
2. 더 많은 보안 비밀 메시지를 디코딩하면 SecretMessageComponent가 어떻게 업데이트되는지 확인하세요.
3. 맞춤설정을 클릭하여 발신자와 메시지를 변경한 다음 URL 생성 및 복사를 클릭하여 화면의 값과 URL 변경사항을 확인합니다.
4. 보너스: URL을 복사하여 새 탭에 붙여넣거나 친구와 공유하고 URL에 발신자와 메시지가 저장되는 방식을 확인합니다.

6. 첫 번째 효과 추가

신호에 새 값이 있는 경우 발생하려는 경우가 있습니다. effect()를 사용하면 신호의 변화에 따라 핸들러 함수를 예약하고 실행할 수 있습니다.

암호화가 해결되면 색종이를 추가합니다.

이제 앱이 작동하므로 암호화가 해결되고 보안 비밀 메시지가 디코딩될 때 색종이 조각을 추가하여 재미를 더할 수 있습니다.

색종이 조각을 추가하려면 TODO(3): Add your first effect() 주석에서 다음 단계를 따르세요.

1. cipher.ts 파일에서 메시지를 디코딩할 때 색종이 조각을 추가하는 효과를 예약합니다.

src/app/cipher/cipher.ts를 포함합니다.

import * as confetti from 'canvas-confetti';

ngOnInit(): void {
  ...

  effect(() => {
    if (this.messages.superSecretMessage() === this.messages.solvedMessage()) {
      var confettiCanvas = document.getElementById('confetti-canvas');
      confetti.create()(confettiCanvas, { particleCount: 100 });
    }
  });
}

이 효과가 신호와 계산된 값(this.messages.superSecretMessage() 및 this.messages.solvedMessage())에 따라 어떻게 달라지는지 확인합니다.

효과가 있으면 색종이 조각을 반응형 컨텍스트에서 예약하여 종속 항목이 업데이트될 때 추적하고 재평가할 수 있습니다.

변경사항 확인

• 암호화를 해결해 보세요 (힌트: 메시지를 짧게 변경하여 더 빠르게 테스트할 수 있습니다). 첫 번째 색종이 조각으로 effect()의 축하를 받을 수 있습니다.

7. 축하합니다.

이제 Angular Cipher를 사용하여 보안 비밀 메시지를 디코딩하고 공유할 수 있습니다. Angular팀을 위한 메시지가 있나요? 소셜 미디어를 @Angular로 태그하면 디코딩이 가능합니다. 🎉

이제 Angular 도구 상자에 세 가지 반응형 반응형 프리미티브를 사용하여 개발을 간소화하고 기본적으로 더 빠른 앱을 빌드할 수 있습니다.

자세히 알아보기

다음 Codelab을 확인해 보세요.

• 독립형 구성요소 시작하기
• Angular 및 Firebase를 사용한 웹 애플리케이션 빌드

다음 자료를 읽어보세요.

• Angular.io
• 신호를 활용한 반응 재검토 (Google I/O 2023)
• Angular의 새로운 기능 (Google I/O 2023)