diff --git a/examples/nextjs-scheduler/package.json b/examples/nextjs-scheduler/package.json
index 3da67d6dc..2384abe03 100644
--- a/examples/nextjs-scheduler/package.json
+++ b/examples/nextjs-scheduler/package.json
@@ -13,7 +13,7 @@
     "react": "18.2.0",
     "react-calendar": "^4.6.0",
     "react-dom": "18.2.0",
-    "yorkie-js-sdk": "^0.4.19"
+    "yorkie-js-sdk": "^0.4.20"
   },
   "devDependencies": {
     "@types/node": "20.4.2",
diff --git a/examples/profile-stack/package.json b/examples/profile-stack/package.json
index 273797c70..48cb6ea0e 100644
--- a/examples/profile-stack/package.json
+++ b/examples/profile-stack/package.json
@@ -12,6 +12,6 @@
     "vite": "^3.2.7"
   },
   "dependencies": {
-    "yorkie-js-sdk": "^0.4.19"
+    "yorkie-js-sdk": "^0.4.20"
   }
 }
diff --git a/examples/react-tldraw/package.json b/examples/react-tldraw/package.json
index bc46d61c4..adffbf7d1 100644
--- a/examples/react-tldraw/package.json
+++ b/examples/react-tldraw/package.json
@@ -16,7 +16,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "unique-names-generator": "^4.7.1",
-    "yorkie-js-sdk": "^0.4.19"
+    "yorkie-js-sdk": "^0.4.20"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.198",
diff --git a/examples/react-todomvc/package.json b/examples/react-todomvc/package.json
index 32a8ff519..f5cbd11e4 100644
--- a/examples/react-todomvc/package.json
+++ b/examples/react-todomvc/package.json
@@ -13,7 +13,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "todomvc-app-css": "^2.4.2",
-    "yorkie-js-sdk": "^0.4.19"
+    "yorkie-js-sdk": "^0.4.20"
   },
   "devDependencies": {
     "@types/react": "^18.0.24",
diff --git a/examples/simultaneous-cursors/package.json b/examples/simultaneous-cursors/package.json
index a5c580377..b27a429a6 100644
--- a/examples/simultaneous-cursors/package.json
+++ b/examples/simultaneous-cursors/package.json
@@ -11,7 +11,7 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "yorkie-js-sdk": "^0.4.19"
+    "yorkie-js-sdk": "^0.4.20"
   },
   "devDependencies": {
     "@types/react": "^18.0.37",
diff --git a/examples/vanilla-codemirror6/package.json b/examples/vanilla-codemirror6/package.json
index 0f6c48518..e5bc8bfa3 100644
--- a/examples/vanilla-codemirror6/package.json
+++ b/examples/vanilla-codemirror6/package.json
@@ -20,6 +20,6 @@
     "@codemirror/state": "^6.1.2",
     "@codemirror/view": "^6.3.1",
     "codemirror": "^6.0.1",
-    "yorkie-js-sdk": "^0.4.19"
+    "yorkie-js-sdk": "^0.4.20"
   }
 }
diff --git a/examples/vanilla-codemirror6/src/main.ts b/examples/vanilla-codemirror6/src/main.ts
index 60454eeec..131909325 100644
--- a/examples/vanilla-codemirror6/src/main.ts
+++ b/examples/vanilla-codemirror6/src/main.ts
@@ -1,5 +1,6 @@
 /* eslint-disable jsdoc/require-jsdoc */
-import yorkie, { DocEventType, OperationInfo } from 'yorkie-js-sdk';
+import yorkie, { DocEventType } from 'yorkie-js-sdk';
+import type { TextOperationInfo, EditOpInfo } from 'yorkie-js-sdk';
 import { basicSetup, EditorView } from 'codemirror';
 import { keymap } from '@codemirror/view';
 import {
@@ -112,14 +113,14 @@ async function main() {
   });
 
   // 03-3. define event handler that apply remote changes to local
