feat(code-quality): 코드 품질 예시에 Angular 버전 추가

[rrkkee015]

📝 Key Changes

Frontend Fundamentals의 code-quality 챕터는 현재 React 코드 예시만 제공하고 있어, React 외 프레임워크 사용자는 원칙은 이해해도 자기 코드에 어떻게 적용할지 바로 와닿지 않는 경우가 있습니다.

이 PR은 동일한 원칙을 Angular 예시와 함께 보여주도록 인프라와 문서를 확장해보았습니다.

독자가 페이지 우측 상단의 토글로 React / Angular 예시를 자유롭게 전환할 수 있습니다.

🧐 마이그레이션을 하면서 했던 고민들

0. 마이그레이션을 해야했는가 ?

React와 Angular는 단순히 "문법이 다름을 넘어" 함수형 / OOP, 불변성 / DI, 단방향 / 양방향, 함수 / 클래스 등 사고방식 자체가 다릅니다.

그럼에도 해당 작업을 한 이유는

• 원칙은 패러다임을 초월합니다.
  • 이 시리즈가 다루는 건 React가 아니라 응집도 / 결합도 / 가독성 / 예측가능성입니다. 따라서 소프트웨어 설계 원칙은 어디든 적용되기에 해당 작업이 무가치한 게 아니라 느꼈습니다.
  • 프레임워크는 다르지만 원칙은 같다는 것을 보여주는 것 자체가 가치라 느꼈습니다.
• 각 도구의 사용자 모두에게 자기 도구를 더 깊게 이해할 기회가 됩니다. 서로의 도구가 왜 다르게 푸는지 자기 패러다임의 과정을 다시보게 되고, 이는 해당 작업을 하면서도 느낀 바입니다.

허나 이 PR을 리뷰하는 개발자가 본문이 거의 동일하고 어휘만 바뀐 문서 라고 느끼는 커밋이 있다면, 굳이 분기하지 않는 것도 고려해보았습니다.

일단 모든 문서를 일관되게 분기했지만, 이 부분은 메인테이너분들의 의견을 듣고싶습니다.

1. 원칙은 동일하게, 표현은 자연스럽게

가장 중요하게 지킨 원칙입니다.

같은 메시지를 React와 Angular 양쪽에서 개념이 어긋나지 않게 전달하되, 각 프레임워크의 관용 표현은 살리려고 했습니다.

예를 들어 응집도 / 결합도 같은 개념은 프레임워크 무관한 설계 원칙이라 본문 텍스트는 거의 그대로 뒀으며 어휘만 바꿨습니다. 반대로 코드 예시는 Angular 관용에 맞게 새로 짜보았습니다.

2. React와 Angular의 미러링

React와 Angular 추구하는 바가 다른 프레임워크이다보니 제공해주는 예시가 관용적이지 못한 경우도 있었습니다.

그 예로 Props Drilling의 예시 문제의 두 가지 해결 방법을 Angular의 강력한 의존성 주입(DI)로 한 번에 설명 할 수 있었습니다.

허나, 해결 방법 그대로를 미러링하는 것이 독자에게 학습 효과가 좋다고 판단하여 마이그레이션을 진행했습니다.

3. async / await vs Observable

React 코드에서 흔히 사용하는 async / await 패턴을 그대로 사용하지 않았습니다.

Angular에서 관용적으로 사용하는 Observable을 이용하였으며, 이에 필요한 로적은 rxjs/operators를 사용하여 async / await 코드를 마이그레이션 했습니다.

4. Angular 최신 문법 지향

Angular 최신 문법을 지향하여 signal 패턴을 적극 활용하였으며, 기존 컴포넌트 상태 코드를 마이그레이션 했습니다.

5. 읽기 쉽게 간결화

Angular 공식 컨벤션대로 여러가지 prefix / postfix를 붙여야했지만, 시각적으로 무거워지며, 학습용 예시 코드라는 점에서 간결함을 우선으로 하여 생략을 했습니다.

🖼️ Before and After Comparison

Before	After

[vercel]

@dawn-o3o is attempting to deploy a commit to the Toss Team on Vercel.

A member of the Team first needs to authorize it.