Vanilla Javascript로 상태관리 시스템 만들기

황준일님의 Vanilla Javascript로 상태관리 시스템 만들기 아티클을 참고하여, Observer Pattern 또는 Pub-Sub Pattern 이해하고 이를 DOM에 어떻게 녹여내는지에 대해 학습하자.

• 구현하면서 느낀 점들을 작성하며 회고하자.
• 바닐라 자바스크립트 상태 관리와 React, Vue 같은 프레임워크의 상태 관리 방식 비교해보자.
• 모르는 것들이나 새롭게 알게 된 것들이 있다면 적극적으로 공유하며 서로의 학습을 확장해 보자.

황준일님 상태관리 시스템 만들기 링크

🚀 학습 목표

1. 상태관리에 대해 한번 더 복습하자.
2. Observer Pattern 또는 Pub-Sub Pattern을 이해하고 어떻게 적용하는지 고민해보자.
3. Flux Pattern을 왜 사용하는지, 무엇이 좋은지 알아보자.
4. Redux를 참고하면 이 라이브러리는 어떤 식으로 상태관리 했는지 알아보자.
5. 기한을 정해 빠르게 학습하고, 이해하는 것도 중요한 분석 능력이다. 제한된 시간 안에서 핵심을 파악하자

📝 Pull Request 주의할 점.

• 학습과 고민의 흔적 기록
  • 본인이 배우고 고민했던 점들을 최대한 꼼꼼하게 작성해주세요.
  • 작성된 내용은 리뷰어가 의도를 이해하고 더 나은 피드백을 제공하는 데 큰 도움이 됩니다.
• 코드리뷰는 존중과 솔직함을 기반으로
  • 서로 상처받지 않도록 배려하며 리뷰를 작성해주세요.
  • 하지만, 서로의 발전을 위해 솔직한 피드백을 주고받는 문화를 지향합시다.
• PR 방식
  • [본인 이름] State Management (본인 이름 브랜치에 PR 올려주세요)
  • 위와 같은 방식으로 PR 올려주세요.

🤖 GPT의 아티클 요약

1. 상태 관리의 필요성

• 복잡한 애플리케이션에서는 상태를 효율적으로 관리하는 것이 중요합니다.
• Observer 패턴과 JavaScript의 기본 기능을 활용해 상태 변화를 감지하고 UI를 업데이트합니다.

---

2. Observer 패턴을 활용한 상태 관리

구성 요소

1. State
   • 모든 애플리케이션 상태를 중앙 집중식으로 관리.
   • 상태의 get/set을 정의해 변경 사항을 추적.
2. Observers
   • 상태를 구독하는 함수들.
   • 상태 변경 시 실행되어 UI 업데이트를 처리.

---

3. 컴포넌트와 DOM 연동

• 상태를 기반으로 DOM을 업데이트하는 컴포넌트를 정의.
• 컴포넌트는 상태를 구독(Observer)하고, 상태 변경 시 다시 렌더링됨.

---

4. Flux 패턴과 상태 변경 관리

• Flux 패턴:
  • 상태는 **액션(dispatch)**을 통해서만 변경됨.
  • 상태의 변경 과정을 예측 가능하고 디버깅하기 쉽게 만듦.

Reducer와 Dispatch

• 상태 변경 로직을 Reducer 함수로 분리.
• Dispatch 함수로 액션을 받아 상태를 업데이트하고 알림.

---

5. Proxy를 활용한 최적화

• Proxy 객체를 사용하여 상태 감지를 간단하고 효율적으로 최적화.
• Proxy는 기존 방식보다 더 유연하고 강력함.

---

6. 결론

• JavaScript의 기본 기능으로 상태 관리 시스템을 구현하는 방법을 학습했습니다.
• 라이브러리를 사용하지 않고 상태 관리의 원리를 이해할 수 있는 기회를 제공합니다.
• 최종 코드는 GitHub 저장소에서 확인할 수 있습니다.

---

활용 방법

• 상태 관리의 기본 개념과 구현 방법을 이해하고자 하는 초급-중급 JavaScript 개발자에게 적합.
• Vuex나 Redux 같은 상태 관리 라이브러리의 내부 작동 방식을 학습하기 위한 입문 자료.