-  function handleOperations(operations: Array<OperationInfo>) {
-    operations.forEach((op) => {
+  function handleOperations(operations: Array<TextOperationInfo>) {
+    for (const op of operations) {
       if (op.type === 'edit') {
         handleEditOp(op);
       }
-    });
+    }
   }
-  function handleEditOp(op: any) {
+  function handleEditOp(op: EditOpInfo) {
     const changes = [
       {
         from: Math.max(0, op.from),
diff --git a/examples/vanilla-quill/package.json b/examples/vanilla-quill/package.json
index 008f5ed9f..7a2190b3d 100644
--- a/examples/vanilla-quill/package.json
+++ b/examples/vanilla-quill/package.json
@@ -19,6 +19,6 @@
     "quill": "^1.3.7",
     "quill-cursors": "^4.0.0",
     "quill-delta": "^5.0.0",
-    "yorkie-js-sdk": "^0.4.19"
+    "yorkie-js-sdk": "^0.4.20"
   }
 }
diff --git a/examples/vuejs-kanban/package.json b/examples/vuejs-kanban/package.json
index 90923b370..958642aba 100644
--- a/examples/vuejs-kanban/package.json
+++ b/examples/vuejs-kanban/package.json
@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "vue": "^3.2.41",
-    "yorkie-js-sdk": "^0.4.19"
+    "yorkie-js-sdk": "^0.4.20"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.1.2",
diff --git a/package-lock.json b/package-lock.json
index 82447f3a4..c284c1d14 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "yorkie-js-sdk",
-  "version": "0.4.19",
+  "version": "0.4.20",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "yorkie-js-sdk",
-      "version": "0.4.19",
+      "version": "0.4.20",
       "license": "Apache-2.0",
       "workspaces": [
         "examples/*"
@@ -58,7 +58,7 @@
         "react": "18.2.0",
         "react-calendar": "^4.6.0",
         "react-dom": "18.2.0",
-        "yorkie-js-sdk": "^0.4.19"
+        "yorkie-js-sdk": "^0.4.20"
       },
       "devDependencies": {
         "@types/node": "20.4.2",
@@ -97,25 +97,10 @@
         "node": ">=4.2.0"
       }
     },
-    "examples/nextjs-scheduler/node_modules/yorkie-js-sdk": {
-      "version": "0.4.19",
-      "resolved": "https://registry.npmjs.org/yorkie-js-sdk/-/yorkie-js-sdk-0.4.19.tgz",
-      "integrity": "sha512-jYyWTlnyiyacrlQHJ8BEx3IXb+T5V+3FrppfT/faSs9b2bHVP9wSvI9Pbt384T2YkflgYMpshdV88IESxxtmpg==",
-      "dependencies": {
-        "@bufbuild/protobuf": "^1.6.0",
-        "@connectrpc/connect": "^1.2.0",
-        "@connectrpc/connect-web": "^1.2.0",
-        "long": "^5.2.0"
-      },
-      "engines": {
-        "node": ">=18.0.0",
-        "npm": ">=7.1.0"
-      }
-    },
     "examples/profile-stack": {
       "version": "0.0.0",
       "dependencies": {
-        "yorkie-js-sdk": "^0.4.19"
+        "yorkie-js-sdk": "^0.4.20"
       },
       "devDependencies": {
         "vite": "^3.2.7"
@@ -170,21 +155,6 @@
         }
       }
     },
-    "examples/profile-stack/node_modules/yorkie-js-sdk": {
-      "version": "0.4.19",
-      "resolved": "https://registry.npmjs.org/yorkie-js-sdk/-/yorkie-js-sdk-0.4.19.tgz",
-      "integrity": "sha512-jYyWTlnyiyacrlQHJ8BEx3IXb+T5V+3FrppfT/faSs9b2bHVP9wSvI9Pbt384T2YkflgYMpshdV88IESxxtmpg==",
-      "dependencies": {
-        "@bufbuild/protobuf": "^1.6.0",
-        "@connectrpc/connect": "^1.2.0",
-        "@connectrpc/connect-web": "^1.2.0",
-        "long": "^5.2.0"
-      },
-      "engines": {
-        "node": ">=18.0.0",
-        "npm": ">=7.1.0"
-      }
-    },
     "examples/react-tldraw": {
       "version": "0.1.0",
       "dependencies": {
@@ -195,7 +165,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "unique-names-generator": "^4.7.1",
-        "yorkie-js-sdk": "^0.4.19"
+        "yorkie-js-sdk": "^0.4.20"
       },
       "devDependencies": {
         "@types/lodash": "^4.14.198",
@@ -256,21 +226,6 @@
         }
       }
     },
