Web Component 구현하기.

황준일님의 Web Component 아티클을 참고하여, 바닐라 자바스크립트를 활용한 상태 관리 구현 방식을 공부하고 분석해보자. 이를 통해 상태 관리의 원리를 이해하고, 실제로 어떻게 적용할 수 있는지 구체적으로 탐구해보자.

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

황준일님 Web Component 링크

🚀 학습 목표

1. 컴포넌트 기반의 탄생에 대해 이해하자.
2. 상태 관리가 "왜 필요한지" 명확히 이해하자.
3. 코드의 확장성과 재사용성을 위해 추상화 수준을 높이는 레벨을 익히자.
4. 기한을 정해 빠르게 학습하고, 이해하는 것도 중요한 분석 능력이다. 제한된 시간 안에서 핵심을 파악하자

📝 Pull Request 주의할 점.

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

🤖 GPT의 아티클 요약

1. 컴포넌트와 상태관리:

   • 상태관리의 탄생: 과거 jQuery 중심의 개발에서 클라이언트 사이드 렌더링(CSR)으로의 전환과 함께 상태 관리의 중요성이 부각되었습니다.
   • 컴포넌트: Angular, React, Vue 등의 프레임워크를 통해 컴포넌트 기반 개발이 대두되었으며, 각 컴포넌트는 자체적인 상태를 관리합니다.

2. state - setState - render:

   • 기능 구현: setState 메서드를 통해 상태를 변경하고, 변경된 상태를 기반으로 render 함수를 호출하여 DOM을 업데이트하는 방식을 구현합니다.
   • 추상화: 이러한 패턴을 클래스 형태로 추상화하여 재사용성을 높입니다.
   • 모듈화: 컴포넌트를 모듈화하여 유지보수성과 확장성을 향상시킵니다.

3. 이벤트 처리:

   • 불편함을 감지하기: 이벤트 처리 시 발생하는 불편함을 식별하고 개선 방안을 모색합니다.
   • 이벤트 버블링: 이벤트 버블링을 활용하여 효율적인 이벤트 처리를 구현합니다.
   • 이벤트 버블링 추상화: 이벤트 버블링을 추상화하여 코드의 간결성과 가독성을 높입니다.

4. 컴포넌트 분할하기:

   • 기능 추가: 기능을 추가하면서 컴포넌트를 분할하여 각 컴포넌트의 역할을 명확히 합니다.
   • 폴더 구조: 컴포넌트 분할에 따른 폴더 구조를 설계하여 코드의 조직화를 도모합니다.
   • Component Core 변경: 컴포넌트의 핵심 로직을 수정하여 변경 사항을 반영합니다.
   • Entry Point 변경: 엔트리 포인트를 수정하여 새로운 컴포넌트 구조를 적용합니다.
   • 컴포넌트 분할: 컴포넌트를 세분화하여 각자의 책임을 분리하고, 재사용성을 높입니다.

이러한 과정을 통해 바닐라 자바스크립트로도 현대적인 웹 컴포넌트를 설계하고 구현할 수 있음을 보여줍니다. 또한, 상태 관리와 이벤트 처리, 컴포넌트 분할 등의 개념을 직접 구현하며 깊이 있는 이해를 도모합니다.