{"id":16084,"date":"2025-06-17T08:04:50","date_gmt":"2025-06-16T23:04:50","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=16084"},"modified":"2025-06-17T08:06:30","modified_gmt":"2025-06-16T23:06:30","slug":"compression-streams-api%eb%a5%bc-%ec%9d%b4%ec%9a%a9%ed%95%9c-%ed%85%8d%ec%8a%a4%ed%8a%b8-%eb%8d%b0%ec%9d%b4%ed%84%b0%ec%97%90-%eb%8c%80%ed%95%9c-%ec%95%95%ec%b6%95-%eb%b0%8f-%ed%95%b4%ec%a0%9c","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=16084","title":{"rendered":"Compression Streams API\ub97c \uc774\uc6a9\ud55c \ud14d\uc2a4\ud2b8 \ub370\uc774\ud130\uc5d0 \ub300\ud55c \uc555\ucd95 \ubc0f \ud574\uc81c"},"content":{"rendered":"<p>Compression Streams API\ub294 \uc6f9 \ud45c\uc900 API\ub85c \ub370\uc774\ud130\uc5d0 \ub300\ud55c \uc555\ucd95 \ubc0f \ud574\uc81c\ub97c \uc704\ud55c API\uc774\ub2e4. \ud30c\uc77c \ub2e8\uc704\uac00 \uc544\ub2cc \ub370\uc774\ud130\uc5d0 \ub300\ud55c \uc555\ucd95\uc73c\ub85c \uadf8 \ubaa9\uc801\uc774 zip\uacfc\ub294 \ub2e4\ub974\uc9c0\ub9cc \ub370\uc774\ud130 \uc555\ucd95\uc5d0 \ub300\ud55c \uc54c\uace0\ub9ac\uc998\uc740 \uc720\uc0ac\ud558\ub2e4. \uc989, zip\uc740 \uc5ec\ub7ec\uac1c\uc758 \ud30c\uc77c\uc744 \uc555\ucd95\ud558\uba74\uc11c \uc555\ucd95 \ud574\uc81c\uc2dc\uc5d0\ub294 \ud30c\uc77c \uba85\uacfc \ub514\ub809\ud1a0\ub9ac \uad6c\uc870\uae4c\uc9c0 \ubcf5\uc6d0\ud574\uc8fc\uc9c0\ub9cc Compression Sterams API\ub294 \ub370\uc774\ud130\uc5d0 \ub300\ud55c \uc555\ucd95\uc73c\ub85c \uc555\ucd95\uc744 \ud574\uc81c\ud558\uba74 \ud574\uc81c\ub41c \ub370\uc774\ud130\uac00 \ub098\uc624\uba70 \uadf8 \ub370\uc774\ud130\ub97c \ud558\ub098\uc758 \ud30c\uc77c\ub85c \uc800\uc7a5\ud55c\ub2e4.<\/p>\n<p>Compression Streams API\ub85c \uc555\ucd95\ud560 \uc218 \uc788\ub294 \ub370\uc774\ud130\ub294 \ud14d\uc2a4\ud2b8 \ub4e0 \ubc14\uc774\ub108\ub9ac\ub4e0 \ubaa8\ub450 \uac00\ub2a5\ud55c\ub370, \uc544\ub798\uc758 \ucf54\ub4dc\ub294 \ud14d\uc2a4\ud2b8\uc5d0 \ub300\ud55c \uc555\ucd95\uacfc \uc555\ucd95\ub41c \ub370\uc774\ud130\ub97c \ub2e4\uc2dc \uc6d0\ub798\uc758 \ud14d\uc2a4\ud2b8 \ub370\uc774\ud130\ub85c \ubcf5\uc6d0(\uc555\ucd95 \ud574\uc81c)\ud558\ub294 \ucf54\ub4dc\uc774\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"glsl\">\r\nasync function compressAndDecompressString(text) {\r\n  \/\/ 1. \ud14d\uc2a4\ud2b8\ub97c Uint8Array\ub85c \ubcc0\ud658\r\n  const textEncoder = new TextEncoder();\r\n  const encodedData = textEncoder.encode(text);\r\n\r\n  console.log(\"\uc6d0\ubcf8 \ub370\uc774\ud130:\", text);\r\n  console.log(\"\uc6d0\ubcf8 \ub370\uc774\ud130 \ud06c\uae30 (\ubc14\uc774\ud2b8):\", encodedData.byteLength);\r\n\r\n  \/\/ 2. \ub370\uc774\ud130\ub97c \uc555\ucd95 (gzip \ud615\uc2dd)\r\n  \/\/ ReadableStream.from()\uc740 Node.js\uc5d0\uc11c \uc0ac\uc6a9 \uac00\ub2a5\ud558\uba70, \r\n  \/\/ \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c\ub294 ArrayBuffer\ub97c \uc9c1\uc811 ReadableStream\uc73c\ub85c \ubcc0\ud658\ud574\uc57c \ud568.\r\n  \/\/ \uc5ec\uae30\uc11c\ub294 \ud3b8\uc758\ub97c \uc704\ud574 Blob\uc744 \uc0ac\uc6a9\ud558\uc5ec ReadableStream\uc744 \uc0dd\uc131\ud569\ub2c8\ub2e4.\r\n  const originalStream = new Blob([encodedData]).stream();\r\n  const compressedStream = originalStream.pipeThrough(new CompressionStream(\"gzip\"));\r\n\r\n  \/\/ 3. \uc555\ucd95\ub41c \ub370\uc774\ud130\ub97c ArrayBuffer\ub85c \uc77d\uae30\r\n  const compressedResponse = new Response(compressedStream);\r\n  const compressedBuffer = await compressedResponse.arrayBuffer();\r\n\r\n  console.log(\"\uc555\ucd95\ub41c \ub370\uc774\ud130 \ud06c\uae30 (\ubc14\uc774\ud2b8):\", compressedBuffer.byteLength);\r\n  console.log(\"\uc555\ucd95\ub960:\", \r\n    ((1 - compressedBuffer.byteLength \/ encodedData.byteLength) * 100).toFixed(2) + \"%\");\r\n\r\n  \/\/ 4. \uc555\ucd95\ub41c \ub370\uc774\ud130\ub97c \uc555\ucd95 \ud574\uc81c\r\n  const decompressedStream = new Blob([compressedBuffer]).stream()\r\n    .pipeThrough(new DecompressionStream(\"gzip\"));\r\n\r\n  \/\/ 5. \uc555\ucd95 \ud574\uc81c\ub41c \ub370\uc774\ud130\ub97c ArrayBuffer\ub85c \uc77d\uae30\r\n  const decompressedResponse = new Response(decompressedStream);\r\n  const decompressedBuffer = await decompressedResponse.arrayBuffer();\r\n\r\n  \/\/ 6. \uc555\ucd95 \ud574\uc81c\ub41c Uint8Array\ub97c \ub2e4\uc2dc \ud14d\uc2a4\ud2b8\ub85c \ubcc0\ud658\r\n  const textDecoder = new TextDecoder();\r\n  const decompressedText = textDecoder.decode(decompressedBuffer);\r\n\r\n  console.log(\"\uc555\ucd95 \ud574\uc81c\ub41c \ub370\uc774\ud130:\", decompressedText);\r\n  console.log(\"\uc555\ucd95 \ud574\uc81c\ub41c \ub370\uc774\ud130 \ud06c\uae30 (\ubc14\uc774\ud2b8):\", decompressedBuffer.byteLength);\r\n\r\n  \/\/ \uc6d0\ubcf8 \ub370\uc774\ud130\uc640 \uc555\ucd95 \ud574\uc81c\ub41c \ub370\uc774\ud130\uac00 \ub3d9\uc77c\ud55c\uc9c0 \ud655\uc778\r\n  console.log(\"\uc6d0\ubcf8\uacfc \uc555\ucd95 \ud574\uc81c\ub41c \ub370\uc774\ud130 \uc77c\uce58 \uc5ec\ubd80:\", text === decompressedText);\r\n}\r\n\r\n\/\/ \uc608\uc81c \uc2e4\ud589\r\nconst longText = `The quick brown fox jumps over the lazy dog.`;\r\n\r\ncompressAndDecompressString(longText);\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Compression Streams API\ub294 \uc6f9 \ud45c\uc900 API\ub85c \ub370\uc774\ud130\uc5d0 \ub300\ud55c \uc555\ucd95 \ubc0f \ud574\uc81c\ub97c \uc704\ud55c API\uc774\ub2e4. \ud30c\uc77c \ub2e8\uc704\uac00 \uc544\ub2cc \ub370\uc774\ud130\uc5d0 \ub300\ud55c \uc555\ucd95\uc73c\ub85c \uadf8 \ubaa9\uc801\uc774 zip\uacfc\ub294 \ub2e4\ub974\uc9c0\ub9cc \ub370\uc774\ud130 \uc555\ucd95\uc5d0 \ub300\ud55c \uc54c\uace0\ub9ac\uc998\uc740 \uc720\uc0ac\ud558\ub2e4. \uc989, zip\uc740 \uc5ec\ub7ec\uac1c\uc758 \ud30c\uc77c\uc744 \uc555\ucd95\ud558\uba74\uc11c \uc555\ucd95 \ud574\uc81c\uc2dc\uc5d0\ub294 \ud30c\uc77c \uba85\uacfc \ub514\ub809\ud1a0\ub9ac \uad6c\uc870\uae4c\uc9c0 \ubcf5\uc6d0\ud574\uc8fc\uc9c0\ub9cc Compression Sterams API\ub294 \ub370\uc774\ud130\uc5d0 \ub300\ud55c \uc555\ucd95\uc73c\ub85c \uc555\ucd95\uc744 \ud574\uc81c\ud558\uba74 \ud574\uc81c\ub41c \ub370\uc774\ud130\uac00 \ub098\uc624\uba70 \uadf8 \ub370\uc774\ud130\ub97c \ud558\ub098\uc758 \ud30c\uc77c\ub85c &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/www.gisdeveloper.co.kr\/?p=16084\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;Compression Streams API\ub97c \uc774\uc6a9\ud55c \ud14d\uc2a4\ud2b8 \ub370\uc774\ud130\uc5d0 \ub300\ud55c \uc555\ucd95 \ubc0f \ud574\uc81c&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[105,88],"tags":[],"class_list":["post-16084","post","type-post","status-publish","format-standard","hentry","category-html5","category-javascript"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/16084","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=16084"}],"version-history":[{"count":4,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/16084\/revisions"}],"predecessor-version":[{"id":16088,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/16084\/revisions\/16088"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=16084"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=16084"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=16084"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}