-    "examples/react-tldraw/node_modules/yorkie-js-sdk": {
-      "version": "0.4.19",
-      "resolved": "https://registry.npmjs.org/yorkie-js-sdk/-/yorkie-js-sdk-0.4.19.tgz",
-      "integrity": "sha512-jYyWTlnyiyacrlQHJ8BEx3IXb+T5V+3FrppfT/faSs9b2bHVP9wSvI9Pbt384T2YkflgYMpshdV88IESxxtmpg==",
-      "dependencies": {
-        "@bufbuild/protobuf": "^1.6.0",
-        "@connectrpc/connect": "^1.2.0",
-        "@connectrpc/connect-web": "^1.2.0",
-        "long": "^5.2.0"
-      },
-      "engines": {
-        "node": ">=18.0.0",
-        "npm": ">=7.1.0"
-      }
-    },
     "examples/react-todomvc": {
       "version": "0.0.0",
       "dependencies": {
@@ -278,7 +233,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "todomvc-app-css": "^2.4.2",
-        "yorkie-js-sdk": "^0.4.19"
+        "yorkie-js-sdk": "^0.4.20"
       },
       "devDependencies": {
         "@types/react": "^18.0.24",
@@ -337,21 +292,6 @@
         }
       }
     },
-    "examples/react-todomvc/node_modules/yorkie-js-sdk": {
-      "version": "0.4.19",
-      "resolved": "https://registry.npmjs.org/yorkie-js-sdk/-/yorkie-js-sdk-0.4.19.tgz",
-      "integrity": "sha512-jYyWTlnyiyacrlQHJ8BEx3IXb+T5V+3FrppfT/faSs9b2bHVP9wSvI9Pbt384T2YkflgYMpshdV88IESxxtmpg==",
-      "dependencies": {
-        "@bufbuild/protobuf": "^1.6.0",
-        "@connectrpc/connect": "^1.2.0",
-        "@connectrpc/connect-web": "^1.2.0",
-        "long": "^5.2.0"
-      },
-      "engines": {
-        "node": ">=18.0.0",
-        "npm": ">=7.1.0"
-      }
-    },
     "examples/simple-tldraw": {
       "extraneous": true,
       "dependencies": {
@@ -363,7 +303,7 @@
       "dependencies": {
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "yorkie-js-sdk": "^0.4.19"
+        "yorkie-js-sdk": "^0.4.20"
       },
       "devDependencies": {
         "@types/react": "^18.0.37",
@@ -389,21 +329,6 @@
         "vite": "^4.2.0"
       }
     },
-    "examples/simultaneous-cursors/node_modules/yorkie-js-sdk": {
-      "version": "0.4.19",
-      "resolved": "https://registry.npmjs.org/yorkie-js-sdk/-/yorkie-js-sdk-0.4.19.tgz",
-      "integrity": "sha512-jYyWTlnyiyacrlQHJ8BEx3IXb+T5V+3FrppfT/faSs9b2bHVP9wSvI9Pbt384T2YkflgYMpshdV88IESxxtmpg==",
-      "dependencies": {
-        "@bufbuild/protobuf": "^1.6.0",
-        "@connectrpc/connect": "^1.2.0",
-        "@connectrpc/connect-web": "^1.2.0",
-        "long": "^5.2.0"
-      },
-      "engines": {
-        "node": ">=18.0.0",
-        "npm": ">=7.1.0"
-      }
-    },
     "examples/vanilla-codemirror6": {
       "version": "0.0.0",
       "dependencies": {
@@ -414,7 +339,7 @@
         "@codemirror/state": "^6.1.2",
         "@codemirror/view": "^6.3.1",
         "codemirror": "^6.0.1",
-        "yorkie-js-sdk": "^0.4.19"
+        "yorkie-js-sdk": "^0.4.20"
       },
       "devDependencies": {
         "typescript": "^4.6.4",
@@ -470,21 +395,6 @@
         }
       }
     },
