Vanilla js로 반응성 구현하는 패턴

✅ 반응성 (Reactivity): 시스템이 데이터의 변화에 반응하는 방식 리액트와 같은 프레임워크를 사용하면 데이터의 변화에 따라 UI를 업데이트 하는 등의 동작을 관리하는 것이 익숙합니다. 같은 기능을 순수 자바스크립트로 구현한다면 어떻게 이와 유사하게 선언적인 프로그래밍을 할 수 있을까요? 반응형 패턴을 통해 바닐라 자바스크립트로 반응성을 구현하는 방식에 대해 작성한 원문을 번역한 글입니다. ✅ 바닐라 자바스크립트로 반응성을 구현하는 패턴 1️⃣ PubSub 패턴 : publish()로 이벤트 발행 + subscribe()해 이벤트를 구독 ▪️ CustomEvent, window.dispatchEvent 사용가능 2️⃣ Observer 패턴: 특정 주체를 구독 > 주체가 notify메서드를 실행하면, 주체를 구독한 모든 것에게 알림 ▪️ PubSub 패턴과의 차이점: 주체가 옵저버에 대해 알고 있으며 이를 제거할 수 있음 3️⃣ Proxy를 활용한 반응형 객체 프로퍼티 4️⃣ 반응형 시스템: 옵저버블, Signals 등 5️⃣ UI 반응형 렌더링 7️⃣ 그 외 다양한 방법들 https://ktseo41.github.io/blog/log/patterns-for-reactivity-with-modern-vanilla-javascript.html

모던 바닐라 자바스크립트로 본 반응성을 구현하는 패턴 | bohyeon.dev

ktseo41.github.io

모던 바닐라 자바스크립트로 본 반응성을 구현하는 패턴 | bohyeon.dev

다음 내용이 궁금하다면?

또는

이미 회원이신가요?

2023년 9월 16일 오전 10:11

댓글 2

함께 읽은 게시물

주니어 개발자들이 읽으면 좋은 테크 아티클 모음📚

F-Lab 에서 주니어 개발자들이(사실 개발자라면 누구나) 보시면 좋을 아티클 모음을 공유해 주었네요! 검색엔진부터 비동기 처리, NoSQL 등 다양한 분야의 아티클들이 공유되어 있으니 관심있으신 분들은 보시면 좋겠습니다. F-Lab 에서 공유해주신 아티클 주제를 나열해보면 다음과 같습니다. 📌 구글이 직접 말하는 검색엔진의 원리 (tali.kr) 📌 검색 엔진은 어떻게 작동하는가 (xo.dev) 📌 네이버의 검색엔진의 특징과 알고리즘 (tistory.com) 📌 [네이버 블로그]네이버 검색의 원리 : 네이버 블... 더 보기

주니어 개발자들이 읽으면 좋은 테크 아티클 모음

F-Lab : 상위 1% 개발자들의 멘토링

주니어 개발자들이 읽으면 좋은 테크 아티클 모음

 • 

저장 142 • 조회 3,842


한때 천만원에 거래되었던 Manus, Bedrock 무료 오픈소스로 공개

... 더 보기

LinkedIn

lnkd.in

LinkedIn

Oblivious HTTP(Swift 프라이버시 보호 HTTP 프로토콜)

... 더 보기

Oblivious HTTP support in Swift (feat. privacy)

iOYES

Oblivious HTTP support in Swift (feat. privacy)

과정으로부터 배우기

세상에는 복권에 당첨되어 부자가 된 사람들이 있다. 그것도 여러 명 있을 것이다. 그러면 복권을 사는 것이 부자가 되는 올바른 방법일까? 아마 그렇게 생각하는 사람은 별로 없을 것이다. 실패한 사람이 더 많고, 성공한 사람도 순전히 운 덕분이라는 것을 알기 때문이다.

... 더 보기

ChatGPT 버전명 설명

ChatGPT 사용할 때 어떤 모델을 선택해야할지 망설여집니다. 모델명만 봐서는 어떤게 좋은지 모르겠더라고요.

... 더 보기

< 완벽한 계획은 없다, 그런데 왜 계획을 세울까? >

1. 작전계획이란게 왜 필요한 걸까?

... 더 보기

 • 

댓글 1 • 저장 4 • 조회 890