-    "examples/vanilla-codemirror6/node_modules/yorkie-js-sdk": {
-      "version": "0.4.19",
-      "resolved": "https://registry.npmjs.org/yorkie-js-sdk/-/yorkie-js-sdk-0.4.19.tgz",
-      "integrity": "sha512-jYyWTlnyiyacrlQHJ8BEx3IXb+T5V+3FrppfT/faSs9b2bHVP9wSvI9Pbt384T2YkflgYMpshdV88IESxxtmpg==",
-      "dependencies": {
-        "@bufbuild/protobuf": "^1.6.0",
-        "@connectrpc/connect": "^1.2.0",
-        "@connectrpc/connect-web": "^1.2.0",
-        "long": "^5.2.0"
-      },
-      "engines": {
-        "node": ">=18.0.0",
-        "npm": ">=7.1.0"
-      }
-    },
     "examples/vanilla-quill": {
       "version": "0.0.0",
       "dependencies": {
@@ -492,7 +402,7 @@
         "quill": "^1.3.7",
         "quill-cursors": "^4.0.0",
         "quill-delta": "^5.0.0",
-        "yorkie-js-sdk": "^0.4.19"
+        "yorkie-js-sdk": "^0.4.20"
       },
       "devDependencies": {
         "@types/color-hash": "^1.0.2",
@@ -562,26 +472,11 @@
         }
       }
     },
-    "examples/vanilla-quill/node_modules/yorkie-js-sdk": {
-      "version": "0.4.19",
-      "resolved": "https://registry.npmjs.org/yorkie-js-sdk/-/yorkie-js-sdk-0.4.19.tgz",
-      "integrity": "sha512-jYyWTlnyiyacrlQHJ8BEx3IXb+T5V+3FrppfT/faSs9b2bHVP9wSvI9Pbt384T2YkflgYMpshdV88IESxxtmpg==",
-      "dependencies": {
-        "@bufbuild/protobuf": "^1.6.0",
-        "@connectrpc/connect": "^1.2.0",
-        "@connectrpc/connect-web": "^1.2.0",
-        "long": "^5.2.0"
-      },
-      "engines": {
-        "node": ">=18.0.0",
-        "npm": ">=7.1.0"
-      }
-    },
     "examples/vuejs-kanban": {
       "version": "0.0.0",
       "dependencies": {
         "vue": "^3.2.41",
-        "yorkie-js-sdk": "^0.4.19"
+        "yorkie-js-sdk": "^0.4.20"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^3.1.2",
@@ -637,21 +532,6 @@
         }
       }
     },
-    "examples/vuejs-kanban/node_modules/yorkie-js-sdk": {
-      "version": "0.4.19",
-      "resolved": "https://registry.npmjs.org/yorkie-js-sdk/-/yorkie-js-sdk-0.4.19.tgz",
-      "integrity": "sha512-jYyWTlnyiyacrlQHJ8BEx3IXb+T5V+3FrppfT/faSs9b2bHVP9wSvI9Pbt384T2YkflgYMpshdV88IESxxtmpg==",
-      "dependencies": {
-        "@bufbuild/protobuf": "^1.6.0",
-        "@connectrpc/connect": "^1.2.0",
-        "@connectrpc/connect-web": "^1.2.0",
-        "long": "^5.2.0"
-      },
-      "engines": {
-        "node": ">=18.0.0",
-        "npm": ">=7.1.0"
-      }
-    },
     "node_modules/@ampproject/remapping": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
@@ -1064,10 +944,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/runtime/node_modules/regenerator-runtime": {
-      "version": "0.13.11",
-      "license": "MIT"
-    },
     "node_modules/@babel/template": {
       "version": "7.22.15",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz",
@@ -2060,22 +1936,6 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
-    "node_modules/@eslint/eslintrc/node_modules/argparse": {
-      "version": "2.0.1",
-      "dev": true,
-      "license": "Python-2.0"
-    },
-    "node_modules/@eslint/eslintrc/node_modules/js-yaml": {
-      "version": "4.1.0",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "argparse": "^2.0.1"
-      },
-      "bin": {
-        "js-yaml": "bin/js-yaml.js"
-      }
-    },
     "node_modules/@floating-ui/core": {
       "version": "0.7.3",
       "license": "MIT"
@@ -6060,11 +5920,6 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
-    "node_modules/eslint/node_modules/argparse": {
-      "version": "2.0.1",
-      "dev": true,
-      "license": "Python-2.0"
-    },
     "node_modules/eslint/node_modules/eslint-scope": {
       "version": "7.1.1",
       "dev": true,
@@ -6096,17 +5951,6 @@
         "node": ">=10.13.0"
       }
     },
-    "node_modules/eslint/node_modules/js-yaml": {
-      "version": "4.1.0",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "argparse": "^2.0.1"
-      },
-      "bin": {
-        "js-yaml": "bin/js-yaml.js"
-      }
-    },
     "node_modules/espree": {
       "version": "9.3.2",
       "dev": true,
@@ -6924,6 +6768,24 @@
       "version": "4.0.0",
       "license": "MIT"
     },
+    "node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/js-yaml/node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true
+    },
     "node_modules/jsdoc-type-pratt-parser": {
       "version": "3.1.0",
       "dev": true,
@@ -8232,6 +8094,11 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/regenerator-runtime": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
+    },
     "node_modules/regexp.prototype.flags": {
       "version": "1.3.1",
       "license": "MIT",
@@ -9752,6 +9619,21 @@
         "node": ">=6"
       }
     },
+    "node_modules/yorkie-js-sdk": {
+      "version": "0.4.20",
+      "resolved": "https://registry.npmjs.org/yorkie-js-sdk/-/yorkie-js-sdk-0.4.20.tgz",
+      "integrity": "sha512-e9uXXYfm7vVL/kGJ5tyyL8Erod9P1Ggiq5p6wP8FRh2G4BrJk9kAzHXUjvWqhw5XywiQsVXvWtIX1rlD6WsYqg==",
+      "dependencies": {
+        "@bufbuild/protobuf": "^1.6.0",
+        "@connectrpc/connect": "^1.2.0",
+        "@connectrpc/connect-web": "^1.2.0",
+        "long": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=7.1.0"
+      }
+    },
     "node_modules/z-schema": {
       "version": "5.0.5",
       "resolved": "https://registry.npmjs.org/z-schema/-/z-schema-5.0.5.tgz",
diff --git a/public/quill.html b/public/quill.html
index 634c0bca7..36a0b0c00 100644
--- a/public/quill.html
+++ b/public/quill.html
@@ -71,7 +71,10 @@
           const doc = new yorkie.Document(documentKey, {
             enableDevtools: true,
           });
-          doc.subscribe('connection', new Network(statusHolder).statusListener);
+          doc.subscribe(
+            'connection',
+            new Network(networkStatusElem).statusListener,
+          );
           doc.subscribe('presence', (event) => {
             if (event.type === 'presence-changed') return;
             displayOnlineClients(doc.getPresences(), client.getID());