PageSourceSearch

https://patterns-dev-kr.github.io/

html patterns-dev-kr.github.io collected 2026-10-03 09:44:33 UTC 110,814 bytes, 109 lines download raw bytes

1<!DOCTYPE html><html lang="ko" data-astro-cid-sckkx6r4> <head><meta charset="utf-8"><meta content="ie=edge" http-equiv="x-ua-compatible"><meta content="initial-scale=1, maximum-scale=5, width=device-width, viewport-fit=cover" name="viewport"><meta content="er9zvCmECxtt0KP_BjDZ4WplZsNT5ApeDBK4wYD7aI0" name="google-site-verification"><meta content="eaca9475c8a73d77aa2e34ac3d3e8097cef7397d" name="naver-site-verification"><meta content="Astro v4.16.6" name="generator"><title>Patterns.dev.kr</title><link rel="canonical" href="https://patterns-dev-kr.github.io/"><meta name="description" content="모던 웹 앱 디자인 패턴"><meta name="robots" content="index, follow"><meta property="og:title" content="Patterns.dev.kr  - 모던 웹 앱 디자인 패턴"><meta property="og:type" content="website"><meta property="og:image" content="//og-image.png"><meta property="og:url" content="https://patterns-dev-kr.github.io/"><meta property="og:image:url" content="//og-image.png"><meta property="og:image:alt" content="Patterns.dev.kr"><link crossorigin href="https://fonts.gstatic.com" rel="preconnect"><link href="/favicon.png" rel="icon" sizes="any" type="image/png"><meta name="astro-view-transitions-enabled" content="true"><meta name="astro-view-transitions-fallback" content="swap">
vendor: 57 bytes, line 1
1<script src="https://www.googletagmanager.com/gtag/js?id=
1G-3XKKTEVFKQ
vendor: 33 bytes, line 1
1" type="text/partytown"></script>
1<script type="text/partytown">
2      window.dataLayer = window.dataLayer || []
3      function gtag() {
4        // eslint-disable-next-line prefer-rest-params
5        window.dataLayer.push(arguments)
6      }
7      gtag('js', new Date())
8      gtag('config', 'G-3XKKTEVFKQ')
9    </script>
9<script>
10      document.addEventListener('astro:page-load', () => {
11        if (navigator.userAgent.indexOf('Win') > -1) {
12          document.documentElement.classList.add('win')
13        }
14      })
15    </script>
15<link rel="stylesheet" href="/_astro/_slug_.CnWBadwT.css">
16<style>button[data-astro-cid-kk2n2nv4]{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-radius:.375rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(var(--color-border) / var(--tw-border-opacity));padding:1rem;text-align:left;letter-spacing:-.025em;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}button[data-astro-cid-kk2n2nv4]:hover{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-sha
16dow)}button[data-astro-cid-kk2n2nv4] .label[data-astro-cid-kk2n2nv4]{display:flex;flex-direction:column;gap:.25rem}button[data-astro-cid-kk2n2nv4] .icon[data-astro-cid-kk2n2nv4]{display:flex;height:2rem;width:2rem;flex:none;align-items:center;justify-content:center;border-radius:9999px;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.image-area[data-astro-cid-kk2n2nv4] img[data-astro-cid-kk2n2nv4]{width:100%}.image-area[data-astro-cid-kk2n2nv4] img[data-astro-cid-kk2n2nv4]:nth-child(n+2){display:none}
17</style>
17<script type="module" src="/_astro/hoisted.YRHFQ826.js"></script>
vendor: 1 bytes, line 17
17
18<script>!(function(w,p,f,c){if(!window.crossOriginIsolated && !navigator.serviceWorker) return;c=w[p]=Object.assign(w[p]||{},{"lib":"/~partytown/","debug":false});c[f]=(c[f]||[]).concat(["dataLayer.push"])})(window,'partytown','forward');/* Partytown 0.10.2 - MIT builder.io */
19const t={preserveBehavior:!1},e=e=>{if("string"==typeof e)return[e,t];const[n,r=t]=e;return[n,{...t,...r}]},n=Object.freeze((t=>{const e=new Set;let n=[];do{Object.getOwnPropertyNames(n).forEach((t=>{"function"==typeof n[t]&&e.add(t)}))}while((n=Object.getPrototypeOf(n))!==Object.prototype);return Array.from(e)})());!function(t,r,o,i,a,s,c,d,l,p,u=t,f){function h(){f||(f=1,"/"==(c=(s.lib||"/~partytown/")+(s.debug?"debug/":""))[0]&&(l=r.querySelectorAll('script[type="text/partytown"]'),i!=t?i.dispatchEvent(new CustomEvent("pt1",{detail:t})):(d=setTimeout(v,1e4),r.addEventListener("pt0",w),a?y(1):o.serviceWorker?o.serviceWorker.register(c+(s.swPath||"partytown-sw.js"),{scope:c}).then((function(t){t.active?y():t.installing&&t.installing.addEventListener("statechange",(function(t){"activated"==t.target.state&&y()}))}),console.error):v())))}function y(e){p=r.createElement(e?"script":"iframe"),t._pttab=Date.now(),e||(p.style.display="block",p.style.width="0",p.style.height="0",p.style.border="0",p.style.visibility="hidden",p.setAttribute("aria-hidden",!0)),p.src=c+"partytown-"+(e?"atomics.js?v=0.10.2":"sandbox-sw.html?"+t._pttab),r.querySelector(s.sandboxParent||"body").appendChild(p)}function v(n,o){for(w(),i==t&&(s.forward||[]).map((function(n){const[r]=e(n);delete t[r.split(".")[0]]})),n=0;n<l.length;n++)(o=r.createElement("script")).innerHTML=l[n].innerHTML,o.nonce=s.nonce,r.head.appendChild(o);p&&p.parentNode.removeChild(p)}function w(){clearTimeout(d)}s=t.partytown||{},i==t&&(s.forward||[]).map((function(r){const[o,{preserveBehavior:i}]=e(r);u=t,o.split(".").map((function(e,r,o){var a;u=u[o[r]]=r+1<o.length?u[o[r]]||(a=o[r+1],n.includes(a)?[]:{}):(()=>{let e=null;if(i){const{methodOrProperty:n,thisObject:r}=((t,e)=>{let n=t;for(let t=0;t<e.length-1;t+=1)n=n[e[t]];return{thisObject:n,methodOrProperty:e.length>0?n[e[e.length-1]]:void 0}})(t,o);"function"==typeof n&&(e=(...t)=>n.apply(r,...t))}return function(){let n;return e&&(n=e(arguments)),(t._ptf=t._ptf||[]).push(o,arguments),n}})()}))})),"complete"==r.readyState?h():(t.addEventListener("DOMContentLoaded",h),t.addEventListener("load",h))}(window,document,navigator,top,window.crossOriginIsolated);;(e=>{e.addEventListener("astro:before-swap",e=>{let r=document.body.querySelector("iframe[src*='/~partytown/']");if(r)e.newDocument.body.append(r)})})(document);</script>
19</head> <body data-astro-cid-sckkx6r4> <header data-header class="fixed left-0 right-0 top-0 z-10 h-20 px-3 transition-all ease-out [&.scroll]:h-12 [&.scroll]:bg-th-bg [&.scroll]:shadow-md" data-astro-cid-3ef6ksr2> <div class="container flex h-full items-center justify-between font-lexend text-th-text" data-astro-cid-3ef6ksr2> <div class="flex items-center gap-4" data-astro-cid-3ef6ksr2> <button class="flex h-6 w-6 flex-grow-0 items-center justify-center lg:hidden hidden" data-menu-button type="button" data-astro-cid-3ef6ksr2> <svg width="1em" height="1em" viewBox="0 0 32 32" class="text-2xl" data-astro-cid-3ef6ksr2 data-icon="carbon:menu">  <symbol id="ai:carbon:menu"><path fill="currentColor" d="M4 6h24v2H4zm0 18h24v2H4zm0-12h24v2H4zm0 6h24v2H4z"/></symbol><use xlink:href="#ai:carbon:menu"></use>  </svg> </button> <a aria-label="Go to Home" class="text-2xl font-bold leading-none text-th-text no-underline" href="/" data-astro-cid-3ef6ksr2>patterns</a> </div> <nav class="flex items-center text-sm" data-astro-cid-3ef6ksr2> <a class="relative flex items-center px-3 font-light text-th-text no-underline data-[active]:font-medium" data-active href="/" data-astro-cid-3ef6ksr2>Read</a> <a class="relative flex items-center px-3 font-light text-th-text no-underline data-[active]:font-medium" href="/about" data-astro-cid-3ef6ksr2>About</a> <custom-theme-switcher data-astro-cid-dz5h74bc> <button class="relative flex h-8 w-8 place-content-center place-items-center rounded-sm" title="Change color theme" type="button" data-astro-cid-dz5h74bc> <svg width="1em" height="1em" viewBox="0 0 24 24" data-light data-astro-cid-dz5h74bc data-icon="octicon:sun-24">  <symbol id="ai:octicon:sun-24"><path fill="currentColor" d="M12 19a7 7 0 1 1 0-14a7 7 0 0 1 0 14m0-1.5a5.5 5.5 0 1 0 0-11a5.5 5.5 0 1 0 0 11m-5.657.157a.75.75 0 0 1 0 1.06l-1.768 1.768a.749.749 0 0 1-1.275-.326a.75.75 0 0 1 .215-.734l1.767-1.768a.75.75 0 0 1 1.061 0M3.515 3.515a.75.75 0 0 1 1.06 0l1.768 1.768a.749.749 0 0 1-.326 1.275a.75.75 0 0 1-.734-.215L3.515 4.575a.75.75 0 0 1 0-1.06M12 0a.75.75 0 0 1 .75.75v2.5a.75.75 0 0 1-1.5 0V.75A.75.75 0 0 1 12 0M4 12a.75.75 0 0 1-.75.75H.75a.75.75 0 0 1 0-1.5h2.5A.75.75 0 0 1 4 12m8 8a.75.75 0 0 1 .75.75v2.5a.75.75 0 0 1-1.5 0v-2.5A.75.75 0 0 1 12 20m12-8a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1 0-1.5h2.5A.75.75 0 0 1 24 12m-6.343 5.657a.75.75 0 0 1 1.06 0l1.768 1.768a.75.75 0 0 1-.018 1.042a.75.75 0 0 1-1.042.018l-1.768-1.767a.75.75 0 0 1 0-1.061m2.828-14.142a.75.75 0 0 1 0 1.06l-1.768 1.768a.75.75 0 0 1-1.042-.018a.75.75 0 0 1-.018-1.042l1.767-1.768a.75.75 0 0 1 1.061 0"/></symbol><use xlink:href="#ai:octicon:sun-24"></use>  </svg> <svg width="1em" height="1em" viewBox="0 0 24 24" data-dark data-astro-cid-dz5h74bc data-icon="octicon:moon-24">  <symbol id="ai:octicon:moon-24"><path fill="currentColor" d="m14.768 3.96l-.002-.005a9 9 0 0 0-.218-.779c-.13-.394.21-.8.602-.67q.435.144.855.328l.01.005A10.002 10.002 0 0 1 12 22a10 10 0 0 1-9.162-5.985l-.004-.01a10 10 0 0 1-.329-.855c-.13-.392.277-.732.67-.602q.386.126.78.218l.004.002A9 9 0 0 0 14.999 6a9 9 0 0 0-.231-2.04M16.5 6c0 5.799-4.701 10.5-10.5 10.5q-.64 0-1.26-.075A8.5 8.5 0 1 0 16.425 4.74q.075.62.075 1.259Z"/></symbol><use xlink:href="#ai:octicon:moon-24"></use>  </svg> <svg width="1em" height="1em" viewBox="0 0 24 24" data-auto data-astro-cid-dz5h74bc data-icon="octicon:devices-24">  <symbol id="ai:octicon:devices-24"><path fill="currentColor" d="M1 3.75C1 2.784 1.784 2 2.75 2h18.5c.966 0 1.75.784 1.75 1.75v4a.75.75 0 0 1-1.5 0v-4a.25.25 0 0 0-.25-.25H2.75a.25.25 0 0 0-.25.25v11.5c0 .138.112.25.25.25h9a.75.75 0 0 1 0 1.5h-1.287c-.126 1.266-.564 2.445-1.223 3.5h2.51a.75.75 0 0 1 0 1.5h-4a.75.75 0 0 1-.56
195-1.243c.964-1.105 1.598-2.382 1.769-3.757H2.75A1.75 1.75 0 0 1 1 15.25z"/><path fill="currentColor" d="M14 11.75c0-.967.783-1.75 1.75-1.75h5.5c.966 0 1.75.783 1.75 1.75v8.5A1.75 1.75 0 0 1 21.25 22h-5.5A1.75 1.75 0 0 1 14 20.25Zm1.75-.25a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h5.5a.25.25 0 0 0 .25-.25v-8.5a.25.25 0 0 0-.25-.25Z"/></symbol><use xlink:href="#ai:octicon:devices-24"></use>  </svg> </button> </custom-theme-switcher> 
19<script>
20  // for avoid FOUC
21  const loadTheme = () => {
22    if (typeof localStorage === 'undefined') {
23      return { preferred: 'light', theme: 'auto' }
24    }
25
26    const value = localStorage.getItem('theme')
27
28    return {
29      preferred: matchMedia('(prefers-color-scheme: light)').matches
30        ? 'light'
31        : 'dark',
32      theme: value === 'dark' || value === 'light' ? value : 'auto',
33    }
34  }
35
36  const { preferred, theme } = loadTheme()
37  const {
38    documentElement: { classList },
39  } = document
40
41  if (theme === 'auto') {
42    classList.add('auto')
43  } else {
44    classList.remove('auto')
45  }
46
47  const actual = theme === 'auto' ? preferred : theme
48
49  if (actual === 'dark') {
50    classList.add('dark')
51  } else {
52    classList.remove('dark')
53  }
54</script>
54   </nav> </div> </header>   <main class="relative" data-astro-cid-sckkx6r4>  <div class="px-3 transition-colors"> <div class="container relative pt-20 text-th-text">  <div class="pb-32"> <section class="flex flex-col gap-8 py-20"> <h1 class="w-full text-center text-4xl font-semibold tracking-tight md:text-6xl">
55뛰어난 성능을 가진<br><span class="bg-gradient-to-r from-indigo-500 via-sky-600 to-indigo-400 bg-clip-text text-transparent dark:from-indigo-200 dark:via-sky-400 dark:to-indigo-200">웹 앱을</span> 만들어 봅시다.
56</h1> <div class="flex flex-col gap-4"> <p class="w-full text-center text-base tracking-tight text-th-text-secondary md:text-2xl">
57순수 자바스크립트 혹은 모던 프레임웍 기반 웹 앱을 위한<br>
58디자인 패턴, 렌더링 패턴, 성능 개선 포인트들을 총망라 하였습니다.
59</p> <p class="w-full text-center text-base tracking-tight text-th-text-secondary">
60원작자: Lydia Hallie, Addy Osmani
61</p> </div> <div class="flex justify-center gap-4"> <a class="rounded-md bg-cyan-300 px-8 py-4 text-black no-underline" href="/design-patterns/introduction">Read Online</a> <a class="rounded-md bg-th-bg-secondary px-8 py-4 text-th-text no-underline" href="https://www.patterns.dev/book" rel="noopener noreferrer" target="_blank">Download eBook or PDF</a> </div> <div class="flex justify-center"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 803 412" class="max-w-3xl w-full"><defs><path id="path-1" d="M-2.07046772e-14 0.107450328L148.557476 0.107450328 148.557476 222.750689 -2.07046772e-14 222.750689z"></path></defs><g fill="none" stroke="none"><g transform="translate(-213 -401)"><g transform="translate(213 401)"><path fill="none" d="M0 0H803V412H0z"></path><g transform="translate(0 29)"><g transform="translate(0 41)"><path fill="#9B6D5C" d="M144.717023 304.368976L143.576306 317.627285 130.164235 317.627984 132.474925 301.61681 144.717023 304.368976" transform="scale(-1 1) rotate(-12 0 1617.283)"></path><path fill="#9B6D5C" d="M111.247247 302.914872L110.113926 316.172032 96.6951228 316.172212 99.0063532 300.160962 111.247247 302.914872" transform="scale(-1 1) rotate(-3 0 4278.666)"></path><g transform="matrix(-1 0 0 1 244 0)"><g transform="translate(72.848)"><g transform="translate(21.843 89.084)"><mask id="mask-2" fill="#fff"><use xlink:href="#path-1"></use></mask><path fill="#2B72B6" d="M60.93 114.621c-1.028 3.467-3.539 7.241-6.147 9.28l-.37 91.578H39.29l.05-90.509-17.956-1.934s-6.875 46.999-6.884 59.698c.441 7.125 4.17 32.745 4.17 32.745H4.582S0 189.92 0 182.734c0-20.019 6.846-86.918 6.846-86.918h54.083v18.805z" mask="url(#mask-2)"></path></g><path fill="#373737" d="M83.457 122.832l17.091-6.07c-1.342-16.544-17.703-36.052-43.82-36.052-26.12 0-42.33 19.508-43.67 36.051l15.289 6.07-3.08 77.041 58.19 1.453v-78.493"></path><path fill="#9B6D5C" d="M67.3 81.818c-1.476-.35-2.324-.497-4.144-.751l-.945-9.868-10.538-.382-.4 10.127c-2.165.216-3.331.46-5.058.879-.043.526 0 .977.02 1.52.258 6.477 5.18 11.494 10.994 11.205 5.812-.29 10.317-5.773 10.058-12.25-.004-.107.02-.375.012-.48"></path><path fill="#9B6D5C" d="M84.366 194.172l-2.432-1.335c-.586-.288-7.91-3.721-13.95 1.166l-7.537-9.31c9.099-7.361 19.142-5.387 24.04-3.711 5.421-2.805 19.545-11.262 22.359-24.418-1.236-5.62-14.628-27.689-20.262-34.843l12.214-4.338c1.164 1.328 19.156 28.41 20.066 38.942l.065.784-.137.776c-4.114 23.202-30.627 34.678-31.754 35.155l-2.672 1.132"></path><path fill="#9B6D5C" d="M17.66 43.173c.022 4.593 3.755 8.3 8.339 8.278 4.584-.02 8.283-3.76 8.262-8.355-.02-4.593-3.754-8.299-8.34-8.277-4.582.021-8.281 3.762-8.26 8.354"></path><path fill="#9B6D5C" d="M24.845 42.71c-.01 17.91 14.165 32.438 31.467 32.45 17.304.011 31.498-14.498 31.511-32.408l-.375-8.828c.013-17.91-13.783-32.438-31.085-32.45-17.304-.011-31.119 14.498-31.13 32.408l-.388 8.828"></path><path fill="#9B6D5C" d="M79.037 44.473c.023 4.593 3.755 8.3 8.338 8.278 4.584-.021 8.283-3.76 8.262-8.355-.022-4.593-3.754-8.298-8.339-8.277-4.583.02-8.283 3.761-8.26 8.354"></path><path fill="#77564D" d="M56.312 75.16c17.304.011 31.498-14.498 31.511-32.408v-1.483a11.448 11.448 0 01-.007-.
6164l-4.808.225s.904 16.632-12.787 15.997c-4-.186-9.27-5.4-16.215-5.5-7.267-.104-11.905 5.193-16.13 5.186-11.347-.02-9.554-16.463-9.554-16.463l-3.425-.262c-.002.266-.02.542-.05.822l-.002 2.076c-.01 17.91 14.165 32.438 31.467 32.45"></path><path fill="#4F3934" d="M87.637 27.982C87.009 18.094 78.955.993 56.922 0 34.97.758 25.879 17.29 25.148 27.172c-.236 3.181-.25 12.64-.25 12.64l3.424.262s-1.294-29.126 16.237-24.092c3.895 1.119 8.612 2.254 12.172 2.317 3.834-.009 6.347-.63 10.254-1.709 17.583-4.85 16.023 24.264 16.023 24.264l4.817-.225s.014-9.463-.188-12.647"></path><path fill="#000" d="M42.546 48.799c-.545 1.97-2.495 3.154-4.36 2.639-1.863-.513-2.932-2.528-2.39-4.499.545-1.972 2.496-3.154 4.361-2.64 1.863.513 2.933 2.528 2.389 4.5"></path><path fill="#000" d="M71.405 48.799c-.543 1.97-2.494 3.154-4.358 2.639-1.865-.513-2.934-2.528-2.391-4.499.544-1.972 2.496-3.154 4.36-2.64 1.864.513 2.934 2.528 2.39 4.5"></path></g><path fill="#9B6D5C" d="M90.855 194.235l-2.423-1.34c-.584-.29-7.882-3.737-13.901 1.17l-7.51-9.349c9.066-7.392 19.074-5.41 23.955-3.726 5.403-2.818 19.478-11.31 22.282-24.521-1.232-5.643-14.578-27.805-20.192-34.99l12.172-4.356c1.16 1.334 19.089 28.53 19.996 39.106l.065.787-.137.78c-4.1 23.3-30.52 34.823-31.644 35.302l-2.663 1.137" transform="matrix(-1 0 0 1 192.319 0)"></path><g transform="translate(0 57.47)"><path fill="#FFF" d="M136.882 1.14L115.903.29s3.007 6.577 8.218 7.534c7.078 1.3 12.399-5.045 12.76-6.684"></path><path fill="#B2B2B2" d="M0.277675128 254.594264L9.98123962 254.594264 9.98123962 230.650876 0.277675128 230.650876z"></path></g></g><path fill="#373737" d="M113.827 308c2.794.236 4.613 2.71 4.613 5.788l10.581.78 2.945 14.057H92.101v-3.638s17.547-10.006 20.507-11.568l1.22-5.419" transform="matrix(-1 0 0 1 224.068 0)"></path><path fill="#373737" d="M148.333 309.375c2.808.23 4.64 2.734 4.64 5.855l11.086.67 2.96 14.1h-40.551v-3.449s17.872-10.122 20.854-11.694l1.011-5.482" transform="matrix(-1 0 0 1 293.487 0)"></path></g><path fill="#FFF" d="M540 303.524501L535.766973 306 524 284.482759 528.226018 282 540 303.524501"></path><path fill="#B2B2B2" d="M677 319L687 319 687 280 677 280z"></path><path fill="#373737" d="M650 273c0 5.52 4.397 10 9.821 10h46.358c5.424 0 9.821-4.48 9.821-10 0-5.527-4.397-10-9.821-10H659.82c-5.424 0-9.821 4.473-9.821 10"></path><path fill="#373737" d="M674 348L689 348 689 311 674 311z"></path><path fill="#B2B2B2" d="M690 332L738 342.332598 738 348 690 342.000882 690 332"></path><path fill="#B2B2B2" d="M678 348L685 348 685 332 678 332z"></path><path fill="#373737" d="M730 357.003a5.998 5.998 0 006 5.997c3.316 0 6-2.686 6-5.997a6 6 0 00-6-6.003 6 6 0 00-6 6.003"></path><path fill="#B2B2B2" d="M674 332L626 342.332598 626 348 674 342.000882 674 332"></path><path fill="#373737" d="M676 357.003a5.998 5.998 0 005.997 5.997 6 6 0 100-12 6 6 0 00-5.997 6.003"></path><path fill="#5454B5" d="M596.316 273h98.154c7.309 0-14.814-19.84-14.74-27.067.408-41.11 16.892-103.449 17.06-104.07.89-3.347-1.124-6.773-4.5-7.654-3.37-.882-6.828 1.113-7.718 4.452-.043.159-4.31 16.24-8.57 37.287-5.733 28.39-8.738 51.894-8.913 69.862-.08 8.087-6.696 14.672-14.741 14.672h-56.032c-3.486 0-6.316 2.797-6.316 6.259 0 3.455 2.83 6.259 6.316 6.259"></path><path fill="#5454B5" d="M767 134L691.098558 134.210298 665 263 746.634615 260.345888 767 134"></path><path fill="#6363CE" d="M673.316 273h56.032c7.301 0 14.165-2.826 19.321-7.95 5.128-5.096 7.987-11.89 8.06-19.117.409-41.11 16.893-103.449 17.06-104.07.89-3.347-1.123-6.773-4.5-7.654-3.37-.882-6.827 1.113-7.717 4.452-.043.159-4.31 16.24-8.563 37.287-5.74 28.39-8.738 51.894-8.92 69.862-.08 8.087-6.696 14.672-14.741 14.672h-56.032c-3.486 0-6.316 2.797-6.316 6.259 0 3.455 2.83 6.259 6.316 6.259"></path><path fill="#373737" d="M676 285L688 285 688 282 676 282z"></path><path fill="#8C6053" d="M615.165 218c1.186 0 2.371-.022 3.586-.073 15.904-.644 28.641-9.783 36.846-26.428 5.885-11.941 7.345-23.597 7.403-24.094l-11.342-1.398 5.674.703-5.674-.71c-.015.102-1.338 10.412-6.413 20.59-6.318 12.657-15.383 19.308-26.95 19.784-30.781 1.25-50.386-16.58-50.574-16.763L560 198.142c.904.835 21.817 19.858 55.165 19.858"></path><path fill="#373737" d="M648 85.328c-.095 31.755 25.574 57.577 57.328 57.672 31.755.095 57.577-25.574 57.672-57.328.095-31.755-25.566-57.577-57.328-57.672-31.755-.095-57.577 25.574-57.672 57.328"></path><path fill="#9B6D5C" d="M661.084 99.967c-1.241 16.95 11.414 31.7 28.259 32.95 16.844 1.241 31.504-11.493 32.738-28.443l.835-11.44c1.241-16.95-11.414-31.701-28.259-32.95-16.844-1.242-31.504 11.492-32.738 28.442l-.835 11.44"></path><path fill="#9B6D5C" d="M715.022 103.417c-.325 4.4 2.98 8.236 7.39 8.561 4.404.325 8.24-2.988 8.566-7.395.326-4.408-2.987-8.243-7.39-8.561a7.991 7.991 0 00-8.566 7.395"></path><path fill="#373737" d="M707 62.667L698.21 75c-1.5-.709-3.607-1.498-5.21-2.024L700.026 60c2.21.621 4.99 1.637 6.974 2.667"></path><path fill="#373737" d="M715 68.225L705.193 78c-1.228-.848-3.838-2.44-5.193-3.145L709.546 64c1.785 1.135 3.98 2.782 5.454 4.225"></path><path fill="#373737" d="M698 59.531L692.315 73c-1.27-.374-2.995-.68-4.315-.928.91-2.813 3.189-8.53 4.668-13.072 1.818.03 3.6.217 5.332.531"></path><path fill="#373737" d="M690 59l-3.713 12-.42-.063a37.397 37.397 0 00-3.535-.245c.094-2.741-.443-6.96-.31-10.739 2.007-.385 5.79
61-.834 7.978-.953"></path><path fill="#373737" d="M721 77.023L709.296 83A37.252 37.252 0 00706 79.92L717.415 71c1.31 1.713 2.658 4.06 3.585 6.023"></path><path fill="#373737" d="M723 88.122c-.022 6.303-2.185 12.124-5.841 16.878.086-.886.144-1.786.144-2.694.014-4.545-1.32-9.25-3.303-13.103L723 88v.122"></path><path fill="#373737" d="M723 85.24L713.616 88c-.91-1.6-2.437-3.69-3.616-5.119L721.387 78c.74 2.158 1.4 4.896 1.613 7.24"></path><path fill="#373737" d="M669 76.004c-2.33 1.848-4.999 4.54-7 6.996.45-4.175 2.282-8.806 4.243-12L669 76.004"></path><path fill="#373737" d="M672.296 65L675 73.102c-1.828.69-3.985 1.79-5.536 2.898-.749-1.79-1.618-3.854-2.464-5.88 1.378-1.812 3.453-3.74 5.296-5.12"></path><path fill="#373737" d="M680.4 60l1.6 11.172c-1.953.077-4.353.371-6.031.828-.55-2.601-1.287-6.054-1.969-9.267A31.753 31.753 0 01680.4 60"></path><path fill="#9B6D5C" d="M691.594 59.004c.137 0 .268.014.406.014-1.281 4.163-3.256 9.403-4.044 11.982-.437-.09-.512-.158-.956-.226l2.981-11.742c.788-.048.8-.028 1.613-.028"></path><path fill="#9B6D5C" d="M682.657 60c-.14 3.87.43 8.193.331 11-.654-.014-.67-.029-1.3-.007L680 60.632c1.101-.302 1.49-.417 2.657-.632"></path><path fill="#9B6D5C" d="M674.595 63c.487 3.317 1.013 6.882 1.405 9.568-.459.176-.543.2-.98.432L673 64.463c.61-.648.918-.911 1.595-1.463"></path><path fill="#9B6D5C" d="M666.994 69c.689 2.11 1.396 4.258 2.006 6.123-.463.427-.476.403-.909.877L666 70.801c.433-.964.47-.924.994-1.801"></path><path fill="#9B6D5C" d="M700 60.56L693.185 74c-.567-.204-.61-.204-1.185-.378L697.594 60c1.036.204 1.405.257 2.406.56"></path><path fill="#9B6D5C" d="M709 64.31L699.144 76c-.561-.302-.569-.294-1.144-.574L706.749 63c.969.508 1.348.707 2.251 1.31"></path><path fill="#9B6D5C" d="M717 70.39L705.985 79c-.489-.4-.475-.415-.985-.787L714.966 68c.72.765 1.398 1.559 2.034 2.39"></path><path fill="#9B6D5C" d="M722 79.046L710.88 84c-.43-.544-.415-.498-.88-1.02L721.21 77c.436.982.45 1.02.79 2.046"></path><path fill="#9B6D5C" d="M723 88.06l-9.313.94c-.284-.422-.359-.5-.687-.912L722.858 86c.09.675.142 1.368.142 2.06"></path><path fill="#FFF" d="M670 111l26 1.343s-5.052 9.23-13.445 8.629c-8.301-.587-12.313-8.028-12.555-9.972"></path><path fill="#000" d="M672.746 101.26c-.767 2.097-3.068 3.23-5.144 2.536-2.068-.694-3.118-2.959-2.351-5.056.767-2.097 3.068-3.23 5.144-2.536 2.067.694 3.126 2.959 2.35 5.056"></path><path fill="#000" d="M700.75 102.26c-.768 2.097-3.069 3.23-5.145 2.536-2.067-.702-3.126-2.959-2.35-5.056.766-2.097 3.067-3.23 5.143-2.536 2.068.694 3.118 2.959 2.351 5.056"></path><path fill="#9B6D5C" d="M637 331.750903L635.903226 345 623 345 625.222222 329 637 331.750903"></path><path fill="#9B6D5C" d="M610 323.752144L608.909836 337 596 337 598.223361 321 610 323.752144"></path><path fill="#246591" d="M660.864 233v4.244c0 4.686-2.634 7.325-7.008 8.048h-32.453c-9.304 0-15.295 8.156-16.233 17.426-1.234 12.205-4.49 37.368-7.168 57.65-.216 1.641 15.072 2.632 15.072 2.632l7.615-60.362c.065-.629.094-1.438.714-1.438h80.792c7.456 0 12.805-6.154 12.805-13.623V233h-54.136"></path><path fill="#FFF" d="M574 355L612 355 612 350 574 350z"></path><path fill="#373737" d="M595.8 329c2.803.24 4.628 2.759 4.628 5.893l10.617.795L614 350h-40v-3.704s17.606-10.189 20.576-11.778L595.8 329"></path><path fill="#2B72B6" d="M681.62 232v4.26c0 4.704-2.221 7.353-6.619 8.079h-26.93c-9.346 0-15.616 8.186-16.559 17.491-1.459 14.32-5.682 46.48-8.512 67.688L638.246 332l8.97-70.293c0-.624.232-1.401.856-1.401h54.055c7.496 0 12.873-6.177 12.873-13.674V232h-33.38"></path><path fill="#FFF" d="M599 362L640 362 640 357 599 357z"></path><path fill="#373737" d="M621.107 337c2.839.235 4.692 2.783 4.692 5.961l11.208.683L640 358h-41v-3.511s18.07-10.307 21.085-11.907l1.022-5.582"></path><path fill="#72B4E1" d="M714.658 178.69L732 172.682C730.67 156.305 714.607 137 688.679 137c-25.928 0-42.349 19.305-43.679 35.682l14.85 6.008V236h54.808v-57.31"></path><path fill="#9B6D5C" d="M699.999 138.657c-1.466-.342-2.315-.478-4.125-.727l-.937-9.56-10.49-.37-.396 9.808c-2.153.214-3.318.45-5.032.856-.044.506 0 .948.015 1.468.263 6.273 5.157 11.135 10.944 10.857 5.787-.278 10.27-5.596 10.006-11.869 0-.1.022-.363.015-.463"></path><path fill="#80B3DD" d="M640 327.291771L638.879121 333 622 330.142145 622.754579 324 640 327.291771"></path><path fill="#80B3DD" d="M614 320.284289L612.879121 326 596 323.142145 596.754579 317 614 320.284289"></path><path fill="#AFB4BC" d="M655.663 220H553.345c-1.86 0-3.478-.808-4.345-2h111c-.867 1.192-2.486 2-4.337 2"></path><path fill="#9B7166" d="M611.308 215h-11.609c-.706 0-1.328-.398-1.699-1h15c-.37.602-.993 1-1.692 1"></path><path fill="#C2C7D3" d="M597.207 214c.385.448 1.031.744 1.765.744h12.063c.727 0 1.373-.296 1.758-.744H661a3.38 3.38 0 01-.676 2H549.676c-.422-.587-.676-1.273-.676-2h48.207"></path><path fill="#AFB4BC" d="M611.308 215h-11.609c-.706 0-1.328-.39-1.699-1h15c-.37.61-.993 1-1.692 1"></path><path fill="#141313" d="M558 212.93c0 1.14.923 2.07 2.058 2.07h89.884c1.135 0 2.058-.93 2.058-2.07v-58.86c0-1.148-.923-2.07-2.058-2.07h-89.884a2.062 2.062 0 00-2.058 2.07v58.86"></path><path fill="#5B5A5A" d="M591.633244 215L574 215 619.429017 152 626 152 591.633244 215"></path><path fill="#434242" d="M568.816 215h-8.771c-1.127 0-2.045-.93-2.045-2.07V193.75L579.994 152H613l-44.184 63m35.896-61.427c-.368 0-.657.3-.657.673a.66.66 0 00.657.666c.362 0 .658-.3.658-.666a.666.666 0 00-.658-.673"></path><path fill="#000" d="M604 153.503a.5.5 0 101-.006.5.5 0 00-1 .006"></path><path fill="#333" d="M604.505 154.725c-.13 0-.23-.1-.23-.22 0-.13.1-.23.23-.23.12 0 .22.1.22.23 0 .12-.1.22-.22.22"></path><path fill="#373737" d="M563 209L646 209 646 157 563 157z"></path><path fill="#FFF" d="M602.724739 170L614 198 608.968641 198 598 170 602.724739 170"></path><path fill="#FFF" d="M619.891026 196L636 183.010966 617.610043 171 615 174.92709 627.997863 183.411085 616.899573 192.361885 619.891026 196"></path><path fill="#FFF" d="M591.110716 196L594.101104 192.361885 582.999288 183.411085 596 174.92709 593.390886 171 575 183.010966 591.110716 196"></path><path fill="#9B6D5C" d="M682.047 221c1.183 0 2.366-.022 3.578-.073 15.87-.643 28.58-9.768 36.767-26.39 3.715-7.54 5.663-14.97 6.608-19.537l-13.266 4.756c-.952 3.069-1.955 6.43-3.671 9.878-6.305 12.64-15.351 19.282-26.9 19.75-30.708 1.256-50.264-16.55-50.459-16.732L627 201.17c.902.833 21.77 19.829 55.047 19.829"></path><path fill="#B2B2B2" d="M245 319L255 319 255 280 245 280z"></path><path fill="#373737" d="M283 273c0 5.52-4.397 10-9.821 10H226.82c-5.424 0-9.821-4.48-9.821-10 0-5.527 4.397-10 9.821-10h46.358c5.424 0 9.821 4.473 9.821 10"></path><path fill="#373737" d="M243 348L258 348 258 311 243 311z"></path><path fill="#B2B2B2" d="M243 332L195 342.332598 195 348 243 342.000882 243 332"></path><path fill="#B2B2B2" d="M247 348L254 348 254 332 247 332z"></path><path fill="#373737" d="M202 357.003a6.002 6.002 0 01-6 5.997c-3.316 0-6-2.686-6-5.997a6 6 0 1112 0"></path><path fill="#B2B2B2" d="M258 332L306 342.332598 306 348 258 342.000882 258 332"></path><path fill="#373737" d="M299 357.003a6 6 0 006.003 5.997 5.998 5.998 0 005.997-5.997 6 6 0 10-12 0"></path><path fill="#373737" d="M257 357.003a6 6 0 01-6.003 5.997 5.998 5.998 0 01-5.997-5.997 6 6 0 1112 0"></path><path fill="#5454B5" d="M336.684 273H238.53c-7.309 0 14.814-19.899 14.74-27.148-.408-41.233-16.892-103.335-17.06-103.966-.89-3.35 1.124-6.785 4.5-7.677 3.37-.884 6.828 1.117 7.718 4.473.043.16 4.31 15.868 8.563 36.977 5.74 28.475 8.738 52.049 8.92 70.07.08 8.112 6.696 14.716 14.741 14.716h56.032c3.486 0 6.316 2.805 6.316 6.277 0 3.465-2.83 6.278-6.316 6.278"></path><path fill="#5454B5" d="M164 134.224777L242.521739 134 268 263 185.971014 260.346186 164 134.224777"></path><path fill="#6363CE" d="M259.684 273h-56.032c-7.301 0-14.172-2.826-19.329-7.95-5.12-5.096-7.98-11.89-8.052-19.117-.409-41.11-16.893-103.449-17.06-104.07-.89-3.347 1.123-6.773 4.493-7.654 3.377-.882 6.834 1.113 7.724 4.452.044.159 4.31 16.24 8.563 37.287 5.74 28.39 8.738 51.894 8.92 69.8
6162.08 8.087 6.696 14.672 14.741 14.672h56.032c3.486 0 6.316 2.797 6.316 6.259 0 3.455-2.83 6.259-6.316 6.259"></path><path fill="#373737" d="M244 285L256 285 256 282 244 282z"></path><path fill="#246591" d="M265.648 232v3.539c0 4.866 4.198 7.339 8.751 8.79h48.558c9.688 0 16.043 7.476 16.043 17.15V327h-17.43v-65.521c0-.645.69-1.197.043-1.197h-97.572c-7.764 0-15.041-6.258-15.041-14.017V232h56.648"></path><path fill="#2B72B6" d="M226.37 233v3.548c0 4.879 3.236 7.62 7.788 8.456l39.815-.073c12.08-.48 18.55 4.108 20.548 13.604L300 318.103 283.165 322l-6.992-59.568c-.13-.633-.159-.735-.789-.604l-51.8-.022c-7.744 0-14.584-6.725-14.584-14.505V233h17.37"></path><path fill="#F2C5AD" d="M289.159547 337L302 333.277718 298.840453 316 286 319.722282 289.159547 337"></path><path fill="#80B3DD" d="M282.146862 324L303 318.615725 300.853138 311 280 316.391473 282.146862 324"></path><path fill="#F2C5AD" d="M324 342L338 342 338 326 324 326z"></path><path fill="#FFF" d="M318 361L364 361 364 356 318 356z"></path><path fill="#373737" d="M340.025 341.147V335c-2.906.25-4.7 2.882-4.7 6.559h-10.477L319 357h45v-3.507c-5.086-4.706-23.975-12.346-23.975-12.346"></path><path fill="#FFF" d="M332 346.653913L287.322684 358 286 353.346087 330.684665 342 332 346.653913"></path><path fill="#373737" d="M303.15 331.891L301.571 326c-2.78.999-4.795 4.047-3.812 7.707l-10.13 2.72L286 353l44-11.827-.96-3.572c-6.484-3.092-25.89-5.71-25.89-5.71"></path><path fill="#80B3DD" d="M321 328L342 328 342 319 321 319z"></path><path fill="#5EC4C6" d="M208.684 177.063L191 175.181c.087-1.054 1.174-6.446 1.376-7.521 3.058-16.132 19.402-33.66 44.352-33.66 26.61 0 42.903 19.947 44.272 36.857l-15.808 6.206V237h-56.508v-59.937"></path><path fill="#F2C5AD" d="M226.003 135.121c1.535-.352 2.417-.503 4.314-.761l.986-9.972 10.985-.388.423 10.237c2.253.216 3.469.467 5.27.884.044.539 0 .991-.015 1.545-.274 6.544-5.404 11.616-11.467 11.322-6.056-.295-10.755-5.834-10.488-12.378.007-.108-.015-.381-.008-.489"></path><path fill="#EDBEA4" d="M276.991 98.361a7.99 7.99 0 01-8.35 7.63 7.99 7.99 0 01-7.632-8.352c.196-4.411 3.936-7.834 8.35-7.63a7.99 7.99 0 017.632 8.352"></path><path fill="#F2C5AD" d="M269.454 101.246c-.768 17.192-15.142 30.5-32.102 29.722-16.96-.779-30.088-15.35-29.32-32.542l.514-11.611c.312-6.933-.014-16.73 3.992-21.732 5.934-7.395 17.99-8.453 28.11-7.99 16.96.778 30.088 15.35 29.32 32.542l-.514 11.61"></path><path fill="#F2C5AD" d="M215.992 97.364c-.197 4.41-3.943 7.83-8.357 7.627a7.99 7.99 0 01-7.626-8.349c.196-4.416 3.936-7.83 8.357-7.634a8.001 8.001 0 017.626 8.356"></path><path fill="#BA6338" d="M212.32 94s-2.124-1.529-2.815-2.245c0 0-3.819-9.538-2.026-16.296.656-2.991 2.555-6.765 5.018-10.459L220 72.014c-3.091 4.476-6.12 11.088-7.68 21.986"></path><path fill="#BA6338" d="M263 69.293L269.182 67s5.93 8.348 3.01 22.753l-.733.247s-.318-14.426-8.459-20.707"></path><path fill="#A55532" d="M213 65.306l7.73 6.83s30.197 3.083 44.067-2.4c6.696-2.653 8.49-4.122 10.203-19.181-9.292 13.783-62.087-22.263-62 14.75"></path><path fill="#9B4B10" d="M241.998 103.546a.5.5 0 11-.996-.092.5.5 0 01.996.092"></path><path fill="#9B4B10" d="M244.999 101.55a.498.498 0 01-.544.448.51.51 0 01-.454-.547.497.497 0 01.544-.448.51.51 0 01.454.547"></path><path fill="#9B4B10" d="M248.998 104.549a.497.497 0 01-.543.449.504.504 0 01-.453-.547.5.5 0 01.996.098"></path><path fill="#9B4B10" d="M249.998 100.55a.491.491 0 01-.544.447.501.501 0 01-.452-.542.492.492 0 01.544-.452.503.503 0 01.452.548"></path><path fill="#9B4B10" d="M252.999 103.545a.5.5 0 11-.997-.09.492.492 0 01.542-.452.505.505 0 01.455.542"></path><path fill="#9B4B10" d="M256.998 105.544a.496.496 0 01-.538.454.509.509 0 01-.458-.548.501.501 0 01.996.094"></path><path fill="#9B4B10" d="M238.998 106.544a.506.506 0 01-.546.454.503.503 0 01-.45-.547.492.492 0 01.541-.448.503.503 0 01.455.541"></path><path fill="#9B4B10" d="M238.998 102.544a.497.497 0 01-.54.454.508.508 0 01-.456-.547.496.496 0 01.54-.448.5.5 0 01.456.541"></path><path fill="#9B4B10" d="M233.998 106.547a.493.493 0 01-.54.45.5.5 0 01-.456-.544.493.493 0 01.54-.45.5.5 0 01.456.544"></path><path fill="#000" d="M273.336 103.545c-.554 1.507-1.18 3.814-3.292 3.913l-13.015.152c-2.738.023-4.348-7.756-4.8-11.668-.087-.8.241-1.431.532-1.82.576-.76 1.479-1.24 2.36-1.248l17.829-.198c1.5-.007 2.257 1.447 2.25 3.174-.182.876-1.202 5.876-1.864 7.695zm-29.576-7.61c-.7 3.919-2.913 11.797-5.652 11.812l-13.014.16c-1.887.175-2.396-1.934-2.855-3.433-.554-1.812-1.013-7.36-1.136-8.235.102-1.728.626-3.129 2.134-3.136l17.828-.198c.874 0 1.748.464 2.272 1.218a2.4 2.4 0 01.423 1.811zM273.532 89l-18.513.267-13.743.228h-18.513c-2.549.023-4.668 2.382-4.756 5.343l-.007.084v.083c-.007.274.91 7.931 1.559 10.055.524 1.72 2.206 4.963 4.777 4.94l13.707-.1c4.683-.03 7.071-11.85 7.588-14.659.445-1.027 1.362-1.743 2.404-1.75.99-.008 1.828.632 2.236 1.583.298 2.535 1.93 14.728 6.693 14.69l13.699-.1c2.578-.014 4.457-3.287 5.098-5.015.78-2.131 2.148-9.811 2.207-10.085l.021-.107.008-.106c.094-2.969-1.908-5.366-4.465-5.35z"></path><path fill="#000" d="M219.164602 94.6135315L208 87 208.254867 88.6647873 220 101 219.164602 94.6135315"></path><path fill="#FFF" d="M236 111.312l25-.312s-3.448 8.066-10.587 8.91c-8.514 1.002-14.043-6.592-14.413-8.598"></path><path fill="#FFF" d="M264 121.427l.273 2.573a66.449 66.449 0 013.727-.553L266.74 121c-1.538.21-2.645.41-2.74.427"></path><path fill="#E0E0E0" d="M273.88 121h-.119c-.254 0-.507.007-.761.013l1.181 2.064c2.33.06 3.496.841 4.337 1.923l1.482-1.783c-1.19-1.222-2.989-2.217-6.12-2.217"></path><path fill="#E0E0E0" d="M283 132.686a122.014 122.014 0 00-1.646-4.686L280 129.704c.375 1.02.762 2.13 1.148 3.296l1.852-.314"></path><path fill="#5454B5" d="M280.309 126.048l-.093-.263c-.307-.882-.664-1.88-1.19-2.785L278 125.065c.258.55.472 1.153.697 1.787l.087.263c.307.858.626 1.833.95 2.885l1.266-1.887a65.896 65.896 0 00-.691-2.065"></path><path fill="#5454B5" d="M268 121.307l1.502 1.693a86.376 86.376 0 015.119-.214h.09c.1 0 .19 0 .289.005L273.87 121c-2.04.04-4.171.174-5.87.307"></path><path fill="#E0E0E0" d="M276 136l2.288 34.716c0 .709 4.351 1.284 9.72 1.284 5.36 0 9.711-.575 9.711-1.284L300 136h-24"></path><path fill="#C2C7D3" d="M300.813 134.718h-2.374c-.54-1.023-1.578-1.718-2.773
61-1.718h-15.332c-1.195 0-2.232.695-2.773 1.718h-2.381l-1.18 6.229c0 .582 6.27 1.053 13.996 1.053 7.734 0 14.004-.47 14.004-1.053l-1.187-6.23"></path><path fill="#F2C5AD" d="M290.56 215.993c-.118.007-.227.007-.344.007-3.331 0-6.472-1.466-9.327-4.376-1.976-1.997-3.813-4.677-5.622-8.19-2.715-5.246-5.365-12.438-7.89-21.37A211.688 211.688 0 01266 176.97l11.654-4.656c.351 1.387.725 2.795 1.105 4.21 5.63 20.658 10.11 25.508 11.39 26.521.586-.496 1.655-1.717 2.907-4.182 1.574-3.11 2.98-7.329 3.953-11.884 2.108-9.88 2.05-15.98-.154-22.69-.417-.21-1.56-.54-3.675-.525-2.298.014-4.655.402-6.068.632-.557.094-.989.165-1.376.208l-1.42-12.681c.11-.015.483-.072.783-.123 2.181-.359 6.244-1.034 10.365-.718 2.701.208 5.066.833 7.028 1.847 2.906 1.501 4.985 3.894 6.017 6.905 2.591 7.587 3.184 13.493 1.669 24.17-1.427 10.024-4.487 19.034-8.411 24.717-2.24 3.248-5.988 7.107-11.207 7.272"></path><path fill="#F2C5AD" d="M318 220v-12.718c-.52 0-52.212-.007-73.969-.425-3.969-.074-12.61-2.884-25.864-20.85l-7.521-9.385L196 175c2.622 4.63 6.752 11.492 11.863 18.427 12.61 17.136 24.693 25.927 35.926 26.147 21.874.419 73.691.426 74.211.426"></path><path fill="#C2C7D3" d="M230 220L278 220 278 218 230 218z"></path><path fill="#C2C7D3" d="M350.652523 220L268 220 282.347477 160 365 160 350.652523 220"></path><path fill="#FFF" d="M320.401038 179L322.283914 185.93218 329 187.160208 323.062268 192.421107 322.91401 200 317.361749 196.308651 310.556709 199.767474 313.062268 192.23218 309 186.789619 316.101557 185.815917 320.401038 179"></path><path fill="#E0E0E0" d="M229 230L660 230 660 220 229 220z"></path><g transform="translate(391 17)"><path fill="#7F5124" d="M97.522 25.976C95.356 13.813 87.42 1.548 67.07.106V.035c0-.007-.414-.015-.588-.022a63.371 63.371 0 00-2.035-.007 85.96 85.96 0 00-2.37.007c-.174.007-.821.015-.821.022v.065c-22.53 1.536-29.523 11.989-31.26 25.702-1.962 15.425-1.853 74.96-1.751 81.598 2.013 10.343 6.832 11.573 13.25 17.971 6.359 6.34 14.44 10.125 23.17 10.125 8.518 0 16.396-3.603 22.683-9.666 6.003-5.794 10.677-13.837 13.024-23.14.131-8.334.11-60.11-2.849-76.713"></path><path fill="#246591" d="M92.322 175.387v2.82c0 4.64 3.314 7.38 7.644 8.108h32.139c9.206 0 16.109 8.007 16.109 17.244l3.778 82.563h-15.106l-3.779-82.905c0-.62-.392-1.603-1.002-1.603h-80c-7.383 0-14.279-5.763-14.279-13.164v-13.063h54.496"></path><path fill="#2B72B6" d="M71.388 176.075v2.815c0 4.634 3.247 7.37 7.603 8.097h26.63c9.252 0 16.11 7.406 16.11 16.63v85.944H106.41v-85.944c0-.618-.175-1.353-.788-1.353H52.163c-7.413 0-14.337-5.754-14.337-13.145v-13.044h33.562"></path><path fill="#C6468F" d="M152.301 264.821v-6.21c-1.446.226-4.455 2.64-4.455 5.654l-11.688.373.347 15.026L134.11 293H174v-3.365c-5.786-3.73-16.896-9.693-19.818-11.215l-1.88-13.599"></path><path fill="#D84C96" d="M121.919 264.821v-6.21c-2.186.226-4.708 2.64-4.708 5.654l-11.87.373.291 15.026-2.47 13.336h39.89v-3.365c-5.102-3.73-16.659-9.693-19.603-11.215l-1.53-13.599"></path><path fill="#F2C5AD" d="M6.578 206.338c.059-.036 5.848-4.235 11.768-2.548 3.282.934 7.908 1.409 11.336-1.658 3.246-2.899 3.275-6.995 3.107-8.777l3.662-75.238-10.913-.504-3.691 75.815c-.154-.036-.322-.08-.504-.131C10.109 190.09.402 197.32 0 197.627l6.607 8.69-.029.021"></path><path fill="#F2C5AD" d="M125.519 147.876c9.922 0 19.077-5.883 25.777-16.28 6.21-9.653 9.637-22.888 9.637-35.993H150.01c0 22.57-11.215 41.243-24.491 41.243-9.842 0-18.982-10.374-22.745-25.925l-10.616 2.584c2.338 9.661 6.517 18.005 12.078 24.105 6.13 6.706 13.487 10.266 21.283 10.266"></path><path fill="#373737" d="M38.158 123.042l-16.15-5.934c1.3-16.185 17.392-35.26 42.742-35.26 25.343 0 41.239 19.075 42.539 35.26l-14.669 5.934v53.72H38.158v-53.72"></path><path fill="#F2C5AD" d="M54.335 82.37c1.441-.347 2.268-.494 4.046-.745l.929-9.719 10.302-.375.388 9.977c2.114.213 3.263.449 4.946.862.044.523 0 .965-.022 1.495-.25 6.382-5.063 11.326-10.748 11.039-5.678-.28-10.083-5.689-9.834-12.063.007-.103-.015-.368-.007-.471"></path><path fill="#F2C5AD" d="M95.593 45.997c.27 16.49-12.864 30.067-29.33 30.344-16.473.27-30.044-12.876-30.314-29.359l-.182-11.131c-.27-16.49 12.864-30.074 29.33-30.345 16.465-.27 30.044 12.877 30.313 29.36l.183 11.13"></path><path fill="#F2C5AD" d="M42.64 46.297a7.91 7.91 0 01-7.779 8.038 7.91 7.91 0 01-.26-15.817 7.911 7.911 0 018.038 7.779"></path><path fill="#000" d="M58.281 47.51c-.606 1.996-2.551 3.138-4.348 2.54-1.805-.598-2.774-2.703-2.175-4.707.607-2.004 2.552-3.138 4.349-2.54 1.805.598 2.773 2.703 2.174 4.707"></path><path fill="#000" d="M85.791 48.192c-.606 2.005-2.551 3.14-4.349 2.548-1.804-.598-2.773-2.704-2.174-4.708.607-2.005 2.552-3.14 4.356-2.541 1.797.598 2.766 2.704 2.167 4.7"></path><path fill="#FFF" d="M58.458 58.462l22.008.08s-3.45 6.64-8.95 7.383c-7.477 1.016-12.757-5.761-13.058-7.463"></path><path fill="#7F5124" d="M52.269 24.76s-10.593 23.275-12.55 48.834l-4.51-.73s-2.262-31.82.719-48.103h16.34"></path><path fill="#373737" d="M160.366 119.404a2.197 2.197 0 003.034.59 2.172 2.172 0 00.6-3.022l-24.506-36.223a2.192 2.192 0 00-3.04-.59 2.162 2.162 0 00-.594 3.015l24.506 36.23"></path><path fill="#F4AC89" d="M146.49 100.418a8.937 8.937 0 008.94 8.941 8.942 8.942 0 10-8.94-8.941"></path><g fill="#F7DF1E" transform="translate(66.024 109.36)"><path d="M12.302 9.627c.614.966 1.413 1.677 2.827 1.677 1.188 0 1.946-.572 1.946-1.362 0-.948-.78-1.283-2.086-1.834l-.717-.297c-2.068-.849-3.442-1.913-3.442-4.162C10.83 1.577 12.468 0 15.027 0c1.823 0 3.133.611 4.077 2.212l-2.232 1.381c-.492-.85-1.022-1.184-1.845-1.184-.84 0-1.371.514-1.371 1.184 0 .829.532 1.164 1.762 1.678l.716.295c2.436 1.007 3.81 2.033 3.81 4.34 0 2.487-2.026 3.85-4.749 3.85-2.662 0-4.381-1.223-5.223-2.825l2.33-1.304zm-9.997.338c.445.751.85 1.387 1.823 1.387.93 0 1.517-.347 1.517-1.694V.49h2.831v9.203c0 2.791-1.719 4.062-4.228 4.062-2.267 0-3.58-1.117-4.248-2.462l2.305-1.329z"></path></g><path fill="#7F5124" d="M51.963 5.161s-1.497 4.14 1.437 7.731c6.25 7.648 22.4 18.565 44.2 22.185 0 0 3.632-45.017-45.637-29.916"></path><path fill="#7F5124" d="M63.273 14.274S48 32.837 38.398 34.317C25.825 36.06 46.83 5.922 46.83 5.922l13.174-3.17 3.268 11.522"></path><g transform="translate(68.087 135.495)"><path fill="#C2C7D3" d="M80.948 0c.248 0 .49.052.7.141.22.092.41.222.563.385.16.162.285.354.372.569.08.213.117.447.11.694l-2.249 49.229c-.007.221-.073.43-.168.622-.094.19-.226.362-.386.505a1.88 1.88 0 01-.57.34 1.841 1.841 0 01-.671.125H4.045a1.88 1.88 0 01-1.241-.465 1.687 1.687 0 01-.387-.505 1.637 1.637 0 01-.168-.622L.001 1.789c-.007-.247.03-.481.117-.694a1.704 1.704 0 01.927-.953c.211-.09.452-.142.7-.142h79.203"></path><path fill="#FFF" d="M41.3468122 18.4054463L44.0185284 23.5984375 49.9751417 24.4254855 45.6463774 28.416355 46.6245467 33.9931255 41.3468122 31.3712381 36.0690776 33.9931255 37.047247 28.416355 32.7184827 24.4254855 38.6750959 23.5984375 41.3468122 18.4054463"></path></g></g><path fill="#F4F4F4" d="M487 315L528 315 528 310 487 310z"></path><path fill="#FFF" d="M500 289.5a3.5 3.5 0 11-7.002-.002 3.5 3.5 0 017.002.002"></path><path fill="#FFF" d="M456 315L497 315 497 310 456 310z"></path><path fill="#FFF" d="M471 289.5c0 1.93-1.57 3.5-3.5 3.5s-3.5-1.57-3.5-3.5 1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5"></path><g fill="#F7DF1E" transform="translate(116 152)"><path d="M12.336 9.797c.616.985 1.417 1.708 2.835 1.708 1.19 0 1.952-.582 1.952-1.387 0-.964-.782-1.305-2.093-1.866l-.718-.302c-2.074-.864-3.452-1.947-3.452-4.236C10.86 1.605 12.502 0 15.069 0c1.827 0 3.141.622 4.088 2.251l-2.238 1.406c-.493-.865-1.025-1.205-1.85-1.205-.842 0-1.375.522-1.375 1.205 0 .843.534 1.185 1.767 1.707l.718.301C18.621 6.69 20 7.734 20 10.082 20 12.613 17.967 14 15.237 14c-2.669 0-4.393-1.244-5.237-2.875l2.336-1.328zm-10.025.345c.447.765.852 1.411 1.828 1.411.933 0 1.521-.353 1.521-1.724V.5H8.5v9.366C8.5 12.707 6.776 14 4.26 14 1.986 14 .67 12.863 0 11.494l2.311-1.352z"></path></g><path fill="#000" d="M240.859 103.382c-.542 1.87-2.483 2.992-4.339 2.504-1.856-.487-2.92-2.398-2.38-4.267.543-1.87 2.485-2.992 4.34-2.505 1.856.487 2.92 2.398 2.379 4.268M260.859 103.382c-.542 1.87-2.483 2.992-4.339 2.504-1.856-.487-2.92-2.398-2.38-4.267.543-1.87 2.485-2.992 4.34-2.505 1.856.487 2.92 2.398 2.379 4.268"></path></g><path class="fill-black dark:fill-white" fill-opacity="0.5" d="M393.547 27l2.437-8.664h.18L398.602 27h2.382l3.524-12h-2.414l-2.336 8.773h-.117L397.297 15h-2.414l-2.36 8.813h-.117L390.055 15h-2.414l3.53 12h2.376zm13.724-13.852c.406 0 .753-.136 1.043-.41.289-.273.433-.6.433-.98 0-.386-.144-.715-.433-.988a1.464 1.464 0 00-1.043-.41c-.407 0-.754.136-1.043.41-.29.273-.434.602-.434.988 0 .38.145.707.434.98.289.274.636.41 1.043.41zM408.427 27V15h-2.336v12h2.336zm6.814.156a4.8 4.8 0 00.938-.09c.25-.054.442-.108.578-.16l-.422-1.93c-.078.016-.188.037-.328.063-.14.026-.305.04-.492.04-.256 0-.491-.041-.707-.122a1.033 1.033 0 01-.528-.46c-.135-.227-.203-.567-.203-1.02v-6.602h2.461V15h-2.461v-2.875h-2.336V15h-1.758v1.875h1.758v7.086c0 .643.13 1.19.389 1.64l.103.165c.328.479.758.833 1.29 1.062.53.23 1.104.339 1.718.328zm5.833-.156v-7.125c0-.635.124-1.178.371-1.629a2.51 2.51 0 011.024-1.
61027 3.07 3.07 0 011.48-.352c.807 0 1.438.244 1.89.73.454.488.68 1.171.68 2.051V27h2.336v-7.633c0-1-.17-1.834-.511-2.504-.341-.669-.82-1.173-1.438-1.511-.617-.339-1.337-.508-2.16-.508-.932 0-1.687.19-2.266.57a3.449 3.449 0 00-1.289 1.54h-.148V11h-2.305v16h2.336zm25.326 0v-2.078h-7.25V11h-2.414v16h9.664zm1.908 4.469c.645 0 1.213-.11 1.703-.328.49-.22.911-.542 1.265-.97.355-.426.646-.95.875-1.57l4.961-13.578L454.59 15l-3.04 9.313h-.124L448.385 15h-2.5l4.391 12.156-.289.797c-.297.776-.662 1.238-1.097 1.387-.435.148-.973.134-1.614-.043l-.562 1.914c.14.062.354.121.64.176.287.054.605.082.954.082zm14.439-4.235c.73 0 1.323-.122 1.781-.367.458-.245.82-.531 1.082-.86.263-.327.465-.619.606-.874h.195V27h2.281V11h-2.336v5.945h-.14c-.141-.25-.338-.539-.59-.867-.253-.328-.607-.616-1.063-.863-.455-.248-1.056-.371-1.8-.371-.964 0-1.826.245-2.586.734-.76.49-1.358 1.195-1.793 2.117-.435.922-.653 2.032-.653 3.328 0 1.297.215 2.408.645 3.332.43.925 1.023 1.636 1.781 2.133.758.498 1.621.746 2.59.746zm.516-1.992c-.693 0-1.275-.186-1.747-.558-.47-.373-.826-.88-1.066-1.52-.24-.64-.36-1.362-.36-2.164 0-.792.12-1.503.356-2.133.237-.63.59-1.127 1.059-1.492.468-.365 1.054-.547 1.758-.547.682 0 1.255.175 1.718.524.464.349.815.835 1.055 1.46s.36 1.355.36 2.188c0 .844-.122 1.583-.364 2.219-.242.635-.596 1.131-1.062 1.488-.467.357-1.036.535-1.707.535zm9.304-12.094c.407 0 .754-.136 1.043-.41.29-.273.434-.6.434-.98 0-.386-.145-.715-.434-.988a1.464 1.464 0 00-1.043-.41c-.406 0-.753.136-1.043.41-.289.273-.433.602-.433.988 0 .38.144.707.433.98.29.274.637.41 1.043.41zM473.724 27V15h-2.336v12h2.336zm6.001.266c.662 0 1.23-.097 1.704-.29.474-.192.862-.434 1.164-.726.302-.292.528-.589.68-.89h.093V27h2.281v-7.969c0-.875-.15-1.587-.453-2.136-.302-.55-.689-.973-1.16-1.27a4.565 4.565 0 00-1.516-.613 7.523 7.523 0 00-1.527-.168 6.88 6.88 0 00-2.07.308 4.661 4.661 0 00-1.738.985c-.503.45-.885 1.04-1.145 1.77l2.195.5c.172-.423.483-.807.934-1.153.45-.346 1.069-.52 1.855-.52.756 0 1.325.188 1.707.563.383.375.575.904.575 1.586v.055c0 .28-.102.484-.305.609s-.529.215-.977.27c-.448.054-1.03.123-1.75.206-.567.068-1.125.167-1.672.297a5.508 5.508 0 00-1.484.578 2.883 2.883 0 00-1.055 1.04c-.26.437-.39.994-.39 1.671 0 .787.178 1.45.535 1.993.357.541.842.954 1.457 1.238.615.284 1.302.426 2.062.426zm.508-1.875c-.661 0-1.205-.148-1.633-.442-.427-.294-.64-.73-.64-1.308 0-.417.11-.752.332-1.004.221-.253.518-.447.89-.582a5.718 5.718 0 011.239-.29l.719-.097c.286-.04.58-.083.882-.133.302-.05.572-.11.809-.18.237-.07.397-.147.48-.23v1.547c0 .474-.12.918-.363 1.332a2.706 2.706 0 01-1.055 1.004c-.46.255-1.014.383-1.66.383zM495.926 27v-6.977h7.976V27h2.422V11h-2.422v6.953h-7.976V11h-2.414v16h2.414zm16.586.266c.662 0 1.23-.097 1.703-.29.474-.192.862-.434 1.164-.726.302-.292.529-.589.68-.89h.094V27h2.28v-7.969c0-.875-.15-1.587-.452-2.136-.302-.55-.689-.973-1.16-1.27a4.565 4.565 0 00-1.516-.613 7.523 7.523 0 00-1.527-.168 6.88 6.88 0 00-2.07.308 4.661 4.661 0 00-1.739.985c-.503.45-.884 1.04-1.144 1.77l2.195.5c.172-.423.483-.807.933-1.153.451-.346 1.07-.52 1.856-.52.755 0 1.324.188 1.707.563.383.375.574.904.574 1.586v.055c0 .28-.101.484-.305.609-.203.125-.528.215-.976.27-.448.054-1.031.123-1.75.206-.568.068-1.125.167-1.672.297a5.508 5.508 0 00-1.484.578 2.883 2.883 0 00-1.055 1.04c-.26.437-.39.994-.39 1.671 0 .787.178 1.45.535 1.993.356.541.842.954 1.457 1.238.614.284 1.302.426 2.062.426zm.508-1.875c-.662 0-1.206-.148-1.633-.442-.427-.294-.64-.73-.64-1.308 0-.417.11-.752.331-1.004.222-.253.519-.447.891-.582a5.718 5.718 0 011.238-.29l.72-.097c.286-.04.58-.083.882-.133.302-.05.572-.11.809-.18.237-.07.397-.147.48-.23v1.547c0 .474-.121.918-.363 1.332a2.706 2.706 0 01-1.055 1.004c-.46.255-1.014.383-1.66.383zM523.25 27V11h-2.336v16h2.336zm4.846 0V11h-2.336v16h2.336zm3.69-13.852c.405 0 .753-.136 1.042-.41.29-.273.434-.6.434-.98 0-.386-.145-.715-.434-.988a1.464 1.464 0 00-1.043-.41c-.406 0-.754.136-1.043.41-.289.273-.433.602-.433.988 0 .38.144.707.433.98.29.274.637.41 1.043.41zM532.941 27V15h-2.336v12h2.336zm7.682.242c.875 0 1.655-.134 2.34-.402a4.598 4.598 0 001.71-1.133 3.994 3.994 0 00.95-1.707l-2.211-.398c-.14.375-.344.69-.61.945-.265.255-.58.446-.945.574a3.646 3.646 0 01-1.21.192c-.683 0-1.28-.148-1.79-.442a3.002 3.002 0 01-1.191-1.285c-.284-.563-.426-1.245-.426-2.047l.003.165h8.528v-.829c0-1.089-.145-2.014-.437-2.777-.292-.763-.69-1.384-1.195-1.864a4.768 4.768 0 00-1.711-1.054 5.88 5.88 0 00-1.97-.336c-1.114 0-2.086.263-2.917.789-.83.526-1.477 1.258-1.938 2.195-.46.938-.691 2.021-.691 3.25 0 1.245.23 2.33.691 3.254.461.925 1.118 1.64 1.97 2.148.85.508 1.868.762 3.05.762zm-3.375-7.324c.032-.503.161-.974.387-1.414.263-.513.638-.93 1.125-1.25.487-.32 1.058-.48 1.714-.48.605 0 1.132.137 1.583.413.45.277.8.653 1.05 1.13.25.476.375 1.022.375 1.636l-6.235.001.001-.036z"></path><path class="fill-black dark:fill-white" fill-opacity="0.5" d="M41.063 54.266c.661 0 1.229-.097 1.703-.29.474-.192.862-.434 1.164-.726.302-.292.528-.589.68-.89h.093V54h2.281v-7.969c0-.875-.15-1.587-.453-2.136-.302-.55-.689-.973-1.16-1.27a4.565 4.565 0 00-1.516-.613 7.523 7.523 0 00-1.527-.168 6.88 6.88 0 00-2.07.308 4.661 4.661 0 00-1.738.985c-.503.45-.885 1.04-1.145 1.77l2.195.5c.172-.423.483-.807.934-1.153.45-.346 1.069-.52 1.855-.52.756 0 1.325.188 1.707.563.383.375.575.904.575 1.586v.054c0 .282-.102.485-.305.61s-.529.215-.977.27c-.448.054-1.03.123-1.75.206-.567.068-1.125.167-1.672.297a5.508 5.508 0 00-1.484.578 2.883 2.883 0 00-1.055 1.04c-.26.437-.39.994-.39 1.671 0 .787.178 1.45.535 1.993.357.541.842.954 1.457 1.238.615.284 1.302.426 2.063.426zm.507-1.875c-.661 0-1.205-.148-1.633-.442-.427-.294-.64-.73-.64-1.308 0-.417.11-.752.332-1.004.221-.253.518-.447.89-.582a5.718 5.718 0 011.239-.29c.193-.025.432-.058.719-.097.286-.04.58-.083.882-.133.302-.05.572-.11.809-.18.237-.07.397-.147.48-.23v1.547c0 .474-.12.918-.363 1.332a2.706 2.706 0 01-1.055 1.004c-.46.255-1.014.383-1.66.383zM51.802 54v-7.125c0-.635.12-1.178.363-1.629.242-.45.573-.793.992-1.027.42-.235.9-.352 1.442-.352.791 0 1.414.246 1.867.738.453.493.68 1.174.68 2.043V54h2.335v-7.633c0-.99-.169-1.82-.507-2.492-.339-.672-.815-1.178-1.43-1.52-.615-.34-1.33-.511-2.148-.511-.902 0-1.648.192-2.239.578a3.422 3.422 0 00-1.3 1.531h-.149V42h-2.242v12h2.336zm14.67.234c.73 0 1.323-.122 1.782-.367.458-.245.819-.531 1.082-.86.263-.327.464-.619.605-.874h.195V54h2.282V38h-2.336v5.945h-.14c-.142-.25-.338-.539-.59-.867-.253-.328-.608-.616-1.063-.863-.456-.248-1.056-.371-1.801-.371-.964 0-1.826.245-2.586.734-.76.49-1.358 1.195-1.793 2.117-.435.922-.652 2.032-.652 3.328 0 1.297.215 2.408.644 3.332.43.925 1.024 1.636 1.781 2.133.758.498 1.622.746 2.59.746zm.516-1.992c-.693 0-1.275-.186-1.746-.558-.471-.373-.827-.88-1.067-1.52s-.359-1.362-.359-2.164c0-.792.119-1.503.356-2.133.237-.63.59-1.127 1.058-1.492.469-.365 1.055-.547 1.758-.547.682 0 1.255.175 1.719.524.463.349.815.836 1.054 1.46.24.626.36 1.355.36 2.188 0 .844-.121 1.583-.364 2.219-.242.635-.596 1.131-1.062 1.488-.466.357-1.035.535-1.707.535zM81.848 54l1.465-4.234h6.251L91.027 54h2.563l-5.758-16h-2.789l-5.758 16h2.563zm7.015-6.265h-4.847l2.363-6.829h.125l2.359 6.829zm10.52 6.5c.73 0 1.324-.123 1.782-.368.459-.245.82-.531 1.082-.86.263-.327.465-.619.606-.874h.195V54h2.281V38h-2.336v5.945h-.14c-.14-.25-.338-.539-.59-.867-.253-.328-.607-.616-1.063-.863-.455-.248-1.056-.371-1.8-.371-.964 0-1.826.245-2.586.734-.76.49-1.358 1.195-1.793 2.117-.435.922-.653 2.032-.653 3.328 0 1.297.215 2.408.645 3.332.43.925 1.023 1.636 1.781 2.133.758.498 1.621.746 2.59.746zm.517-1.993c-.693 0-1.275-.186-1.747-.558-.47-.373-.826-.88-1.066-1.52-.24-.64-.36-1.362-.36-2.164 0-.792.12-1.503.356-2.133.237-.63.59-1.127 1.059-1.492s1.054-.547 1.758-.547c.682 0 1.255.175 1.718.524.464.349.815.836 1.055 1.46.24.626.36 1.355.36 2.188 0 .844-.122 1.583-.364 2.219-.242.635-.596 1.131-1.062 1.488-.467.357-1.036.535-1.707.535zm12.617 1.992c.73 0 1.323-.122 1.781-.367.459-.245.82-.531 1.082-.86.263-.327.465-.619.606-.874h.195V54h2.281V38h-2.336v5.945h-.14c-.14-.25-.338-.539-.59-.867-.253-.328-.607-.616-1.063-.863-.455-.248-1.056-.371-1.8-.371-.964 0-1.826.245-2.586.734-.76.49-1.358 1.195-1.793 2.117-.435.922-.653 2.032-.653 3.328 0 1.297.215 2.408.645 3.332.43.925 1.023 1.636 1.781 2.133.758.498 1.621.746 2.59.746zm.516-1.992c-.693 0-1.275-.186-1.746-.558-.472-.373-.827-.88-1.067-1.52s-.36-1.362-.36-2.164c0-.792.12-1.503.356-2.133.237-.63.59-1.127 1.059-1.492s1.054-.547 1.758-.547c.682 0 1.255.175 1.718.524.464.349.815.836 1.055 1.46.24.626.36 1.355.36 2.188 0 .844-.122 1.583-.364 2.219-.242.635-.596 1.131-1.062 1.488-.467.357-1.036.535-1.707.535zm9.601 6.227c.646 0 1.214-.11 1.704-.328.49-.22.911-.542 1.265-.97.354-.426.646-.95.875-1.57l4.961-13.578-2.523-.023-3.04 9.313h-.124L122.712 42h-2.5l4.391 12.156-.289.797c-.297.776-.663 1.238-1.098 1.387-.434.148-.972.134-1.613-.043l-.562 1.914c.14.062.354.121.64.176.287.054.604.082.953.082zm22.448-4.25c1.38 0 2.613-.33 3.699-.989 1.086-.658 1.941-1.601 2.566-2.828.625-1.226.938-2.694.938-4.402 0-1.708-.313-3.176-.938-4.402-.625-1.227-1.48-2.17-2.566-2.828-1.086-.66-2.32-.989-3.7-.989-1.385 0-2.62.33-3.706.989-1.086.658-1.942 1.601-2.567 2.828-.625 1.226-.937 2.694-.937 4.402 0 1.703.312 3.17.937 4.398.625 1.23 1.48 2.174 2.567 2.832 1.086.66 2.321.989 3.707.989zm0-2.203c-.922 0-1.745-.23-2.47-.692-.723-.46-1.295-1.138-1.714-2.031-.42-.893-.629-1.99-.629-3.293 0-1.302.21-2.4.63-3.293.418-.893.99-1.57 1.714-2.031.724-.461 1.547-.692 2.469-.692.916 0 1.738.23 2.465.692.726.46 1.299 1.138 1.718 2.031.42.893.63 1.99.63 3.293 0 1.302-.21 2.4-.63 3.293-.419.893-.992 1.57-1.718 2.031-.727.461-1.549.692-2.465.692zm13.708 2.226c.968 
610 1.821-.159 2.558-.476.737-.318 1.313-.757 1.727-1.317.414-.56.621-1.199.621-1.918 0-.849-.27-1.539-.813-2.07-.541-.531-1.364-.925-2.468-1.18l-1.907-.437c-.661-.157-1.14-.357-1.437-.602a1.194 1.194 0 01-.445-.969c0-.463.221-.842.664-1.136.442-.295.995-.442 1.656-.442.484 0 .888.078 1.21.235.324.156.58.356.77.601.19.245.33.503.418.774l2.118-.375c-.24-.938-.732-1.687-1.477-2.246-.745-.56-1.766-.84-3.062-.84-.901 0-1.701.15-2.399.449-.698.3-1.245.715-1.64 1.246-.396.531-.594 1.151-.594 1.86 0 .854.267 1.56.8 2.117.534.557 1.361.963 2.481 1.218l2.031.446c.573.13.999.323 1.278.578.278.255.418.57.418.945 0 .464-.23.856-.688 1.176-.458.32-1.07.48-1.836.48-.703 0-1.273-.15-1.71-.449-.438-.3-.727-.743-.868-1.332l-2.258.344c.193 1.062.714 1.881 1.563 2.457.849.575 1.945.863 3.289.863zm9.173-.242v-7.398c0-.542.114-1.019.34-1.43a2.57 2.57 0 01.899-.965 2.27 2.27 0 011.222-.348c.651 0 1.18.198 1.586.594.407.396.61.92.61 1.57V54h2.328v-7.648c0-.73.21-1.327.633-1.793.421-.467 1.013-.7 1.773-.7.615 0 1.143.183 1.586.547.443.365.664.953.664 1.766V54h2.336v-8.047c0-1.375-.345-2.404-1.035-3.086-.69-.682-1.58-1.023-2.668-1.023-.865 0-1.61.191-2.235.574a3.4 3.4 0 00-1.367 1.535h-.125c-.26-.656-.662-1.172-1.207-1.547-.544-.375-1.217-.562-2.02-.562-.79 0-1.47.186-2.038.558-.568.373-.977.89-1.227 1.551h-.148V42h-2.243v12h2.336zm19.965.266c.661 0 1.229-.097 1.703-.29.474-.192.862-.434 1.164-.726.302-.292.529-.589.68-.89h.093V54h2.282v-7.969c0-.875-.151-1.587-.454-2.136-.302-.55-.688-.973-1.16-1.27a4.565 4.565 0 00-1.515-.613 7.523 7.523 0 00-1.528-.168 6.88 6.88 0 00-2.07.308 4.661 4.661 0 00-1.738.985c-.503.45-.884 1.04-1.145 1.77l2.196.5c.171-.423.483-.807.933-1.153.45-.346 1.07-.52 1.856-.52.755 0 1.324.188 1.707.563.382.375.574.904.574 1.586v.054c0 .282-.102.485-.305.61s-.528.215-.976.27c-.448.054-1.032.123-1.75.206-.568.068-1.125.167-1.672.297a5.508 5.508 0 00-1.485.578 2.883 2.883 0 00-1.054 1.04c-.26.437-.391.994-.391 1.671 0 .787.178 1.45.535 1.993.357.541.843.954 1.457 1.238.615.284 1.302.426 2.063.426zm.508-1.875c-.662 0-1.206-.148-1.633-.442-.427-.294-.64-.73-.64-1.308 0-.417.11-.752.331-1.004.221-.253.518-.447.89-.582a5.718 5.718 0 011.239-.29c.193-.025.432-.058.719-.097.286-.04.58-.083.883-.133.302-.05.571-.11.808-.18.237-.07.397-.147.48-.23v1.547c0 .474-.12.918-.363 1.332a2.706 2.706 0 01-1.054 1.004c-.461.255-1.015.383-1.66.383zM198.667 54v-7.125c0-.635.121-1.178.363-1.629.242-.45.573-.793.992-1.027.42-.235.9-.352 1.442-.352.792 0 1.414.246 1.867.738.453.493.68 1.174.68 2.043V54h2.336v-7.633c0-.99-.17-1.82-.508-2.492-.339-.672-.815-1.178-1.43-1.52-.614-.34-1.33-.511-2.148-.511-.901 0-1.647.192-2.239.578a3.422 3.422 0 00-1.3 1.531h-.149V42h-2.242v12h2.336zm11.358-13.852c.406 0 .754-.136 1.043-.41.29-.273.434-.6.434-.98 0-.386-.145-.715-.434-.988a1.464 1.464 0 00-1.043-.41c-.406 0-.754.136-1.043.41-.289.273-.434.602-.434.988 0 .38.145.707.434.98.29.274.637.41 1.043.41zM211.181 54V42h-2.336v12h2.336z"></path></g></g></g></svg>
62 </div> </section> <section class="mb-24"> <h2 class="mb-8 bg-th-bg font-lexend text-2xl font-medium">
63Design Patterns
64</h2> <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3"> <a class="block overflow-hidden rounded-xl border border-th-border no-underline transition-transform hover:scale-105" href="design-patterns/introduction"> <div> <img src="/_astro/introduction.Be4Wh4Sj_eHtGg.webp" srcset="/_astro/introduction.Be4Wh4Sj_ZvwBDv.webp 240w, /_astro/introduction.Be4Wh4Sj_Z2rqE2q.webp 540w, /_astro/introduction.Be4Wh4Sj_ZpmPCL.webp 720w, /_astro/introduction.Be4Wh4Sj_eHtGg.webp 1920w" alt="Design Pattern 소개" class="aspect-[1393/783] max-w-full" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 1920px" width="1920" height="1080" decoding="async"> </div> <div class="p-4 pb-8"> <h3 class="mb-2 text-lg font-medium text-th-text"> Design Pattern 소개 </h3> <p class="break-keep tracking-tight text-th-text-secondary"> 디자인 패턴에 대한 소개 </p> </div> </a><a class="block overflow-hidden rounded-xl border border-th-border no-underline transition-transform hover:scale-105" href="design-patterns/singleton-pattern"> <div> <img src="/_astro/singleton.IalggT49_ZpdcFd.webp" srcset="/_astro/singleton.IalggT49_Z1xz6v4.webp 240w, /_astro/singleton.IalggT49_1AHYTW.webp 540w, /_astro/singleton.IalggT49_Z1rpkuk.webp 720w, /_astro/singleton.IalggT49_ZpdcFd.webp 1920w" alt="Singleton 패턴" class="aspect-[1393/783] max-w-full" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 1920px" width="1920" height="1080" decoding="async"> </div> <div class="p-4 pb-8"> <h3 class="mb-2 text-lg font-medium text-th-text"> Singleton 패턴 </h3> <p class="break-keep tracking-tight text-th-text-secondary"> 앱 전체에서 공유 및 사용되는 단일 인스턴스 </p> </div> </a><a class="block overflow-hidden rounded-xl border border-th-border no-underline transition-transform hover:scale-105" href="design-patterns/proxy-pattern"> <div> <img src="/_astro/proxy-pattern.1fmKh1dq_1yH2zu.webp" srcset="/_astro/proxy-pattern.1fmKh1dq_ZwAK5O.webp 240w, /_astro/proxy-pattern.1fmKh1dq_Z2suMtJ.webp 540w, /_astro/proxy-pattern.1fmKh1dq_ZqqY55.webp 720w, /_astro/proxy-pattern.1fmKh1dq_1yH2zu.webp 1920w" alt="Proxy 패턴" class="aspect-[1393/783] max-w-full" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 1920px" width="1920" height="1080" decoding="async"> </div> <div class="p-4 pb-8"> <h3 class="mb-2 text-lg font-medium text-th-text"> Proxy 패턴 </h3> <p class="break-keep tracking-tight text-th-text-secondary"> 대상 객체에 대하여 읽기 및 쓰기를 직접 제어한다 </p> </div> </a><a class="block overflow-hidden rounded-xl border border-th-border no-underline transition-transform hover:scale-105" href="design-patterns/provider-pattern"> <div> <img src="/_astro/provider-pattern.ClvvoOZs_ZUpkhL.webp" srcset="/_astro/provider-pattern.ClvvoOZs_Z2m836C.webp 240w, /_astro/provider-pattern.ClvvoOZs_Ma3j
64o.webp 540w, /_astro/provider-pattern.ClvvoOZs_Z2fXh5S.webp 720w, /_astro/provider-pattern.ClvvoOZs_ZUpkhL.webp 1920w" alt="Provider 패턴" class="aspect-[1393/783] max-w-full" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 1920px" width="1920" height="1080" decoding="async"> </div> <div class="p-4 pb-8"> <h3 class="mb-2 text-lg font-medium text-th-text"> Provider 패턴 </h3> <p class="break-keep tracking-tight text-th-text-secondary"> 여러 자식 컴포넌트 간에 데이터를 공유한다 </p> </div> </a><a class="block overflow-hidden rounded-xl border border-th-border no-underline transition-transform hover:scale-105" href="design-patterns/prototype-pattern"> <div> <img src="/_astro/prototype-pattern.DnDxySoT_ZlTcov.webp" srcset="/_astro/prototype-pattern.DnDxySoT_1syBy9.webp 240w, /_astro/prototype-pattern.DnDxySoT_ZskpOL.webp 540w, /_astro/prototype-pattern.DnDxySoT_1yInyS.webp 720w, /_astro/prototype-pattern.DnDxySoT_ZlTcov.webp 1920w" alt="Prototype 패턴" class="aspect-[1393/783] max-w-full" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 1920px" width="1920" height="1080" decoding="async"> </div> <div class="p-4 pb-8"> <h3 class="mb-2 text-lg font-medium text-th-text"> Prototype 패턴 </h3> <p class="break-keep tracking-tight text-th-text-secondary"> 동일 타입의 여러 객체들이 프로퍼티를 공유한다 </p> </div> </a><a class="block overflow-hidden rounded-xl border border-th-border no-underline transition-transform hover:scale-105" href="design-patterns/container-presentational-pattern"> <div> <img src="/_astro/container-presentational-pattern.DXsXjUmg_26G395.webp" srcset="/_astro/container-presentational-pattern.DXsXjUmg_ZijLVu.webp 240w, /_astro/container-presentational-pattern.DXsXjUmg_Z2edOkp.webp 540w, /_astro/container-presentational-pattern.DXsXjUmg_Zca0UK.webp 720w, /_astro/container-presentational-pattern.DXsXjUmg_26G395.webp 1920w" alt="Container/Presentational 패턴" class="aspect-[1393/783] max-w-full" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 1920px" width="1920" height="1080" decoding="async"> </div> <div class="p-4 pb-8"> <h3 class="mb-2 text-lg font-medium text-th-text"> Container/Presentational 패턴 </h3> <p class="break-keep tracking-tight text-th-text-secondary"> 비즈니스 로직으로부터 뷰를 분리하여 관심사의 분리(SoC) 를 강제한다 </p> </div> </a><a class="block overflow-hidden rounded-xl border border-th-border no-underline transition-transform hover:scale-105" href="design-patterns/observer-pattern"> <div> <img src="/_astro/observer-pattern.DSc5XXOC_1n9lVm.webp" srcset="/_astro/observer-pattern.DSc5XXOC_28rjxm.webp 240w, /_astro/observer-pattern.DSc5XXOC_cxh9r.webp 540w, /_astro/observer-pattern.DSc5XXOC_2eB5y6.webp 720w, /_astro/observer-pattern.DSc5XXOC_1n9lVm.webp 1920w" alt="Observer 패턴" class="aspect-[1393/783] max-w-full" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 1920px" width="1920" height="1080" decoding="async"> </div> <div class="p-4 pb-8"> <h3 class="mb-2 text-lg font-medium text-th-text"> Observer 패턴 </h3> <p class="break-keep tracking-tight text-th-text-secondary"> Observable을 활용해 Subscriber에게 이벤트 발생을 알린다 </p> </div> </a><a class="block overflow-hidden rounded-xl border border-th-border no-underline transition-transform hover:scale-105" href="design-patterns/module-pattern"> <div> <img src="/_astro/module-pattern.CVgNVB_c_Z2fB0zf.webp" srcset="/_astro/module-pattern.CVgNVB_c_Z2cE9kT.webp 240w, /_astro/module-pattern.CVgNVB_c_VCW57.webp 540w, /_astro/module-pattern.CVgNVB_c_Z26unka.webp 720w, /_astro/module-pattern.CVgNVB_c_Z2fB0zf.webp 1920w" alt="Module 패턴" class="aspect-[1393/783] max-w-full" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 1920px" width="1920" height="1080" decoding="async"> </div> <div class="p-4 pb-8"> <h3 class="mb-2 text-lg font-medium text-th-text">
64 Module 패턴 </h3> <p class="break-keep tracking-tight text-th-text-secondary"> 코드를 재사용 가능하면서도 작게 나눈다 </p> </div> </a><a class="block overflow-hidden rounded-xl border border-th-border no-underline transition-transform hover:scale-105" href="design-patterns/mixin-pattern"> <div> <img src="/_astro/mixin-pattern.BDkZx5wT_Z1Pmcgg.webp" srcset="/_astro/mixin-pattern.BDkZx5wT_Zf23ye.webp 240w, /_astro/mixin-pattern.BDkZx5wT_Z2aV5W9.webp 540w, /_astro/mixin-pattern.BDkZx5wT_Z8Rhxu.webp 720w, /_astro/mixin-pattern.BDkZx5wT_Z1Pmcgg.webp 1920w" alt="Mixin 패턴" class="aspect-[1393/783] max-w-full" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 1920px" width="1920" height="1080" decoding="async"> </div> <div class="p-4 pb-8"> <h3 class="mb-2 text-lg font-medium text-th-text"> Mixin 패턴 </h3> <p class="break-keep tracking-tight text-th-text-secondary"> 상속 없이 객체에 기능을 추가한다 </p> </div> </a><a class="block overflow-hidden rounded-xl border border-th-border no-underline transition-transform hover:scale-105" href="design-patterns/mediator-middleware-pattern"> <div> <img src="/_astro/mediator-middleware-pattern.CExltaOr_Z7HpWL.webp" srcset="/_astro/mediator-middleware-pattern.CExltaOr_119QSN.webp 240w, /_astro/mediator-middleware-pattern.CExltaOr_ZTJau7.webp 540w, /_astro/mediator-middleware-pattern.CExltaOr_17jCTx.webp 720w, /_astro/mediator-middleware-pattern.CExltaOr_Z7HpWL.webp 1920w" alt="Mediator/Middleware 패턴" class="aspect-[1393/783] max-w-full" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 1920px" width="1920" height="1080" decoding="async"> </div> <div class="p-4 pb-8"> <h3 class="mb-2 text-lg font-medium text-th-text"> Mediator/Middleware 패턴 </h3> <p class="break-keep tracking-tight text-th-text-secondary"> 중재자 역할을 하는 객체 통해 컴포넌트들이 서로 통신하도록 한다 </p> </div> </a><a class="block overflow-hidden rounded-xl border border-th-border no-underline transition-transform hover:scale-105" href="design-patterns/hoc-pattern"> <div> <img src="/_astro/hoc-pattern.J1YZErYs_2v6m9n.webp" srcset="/_astro/hoc-pattern.J1YZErYs_Zrf83.webp 240w, /_astro/hoc-pattern.J1YZErYs_Z1VlhvX.webp 540w, /_astro/hoc-pattern.J1YZErYs_5HvRG.webp 720w, /_astro/hoc-pattern.J1YZErYs_2v6m9n.webp 1920w" alt="HOC 패턴" class="aspect-[1393/783] max-w-full" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 1920px" width="1920" height="1080" decoding="async"> </div> <div class="p-4 pb-8"> <h3 class="mb-2 text-lg font-medium text-th-text"> HOC 패턴 </h3> <p class="break-keep tracking-tight text-th-text-secondary"> 앱 전반적으로 재사용 가능한 로직을 prop으로 컴포넌트에게 제공한다 </p> </div> </a><a class="block overflow-hidden rounded-xl border border-th-border no-underline transition-transform hover:scale-105" href="design-patterns/render-props-pattern"> <div> <img src="/_astro/render-props-pattern.q5GjPBkM_1ghq62.webp" srcset="/_astro/render-props-pattern.q5GjPBkM_1OOGzw.webp 240w, /_astro/render-props-pattern.q5GjPBkM_Z64kNo.webp 540w, /_astro/render-props-pattern.q5GjPBkM_1UYsAg.webp 720w, /_astro/render-props-pattern.q5GjPBkM_1ghq62.webp 1920w" alt="Render Props 패턴" class="aspect-[1393/783] max-w-full" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 1920px" width="1920" height="1080" decoding="async"> </div> <div class="p-4 pb-8"> <h3 class="mb-2 text-lg font-medium text-th-text"> Render Props 패턴 </h3> <p class="break-keep tracking-tight text-th-text-secondary"> JSX 엘리먼트를 props를 통해 컴포넌트에게 전달한다 </p> </div> </a><a class="block overflow-hidden rounded-xl border border-th-border no-underline transition-transform hover:scale-105" href="design-patterns/hooks-pattern"> <div> <img src="/_astro/hooks-pattern.B5Y6BlE1_Z2hzoXb.webp" srcset="/_astro/hooks-pattern.B5Y6BlE1_Z2uyCaA.webp 240w, /_astro/hooks-pattern.B5Y6BlE1_DItfq.webp 540w, /_astro/hooks-pattern.B5Y6BlE1_Z2ooQ9Q.webp 720w, /_astro/hooks-pattern.B5Y6BlE1_Z2hzoXb.webp 1920w" alt="Hooks 패턴" class="aspect-[1393/783] max-w-full" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 1920px" width="1920" height="1080" decoding="async"> </div> <div class="p-4 pb-8"> <h3 class="mb-2 text-lg font-medium text-th-text"> Hooks 패턴 </h3> <p class="break-keep tracking-tight text-th-text-secondary"> 앱 전체에서 함수를 통해 상태를 가진 로직을 여러 컴포넌트들에서 사용한다 </p> </div> </a><a class="block overflow-hidden rounded-xl border border-th-border no-underline transition-transform hover:scale-105" href="design-patterns/flyweight-pattern"> <div> <img src="/_astro/flyweight-pattern.Djd2G22c_XUCUc.webp" srcset="/_astro/flyweight-pattern.Djd2G22c_rb1Rf.webp 240w, /_astro/flyweight-pattern.Djd2G22c_Z1tI0vF.webp 540w, /_astro/flyweight-pattern.Djd2G22c_xkMRY.webp 720w, /_astro/flyweight-pattern.Djd2G22c_XUCUc.webp 1920w" alt="Flyweight 패턴" class="aspect-[1393/783] max-w-full" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 1920px" width="1920" height="1080" decoding="async"> </div> <div class="p-4 pb-8"> <h3 class="mb-2 text-lg font-medium text-th-text">
64 Flyweight 패턴 </h3> <p class="break-keep tracking-tight text-th-text-secondary"> 동일한 객체를 다룰 때 이미 존재하는 인스턴스를 재사용한다 </p> </div> </a><a class="block overflow-hidden rounded-xl border border-th-border no-underline transition-transform hover:scale-105" href="design-patterns/factory-pattern"> <div> <img src="/_astro/factory-pattern.DEh6-kzF_23Pe3E.webp" srcset="/_astro/factory-pattern.DEh6-kzF_Z1qWMm2.webp 240w, /_astro/factory-pattern.DEh6-kzF_1Hkj3Y.webp 540w, /_astro/factory-pattern.DEh6-kzF_Z1kN1li.webp 720w, /_astro/factory-pattern.DEh6-kzF_23Pe3E.webp 1920w" alt="Factory 패턴" class="aspect-[1393/783] max-w-full" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 1920px" width="1920" height="1080" decoding="async"> </div> <div class="p-4 pb-8"> <h3 class="mb-2 text-lg font-medium text-th-text"> Factory 패턴 </h3> <p class="break-keep tracking-tight text-th-text-secondary"> 객체를 생성하는 팩토리 함수를 사용한다 </p> </div> </a><a class="block overflow-hidden rounded-xl border border-th-border no-underline transition-transform hover:scale-105" href="design-patterns/compound-pattern"> <div> <img src="/_astro/compound-pattern.DXJISaNp_l6ohq.webp" srcset="/_astro/compound-pattern.DXJISaNp_19gma2.webp 240w, /_astro/compound-pattern.DXJISaNp_ZLCFdS.webp 540w, /_astro/compound-pattern.DXJISaNp_1fq8aL.webp 720w, /_astro/compound-pattern.DXJISaNp_l6ohq.webp 1920w" alt="Compound 패턴" class="aspect-[1393/783] max-w-full" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 1920px" width="1920" height="1080" decoding="async"> </div> <div class="p-4 pb-8"> <h3 class="mb-2 text-lg font-medium text-th-text"> Compound 패턴 </h3> <p class="break-keep tracking-tight text-th-text-secondary"> 하나의 작업을 위해 여러 컴포넌트를 만들어 역할을 분담하게 한다 </p> </div> </a><a class="block overflow-hidden rounded-xl border border-th-border no-underline transition-transform hover:scale-105" href="design-patterns/command-pattern"> <div> <img src="/_astro/command-pattern.5cSbabWS_Z4f3E7.webp" srcset="/_astro/command-pattern.5cSbabWS_ZNF05s.webp 240w, /_astro/command-pattern.5cSbabWS_2kC6ky.webp 540w, /_astro/command-pattern.5cSbabWS_ZHve4I.webp 720w, /_astro/command-pattern.5cSbabWS_Z4f3E7.webp 1920w" alt="Command 패턴" class="aspect-[1393/783] max-w-full" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 1920px" width="1920" height="1080" decoding="async"> </div> <div class="p-4 pb-8"> <h3 class="mb-2 text-lg font-medium text-th-text"> Command 패턴 </h3> <p class="break-keep tracking-tight text-th-text-secondary"> 명령을 처리하는 객체를 통해 메서드와 실행되는 동작의 결합도를 낮출 수 있다 </p> </div> </a><a class="block overflow-hidden rounded-xl border border-th-border no-underline transition-transform hover:scale-105" href="design-patterns/learnaing-javascript-design-patterns"> <div> <img src="/_astro/learning-javascript-design-pattern.CxSbZEwg_Z1p6Pt6.webp" srcset="/_astro/learning-javascript-design-pattern.CxSbZEwg_18VAFR.webp 240w, /_astro/learning-javascript-design-pattern.CxSbZEwg_ZLWqH3.webp 540w, /_astro/learning-javascript-design-pattern.CxSbZEwg_1f6mGB.webp 720w, /_astro/learning-javascript-design-pattern.CxSbZEwg_Z1p6Pt6.webp 1920w" alt="Learning JavaScript Design Patterns" class="aspect-[1393/783] max-w-full" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 1920px" width="1920" height="1080" decoding="async"> </div> <div class="p-4 pb-8"> <h3 class="mb-2 text-lg font-medium text-th-text"> Learning JavaScript Design Patterns </h3> <p class="break-keep tracking-tight text-th-text-secondary"> ES2015+ 이상의 문법으로 업데이트 된 자바스크립트 디자인 패턴 책 </p> </div> </a> </div> </section> <section class="mb-24"> <h2 class="mb-8 font-lexend text-xl font-medium">Rendering Patterns</h2> <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3"> <a class="block overflow-hidden rounded-xl border border-th-border no-underline transition-transform hover:scale-105" href="rendering-patterns/introduction"> <div> <img src="/_astro/introduction.Dt6rNR1F_1wBzqt.webp" srcset="/_astro/introduction.Dt6rNR1F_lBQA8.webp 240w, /_astro/introduction.Dt6rNR1F_Z1zhaMM.webp 540w, /_astro/introduction.Dt6rNR1F_rLCAR.webp 720w, /_astro/introduction.Dt6rNR1F_1wBzqt.webp 1920w" alt="소개" class="aspect-[1393/783] max-w-full" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 1920px" width="1920" height="1080" decoding="async"> </div> <div class="p-4 pb-8"> <h3 class="mb-2 text-lg font-medium text-th-text"> 소개 </h3> <p class="break-keep tracking-tight text-th-text-secondary"> 렌더링 패턴에 대한 소개 </p> </div> </a><a class="block overflow-hidden rounded-xl border border-th-border no-underline transition-transform hover:scale-105" href="rendering-patterns/overview-of-reactjs"> <div> <img src="/_astro/overview-of-reactjs.BsrdUfxo_1EtMmA.webp" srcset="/_astro/overview-of-reactjs.BsrdUfxo_ZlpIDh.webp 240w, /_astro/overview-of-reactjs.BsrdUfxo_Z2hjL2c.webp 540w, /_astro/overview-of-reactjs.BsrdUfxo_ZffWCx.webp 720w, /_astro/overview-of-reactjs.BsrdUfxo_1EtMmA.webp 1920w" alt="Reactjs의 개요" class="aspect-[1393/783] max-w-full" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 1920px" width="1920" height="1080" decoding="async"> </div> <div class="p-4 pb-8"> <h3 class="mb-2 text-lg font-medium text-th-text"> Reactjs의 개요 </h3> <p class="break-keep tracking-tight text-th-text-secondary"> 재사용 가능한 사용자 인터페이스를 개발하기 위한 UI라이브러리 </p> </div> </a><a class="block overflow-hidden rounded-xl border border-th-border no-underline transition-transform hover:scale-105" href="rendering-patterns/overview-of-nextjs"> <div> <img src="/_astro/overview-of-nextjs.B-aJQ7aM_bD8bE.webp" srcset="/_astro/overview-of-nextjs.B-aJQ7aM_AWPcu.webp 240w, /_astro/overview-of-nextjs.B-aJQ7aM_Z1jVcbq.webp 540w, /_astro/overview-of-nextjs.B-aJQ7aM_H7Bde.webp 720w, /_astro/overview-of-nextjs.B-aJQ7aM_bD8bE.webp 1920w" alt="Nextjs의 개요" class="aspect-[1393/783] max-w-full" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 1920px" width="1920" height="1080" decoding="async"> </div> <div class="p-4 pb-8"> <h3 class="mb-2 text-lg font-medium text-th-text"> Nextjs의 개요 </h3> <p class="break-keep tracking-tight text-th-text-secondary"> 하이브리드 react앱 개발을 위한 vercel의 프레임워크 </p> </div> </a><a class="block overflow-hidden rounded-xl border border-th-border no-underline transition-transform hover:scale-105" href="rendering-patterns/client-side-rendering"> <div> <img src="/_astro/client-side-rendering.iAOq0NA0_Z2lvm3b.webp" srcset="/_astro/client-side-rendering.iAOq0NA0_Z1UaziE.webp 240w, /_astro/client-side-rendering.iAOq0NA0_1e7w7m.webp 540w, /_astro/client-side-rendering.iAOq0NA0_Z1O0NhU.webp 720w, /_astro/client-side-rendering.iAOq0NA0_Z2lvm3b.webp 1920w" alt="클라이언트 사이드 렌더링" class="aspect-[1393/783] max-w-full" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 1920px" width="1920" height="1080" decoding="async"> </div> <div class="p-4 pb-8"> <h3 class="mb-2 text-lg font-medium text-th-text"> 클라이언트 사이드 렌더링 </h3> <p class="break-keep tracking-tight text-th-text-secondary"> 클라이언트에서 앱의 UI를 렌더링한다 </p> </div> </a><a class="block overflow-hidden rounded-xl border border-th-border no-underline transition-transform hover:scale-105" href="rendering-patterns/server-side-rendering"> <div> <img src="/_astro/server-side-rendering.C-X6qP2A_ZRKa4i.webp" srcset="/_astro/server-side-rendering.C-X6qP2A_ZMqoID.webp 240w, /_astro/server-side-rendering.C-X6qP2A_2lQGGn.webp 540w, /_astro/server-side-rendering.C-X6qP2A_ZGgCHT.webp 720w, /_astro/server-side-rendering.C-X6qP2A_ZRKa4i.webp 1920w" alt="서버 사이드 렌더링" class="aspect-[1393/783] max-w-full" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 1920px" width="1920" height="1080" decoding="async"> </div> <div class="p-4 pb-8"> <h3 class="mb-2 text-lg font-medium text-th-text"> 서버 사이드 렌더링 </h3> <p class="break-keep tracking-tight text-th-text-secondary"> 서버에서 렌더링한 HTML을 직접 응답한다 </p> </div> </a><a class="block overflow-hidden rounded-xl border border-th-border no-underline transition-transform hover:scale-105" href="rendering-patterns/static-rendering"> <div> <img src="/_astro/static-rendering.DnHaAfQq_11yWMu.webp" srcset="/_astro/static-rendering.DnHaAfQq_Z24oRvI.webp 240w, /_astro/static-rendering.DnHaAfQq_14SdTi.webp 540w, /_astro/static-rendering.DnHaAfQq_Z1Xf6uY.webp 720w, /_astro/static-rendering.DnHaAfQq_11yWMu.webp 1920w" alt="정적 렌더링" class="aspect-[1393/783] max-w-full" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 1920px" width="1920" height="1080" decoding="async"> </div> <div class="p-4 pb-8"> <h3 class="mb-2 text-lg font-medium text-th-text"> 정적 렌더링 </h3> <p class="break-keep tracking-tight text-th-text-secondary"> 사이트를 빌드할 때 미리 렌더해둔 HTML컨텐츠를 서빙한다 </p> </div> </a><a class="block overflow-hidden rounded-xl border border-th-border no-underline transition-transform hover:scale-105" href="rendering-patterns/incremental-static-generation"> <div> <img src="/_astro/incremental-static-generation.DyplUE8t_ZHT8q8.webp" srcset="/_astro/incremental-static-generation.DyplUE8t_Z3bKi0.webp 240w, /_astro/incremental-static-generation.DyplUE8t_Z1Y5MFU.webp 540w, /_astro/incremental-static-generation.DyplUE8t_2X0HJ.webp 720w, /_astro/incremental-static-generation.DyplUE8t_ZHT8q8.webp 1920w" alt="Incremental Static Generation" class="aspect-[1393/783] max-w-full" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 1920px" width="1920" height="1080" decoding="async"> </div> <div class="p-4 pb-8"> <h3 class="mb-2 text-lg font-medium text-th-text"> Incremental Static Generation </h3> <p class="break-keep tracking-tight text-th-text-secondary"> 사이트 빌드 후 정적 컨텐츠를 업데이트한다 </p> </div> </a><a class="block overflow-hidden rounded-xl border border-th-border no-underline transition-transform hover:scale-105" href="rendering-patterns/progressive-hydration"> <div> <img src="/_astro/progressive-hydration.CoLqF7Um_Z1Dpu1n.webp" srcset="/_astro/progressive-hydration.CoLqF7Um_Z1UTIJ8.webp 240w, /_astro/progressive-hydration.CoLqF7Um_1dnmFS.webp 540w, /_astro/progressive-hydration.CoLqF7Um_Z1OJWIo.webp 720w, /_astro/progressive-hydration.CoLqF7Um_Z1Dpu1n.webp 1920w" alt="Progressive Hydration" class="aspect-[1393/783] max-w-full" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 1920px" width="1920" height="1080" decoding="async"> </div> <div class="p-4 pb-8"> <h3 class="mb-2 text-lg font-medium text-th-text"> Progressive Hydration </h3> <p class="break-keep tracking-tight text-th-text-secondary"> 페이지에서 덜 중요한 부분의 JavaScript로딩을 지연시킨다 </p> </div> </a><a class="block overflow-hidden rounded-xl border border-th-border no-underline transition-transform hover:scale-105" href="rendering-patterns/streaming-server-side-rendering"> <div> <img src="/_astro/streaming-server-side-rendering.CwFnqVlJ_2fdK1G.webp" srcset="/_astro/streaming-server-side-rendering.CwFnqVlJ_1p98PH.webp 240w, /_astro/streaming-server-side-rendering.CwFnqVlJ_ZvJSxd.webp 540w, /_astro/streaming-server-side-rendering.CwFnqVlJ_1viTQr.webp 720w, /_astro/streaming-server-side-rendering.CwFnqVlJ_2fdK1G.webp 1920w" alt="Streaming Server Side Rendering" class="aspect-[1393/783] max-w-full" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 1920px" width="1920" height="1080" decoding="async"> </div> <div class="p-4 pb-8"> <h3 class="mb-2 text-lg font-medium text-th-text"> Streaming Server Side Rendering </h3> <p class="break-keep tracking-tight text-th-text-secondary"> 서버에서 렌더링한 HTML을 직접 응답한다 </p> </div> </a><a class="block overflow-hidden rounded-xl border border-th-border no-underline transition-transform hover:scale-105" href="rendering-patterns/react-server-components"> <div> <img src="/_astro/react-server-components.bwwkgKpE_7Okoe.webp" srcset="/_astro/react-server-components.bwwkgKpE_1L0E54.webp 240w, /_astro/react-server-components.bwwkgKpE_Z9SniQ.webp 540w, /_astro/react-server-components.bwwkgKpE_1Raq5N.webp 720w, /_astro/react-server-components.bwwkgKpE_7Okoe.webp 1920w" alt="React Server Components" class="aspect-[1393/783] max-w-full" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 1920px" width="1920" height="1080" decoding="async"> </div> <div class="p-4 pb-8"> <h3 class="mb-2 text-lg font-medium text-th-text"> React Server Components </h3> <p class="break-keep tracking-tight text-th-text-secondary"> JavaScript번들에 포함되지 않고 SSR을 보완하는 중간 추상화 렌더링 </p> </div> </a><a class="block overflow-hidden rounded-xl border border-th-border no-underline transition-transform hover:scale-105" href="rendering-patterns/selective-hydration"> <div> <img src="/_astro/selective-hydration.CDw9-8BC_1njYBv.webp" srcset="/_astro/selective-hydration.CDw9-8BC_1tFgyI.webp 240w, /_astro/selective-hydration.CDw9-8BC_ZrdKOc.webp 540w, /_astro/selective-hydration.CDw9-8BC_1zP2zs.webp 720w, /_astro/selective-hydration.CDw9-8BC_1njYBv.webp 1920w" alt="Selective Hydration" class="aspect-[1393/783] max-w-full" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 1920px" width="1920" height="1080" decoding="async"> </div> <div class="p-4 pb-8"> <h3 class="mb-2 text-lg font-medium text-th-text"> Selective Hydration </h3> <p class="break-keep tracking-tight text-th-text-secondary"> 스트리밍 서버 사이드 렌더링과 함께 사용하는 새로운 hydration접근 방식 </p> </div> </a><a class="block overflow-hidden rounded-xl border border-th-border no-underline transition-transform hover:scale-105" href="rendering-patterns/the-island-architecture"> <div> <img src="/_astro/the-island-architecture.BtuGqcbR_Za3IjY.webp" srcset="/_astro/the-island-architecture.BtuGqcbR_L7yR1.webp 240w, /_astro/the-island-architecture.BtuGqcbR_Z19LsvT.webp 540w, /_astro/the-island-architecture.BtuGqcbR_RhkRK.webp 720w, /_astro/the-island-architecture.BtuGqcbR_Za3IjY.webp 1920w" alt="The Island Architecture" class="aspect-[1393/783] max-w-full" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 1920px" width="1920" height="1080" decoding="async"> </div> <div class="p-4 pb-8"> <h3 class="mb-2 text-lg font-medium text-th-text"> The Island Architecture </h3> <p class="break-keep tracking-tight text-th-text-secondary"> 아일랜드 아키텍쳐는 서버 렌더 페이지에서 인터렉트 가능한 작은 코드를 작성할 수 있게 해 준다 </p> </div> </a> </div> </section> <section class="mb-24"> <h2 class="texㅓ t-xl mb-8 font-lexend font-medium">
65Performance Patterns
66</h2> <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3"> <a class="block overflow-hidden rounded-xl border border-th-border no-underline transition-transform hover:scale-105" href="performance-patterns/loading-sequence"> <div> <img src="/_astro/introduction.mZDGnsX5_ZinThu.webp" srcset="/_astro/introduction.mZDGnsX5_TJiGP.webp 240w, /_astro/introduction.mZDGnsX5_Z119IG5.webp 540w, /_astro/introduction.mZDGnsX5_10T4Hz.webp 720w, /_astro/introduction.mZDGnsX5_ZinThu.webp 1920w" alt="리소스 로딩 순서 최적화" class="aspect-[1393/783] max-w-full" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600p
66x) 720px, 1920px" width="1920" height="1080" decoding="async"> </div> <div class="p-4 pb-8"> <h3 class="mb-2 text-lg font-medium text-th-text"> 리소스 로딩 순서 최적화 </h3> <p class="break-keep tracking-tight text-th-text-secondary"> 리소스들의 로딩 순서를 최적화하여 앱을 빠르게 사용할 수 있도록 한다 </p> </div> </a><a class="block overflow-hidden rounded-xl border border-th-border no-underline transition-transform hover:scale-105" href="performance-patterns/static-import"> <div> <img src="/_astro/static-import.BYY8X2-h_Z22r3Ac.webp" srcset="/_astro/static-import.BYY8X2-h_1GbHvI.webp 240w, /_astro/static-import.BYY8X2-h_ZeHjRc.webp 540w, /_astro/static-import.BYY8X2-h_1Mltws.webp 720w, /_astro/static-import.BYY8X2-h_Z22r3Ac.webp 1920w" alt="Static Import" class="aspect-[1393/783] max-w-full" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 1920px" width="1920" height="1080" decoding="async"> </div> <div class="p-4 pb-8"> <h3 class="mb-2 text-lg font-medium text-th-text"> Static Import </h3> <p class="break-keep tracking-tight text-th-text-secondary"> 다른 모듈이 export한 코드를 import한다 </p> </div> </a><a class="block overflow-hidden rounded-xl border border-th-border no-underline transition-transform hover:scale-105" href="performance-patterns/dynamic-import"> <div> <img src="/_astro/dynamic-import.C26mjPAa_Z4KumM.webp" srcset="/_astro/dynamic-import.C26mjPAa_ZRt6jl.webp 240w, /_astro/dynamic-import.C26mjPAa_2gO06F.webp 540w, /_astro/dynamic-import.C26mjPAa_ZLjkiB.webp 720w, /_astro/dynamic-import.C26mjPAa_Z4KumM.webp 1920w" alt="Dynamic Import" class="aspect-[1393/783] max-w-full" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 1920px" width="1920" height="1080" decoding="async"> </div> <div class="p-4 pb-8"> <h3 class="mb-2 text-lg font-medium text-th-text"> Dynamic Import </h3> <p class="break-keep tracking-tight text-th-text-secondary"> 필요에 따라 코드들을 동적으로 import한다 </p> </div> </a><a class="block overflow-hidden rounded-xl border border-th-border no-underline transition-transform hover:scale-105" href="performance-patterns/import-on-visibility"> <div> <img src="/_astro/import-on-visibility.DJo2tbfy_Z1G9SxC.webp" srcset="/_astro/import-on-visibility.DJo2tbfy_ZRqqtl.webp 240w, /_astro/import-on-visibility.DJo2tbfy_2gQEVF.webp 540w, /_astro/import-on-visibility.DJo2tbfy_ZLgEsB.webp 720w, /_astro/import-on-visibility.DJo2tbfy_Z1G9SxC.webp 1920w" alt="Import On Visibility" class="aspect-[1393/783] max-w-full" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 1920px" width="1920" height="1080" decoding="async"> </div> <div class="p-4 pb-8"> <h3 class="mb-2 text-lg font-medium text-th-text"> Import On Visibility </h3> <p class="break-keep tracking-tight text-th-text-secondary"> 중요하지 않은 컴포넌트는 뷰포트에 들어올 때 로드하도록 한다 </p> </div> </a><a class="block overflow-hidden rounded-xl border border-th-border no-underline transition-transform hover:scale-105" href="performance-patterns/import-on-interaction"> <div> <img src="/_astro/import-on-interaction.ZXIyiDI5_Z2aFXNr.webp" srcset="/_astro/import-on-interaction.ZXIyiDI5_e2VW7.webp 240w, /_astro/import-on-interaction.ZXIyiDI5_Z1GQ5qN.webp 540w, /_astro/import-on-interaction.ZXIyiDI5_kcHWQ.webp 720w, /_astro/import-on-interaction.ZXIyiDI5_Z2aFXNr.webp 1920w" alt="Import On Interaction" class="aspect-[1393/783] max-w-full" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 1920px" width="1920" height="1080" decoding="async"> </div> <div class="p-4 pb-8"> <h3 class="mb-2 text-lg font-medium text-th-text"> Import On Interaction </h3> <p class="break-keep tracking-tight text-th-text-secondary"> 중요하지 않은 리소스는 사용자 상호작용에 따라 필요해질 때 로드하도록 한다 </p> </div> </a><a class="block overflow-hidden rounded-xl border border-th-border no-underline transition-transform hover:scale-105" href="performance-patterns/route-based-splitting"> <div> <img src="/_astro/route-based-splitting.CEByWE5M_1BOjzC.webp" srcset="/_astro/route-based-splitting.CEByWE5M_2tWzIy.webp 240w, /_astro/route-based-splitting.CEByWE5M_y3xkD.webp 540w, /_astro/route-based-splitting.CEByWE5M_Z2u4M4D.webp 720w, /_astro/route-based-splitting.CEByWE5M_1BOjzC.webp 1920w" alt="Route Based Splitting" class="aspect-[1393/783] max-w-full" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 1920px" width="1920" height="1080" decoding="async"> </div> <div class="p-4 pb-8"> <h3 class="mb-2 text-lg font-medium text-th-text"> Route Based Splitting </h3> <p class="break-keep tracking-tight text-th-text-secondary"> 현재 라우팅 경로에 따라 모듈을 동적으로 로딩한다 </p> </div> </a><a class="block overflow-hidden rounded-xl border border-th-border no-underline transition-transform hover:scale-105" href="performance-patterns/bundle-splitting"> <div> <img src="/_astro/bundle-splitting.DahGwMZv_1xM3Te.webp" srcset="/_astro/bundle-splitting.DahGwMZv_Z1pxMH6.webp 240w, /_astro/bundle-splitting.DahGwMZv_1IJiHU.webp 540w, /_astro/bundle-splitting.DahGwMZv_Z1jo1Gm.webp 720w, /_astro/bundle-splitting.DahGwMZv_1xM3Te.webp 1920w" alt="Bundle Splitting" class="aspect-[1393/783] max-w-full" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 1920px" width="1920" height="1080" decoding="async"> </div> <div class="p-4 pb-8"> <h3 class="mb-2 text-lg font-medium text-th-text"> Bundle Splitting </h3> <p class="break-keep tracking-tight text-th-text-secondary"> 코드를 작고 재사용 가능한 수준으로 쪼갠다 </p> </div> </a><a class="block overflow-hidden rounded-xl border border-th-border no-underline transition-transform hover:scale-105" href="performance-patterns/prpl-pattern"> <div> <img src="/_astro/prpl-pattern.9DhC_Ns5_2raYIE.webp" srcset="/_astro/prpl-pattern.9DhC_Ns5_Z1AYldo.webp 240w, /_astro/prpl-pattern.9DhC_Ns5_1xiKcC.webp 540w, /_astro/prpl-pattern.9DhC_Ns5_Z1uOzcE.webp 720w, /_astro/prpl-pattern.9DhC_Ns5_2raYIE.webp 1920w" alt="PRPL Pattern" class="aspect-[1393/783] max-w-full" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 1920px" width="1920" height="1080" decoding="async"> </div> <div class="p-4 pb-8"> <h3 class="mb-2 text-lg font-medium text-th-text"> PRPL Pattern </h3> <p class="break-keep tracking-tight text-th-text-secondary"> 프리캐싱, 지연로딩, 라운드트립 최소화를 통해 초기 로드를 최적화한다 </p> </div> </a><a class="block overflow-hidden rounded-xl border border-th-border no-underline transition-transform hover:scale-105" href="performance-patterns/tree-shaking"> <div> <img src="/_astro/tree-shaking.B2QIa3gM_24Id6M.webp" srcset="/_astro/tree-shaking.B2QIa3gM_Z1nNc13.webp 240w, /_astro/tree-shaking.B2QIa3gM_1KtToX.webp 540w, /_astro/tree-shaking.B2QIa3gM_Z1hDq0j.webp 720w, /_astro/tree-shaking.B2QIa3gM_24Id6M.webp 1920w" alt="Tree Shaking" class="aspect-[1393/783] max-w-full" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 1920px" width="1920" height="1080" decoding="async"> </div> <div class="p-4 pb-8"> <h3 class="mb-2 text-lg font-medium text-th-text"> Tree Shaking </h3> <p class="break-keep tracking-tight text-th-text-secondary"> 사용하지 않는 코드를 제거하여 번들 사이즈를 줄인다 </p> </div> </a><a class="block overflow-hidden rounded-xl border border-th-border no-underline transition-transform hover:scale-105" href="performance-patterns/preload"> <div> <img src="/_astro/preload.CxdNmkV1_Z20KOiQ.webp" srcset="/_astro/preload.CxdNmkV1_18Qb3H.webp 240w, /_astro/preload.CxdNmkV1_ZM2Qkd.webp 540w, /_astro/preload.CxdNmkV1_1f0W4r.webp 720w, /_astro/preload.CxdNmkV1_Z20KOiQ.webp 1920w" alt="Preload" class="aspect-[1393/783] max-w-full" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 1920px" width="1920" height="1080" decoding="async"> </div> <div class="p-4 pb-8"> <h3 class="mb-2 text-lg font-medium text-th-text"> Preload </h3> <p class="break-keep tracking-tight text-th-text-secondary"> 브라우저에게 중요하고 먼저 다운로드되어야 하는 리소스들에 대한 힌트를 준다 </p> </div> </a><a class="block overflow-hidden rounded-xl border border-th-border no-underline transition-transform hover:scale-105" href="performance-patterns/prefetch"> <div> <img src="/_astro/prefetch.zSZCt9R1_1BdsQd.webp" srcset="/_astro/prefetch.zSZCt9R1_Z1oE2wP.webp 240w, /_astro/prefetch.zSZCt9R1_1JD3Sb.webp 540w, /_astro/prefetch.zSZCt9R1_Z1iugw6.webp 720w, /_astro/prefetch.zSZCt9R1_1BdsQd.webp 1920w" alt="Prefetch" class="aspect-[1393/783] max-w-full" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 1920px" width="1920" height="1080" decoding="async"> </div> <div class="p-4 pb-8"> <h3 class="mb-2 text-lg font-medium text-th-text"> Prefetch </h3> <p class="break-keep tracking-tight text-th-text-secondary"> 앱 사용 중 요청될 수 있는 리소스들을 미리 로드하고 캐시한다 </p> </div> </a><a class="block overflow-hidden rounded-xl border border-th-border no-underline transition-transform hover:scale-105" href="performance-patterns/third-parties"> <div> <img src="/_astro/third-parties.DJp9WXnD_Z2aSe01.webp" srcset="/_astro/third-parties.DJp9WXnD_YFEBH.webp 240w, /_astro/third-parties.DJp9WXnD_ZVdmLd.webp 540w, /_astro/third-parties.DJp9WXnD_15PqCr.webp 720w, /_astro/third-parties.DJp9WXnD_Z2aSe01.webp 1920w" alt="Third Parties" class="aspect-[1393/783] max-w-full" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 1920px" width="1920" height="1080" decoding="async"> </div> <div class="p-4 pb-8"> <h3 class="mb-2 text-lg font-medium text-th-text"> Third Parties </h3> <p class="break-keep tracking-tight text-th-text-secondary"> 서드파티 라이브러리를 로드하며 발생하는 성능 감소를 최소화한다 </p> </div> </a><a class="block overflow-hidden rounded-xl border border-th-border no-underline transition-transform hover:scale-105" href="performance-patterns/list-virtualization"> <div> <img src="/_astro/list-virtualization.CLoChdQ4_FTH0o.webp" srcset="/_astro/list-virtualization.CLoChdQ4_28PsLR.webp 240w, /_astro/list-virtualization.CLoChdQ4_cVqnW.webp 540w, /_astro/list-virtualization.CLoChdQ4_2f0eMB.webp 720w, /_astro/list-virtualization.CLoChdQ4_FTH0o.webp 1920w" alt="List Virtualization" class="aspect-[1393/783] max-w-full" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 1920px" width="1920" height="1080" decoding="async"> </div> <div class="p-4 pb-8"> <h3 class="mb-2 text-lg font-medium text-th-text"> List Virtualization </h3> <p class="break-keep tracking-tight text-th-text-secondary"> 리스트 가상화를 적용해 다량의 렌더링 성능을 최적화한다 </p> </div> </a><a class="block overflow-hidden rounded-xl border border-th-border no-underline transition-transform hover:scale-105" href="performance-patterns/compressing-javascript"> <div> <img src="/_astro/compressing-javascript.YfnLkpw9_1SIgaE.webp" srcset="/_astro/compressing-javascript.YfnLkpw9_Z21d2qV.webp 240w, /_astro/compressing-javascript.YfnLkpw9_1853Y5.webp 540w, /_astro/compressing-javascript.YfnLkpw9_Z1U3gqc.webp 720w, /_astro/compressing-javascript.YfnLkpw9_1SIgaE.webp 1920w" alt="Compressing JavaScript" class="aspect-[1393/783] max-w-full" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 1920px" width="1920" height="1080" decoding="async"> </div> <div class="p-4 pb-8"> <h3 class="mb-2 text-lg font-medium text-th-text"> Compressing JavaScript </h3> <p class="break-keep tracking-tight text-th-text-secondary"> 네트워크를 통해 스크립트를 받는 시간을 최소화한다 </p> </div> </a> </div> </section> <section class="mb-48"> <h2 class="mb-8 font-lexend text-xl font-medium">Case Studies</h2> <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3"> <a class="block overflow-hidden rounded-xl border border-th-border no-underline transition-transform hover:scale-105" href="case-studies/airbnb-case-study"> <div> <img src="/_astro/airbnb-case-study.CKxAxGZX_25V22W.webp" srcset="/_astro/airbnb-case-study.CKxAxGZX_116E3R.webp 240w, /_astro/airbnb-case-study.CKxAxGZX_ZTMnk3.webp 540w, /_astro/airbnb-case-study.CKxAxGZX_17gq4B.webp 720w, /_astro/airbnb-case-study.CKxAxGZX_25V22W.webp 1920w" alt="Airbnb Case Study" class="aspect-[1393/783] max-w-full" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 1920px" width="1920" height="1071" decoding="async"> </div> <div class="p-4 pb-8"> <h3 class="mb-2 text-lg font-medium text-th-text"> Airbnb Case Study </h3> <p class="break-keep tracking-tight text-th-text-secondary"> Airbnb 사이트의 리스팅 페이지를 최적화한다 </p> </div> </a><a class="block overflow-hidden rounded-xl border border-th-border no-underline transition-transform hover:scale-105" href="case-studies/hey-com"> <div>
66 <img src="/_astro/hey-com.D_sq4j1t_Z12w4EX.webp" srcset="/_astro/hey-com.D_sq4j1t_Z1xsW2a.webp 240w, /_astro/hey-com.D_sq4j1t_1AO9nQ.webp 540w, /_astro/hey-com.D_sq4j1t_Z1rjb1q.webp 720w, /_astro/hey-com.D_sq4j1t_Z12w4EX.webp 1920w" alt="Hey.com" class="aspect-[1393/783] max-w-full" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 1920px" width="1920" height="1920" decoding="async"> </div> <div class="p-4 pb-8"> <h3 class="mb-2 text-lg font-medium text-th-text"> Hey.com </h3> <p class="break-keep tracking-tight text-th-text-secondary"> Hey.com 의 자바스크립트 최소화 사례 </p> </div> </a><a class="block overflow-hidden rounded-xl border border-th-border no-underline transition-transform hover:scale-105" href="case-studies/optimizing-core-web-vitals-on-a-nextjs-app"> <div> <img src="/_astro/optimizing-core-web-vitals-on-a-nextjs-app.BSWtBwLK_Z2a21tb.webp" srcset="/_astro/optimizing-core-web-vitals-on-a-nextjs-app.BSWtBwLK_ZVFJAe.webp 240w, /_astro/optimizing-core-web-vitals-on-a-nextjs-app.BSWtBwLK_2cBlOM.webp 540w, /_astro/optimizing-core-web-vitals-on-a-nextjs-app.BSWtBwLK_ZPvXzu.webp 720w, /_astro/optimizing-core-web-vitals-on-a-nextjs-app.BSWtBwLK_Z2a21tb.webp 1920w" alt="Optimizing Core Web Vitals on a Next.js app" class="aspect-[1393/783] max-w-full" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 1920px" width="1920" height="1080" decoding="async"> </div> <div class="p-4 pb-8"> <h3 class="mb-2 text-lg font-medium text-th-text"> Optimizing Core Web Vitals on a Next.js app </h3> <p class="break-keep tracking-tight text-th-text-secondary"> 성능 최적화 사례 분석 </p> </div> </a> </div> </section> <section class="mb-24"> <h2 class="mb-4 text-center text-3xl font-semibold tracking-tight">
67이 사이트를 어떻게 활용할 수 있을까요?
68</h2> <div class="mb-24 break-keep"> <p class="mb-2 text-center text-base text-th-text-secondary">
69이 사이트는 여러분의 앱을 개선할 여러 디자인 패턴이나 팁 혹은 기법들을
70    정리하고 있습니다.
71</p> <p class="mb-2 text-center text-base text-th-text-secondary">
72참고로 <span class="font-semibold">디자인 패턴들은 "지시적"이기 보다 "설명적"</span>입니다. 개발자들이 오랫동안 반복적으로 겪었던 문제와 해결을 담고 있지만,
73    모든 시나리오에 꼭 맞는 해결책을 제시하지는 않습니다.
74</p> <p class="text-center text-base text-th-text-secondary">
75Patterns.dev는 체크리스트라기 보단, 앱 개선의 인지범위를 넓히기 위한 패턴
76    모음에 초점이 맞춰져 있습니다.
77</p> </div> <div class="md:pb-18 relative mb-16 pb-14"> <div class="mx-auto max-w-xs sm:flex sm:max-w-none sm:justify-center"> <div class="m-2 sm:mb-2 md:mb-0"> <h2 class="mb-4 bg-gradient-to-r from-pink-500 to-purple-400 bg-clip-text text-center font-lexend text-3xl font-bold leading-tight tracking-tighter text-transparent md:text-4xl">
78Practical examples on CodeSandbox
79</h2> <img src="/_astro/csb-screenshot.-L-6HhKC_Z15vVvi.webp" srcset="/_astro/csb-screenshot.-L-6HhKC_ZsfScI.webp 240w, /_astro/csb-screenshot.-L-6HhKC_Z2o9UAD.webp 540w, /_astro/csb-screenshot.-L-6HhKC_Zm67bY.webp 720w, /_astro/csb-screenshot.-L-6HhKC_Z15vVvi.webp 1104w" alt="Codesandbox" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 1104px" width="1104" height="325" decoding="async"> </div> <div class="m-2"> <h2 class="mb-4 bg-gradient-to-r from-pink-500 to-orange-400 bg-clip-text text-center font-lexend text-3xl font-bold leading-tight tracking-tighter text-transparent md:text-4xl">
80Learn Visually with our animations
81</h2> <img src="/_astro/progressive-rehydration.CYMiQzUR_ZFxfOP.webp" srcset="/_astro/progressive-rehydration.CYMiQzUR_Z1wkNbr.webp 240w, /_astro/progressive-rehydration.CYMiQzUR_1BWiez.webp 540w, /_astro/progressive-rehydration.CYMiQzUR_Z1qb2aH.webp 720w, /_astro/progressive-rehydration.CYMiQzUR_ZFxfOP.webp 1104w" alt="Flow chart" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 1104px" width="1104" height="325" decoding="async"> </div> </div> <div class="absolute bottom-0 flex w-full justify-center"> <div class="invisible md:visible"> <img src="/_astro/lydia-with-notebook.BrqySZI8_Z1ATnMD.svg" srcset="/_astro/lydia-with-notebook.BrqySZI8_Z1TdHND.svg 240w, /_astro/lydia-with-notebook.BrqySZI8_Z1ATnMD.svg 540w, /_astro/lydia-with-notebook.BrqySZI8_Z1ATnMD.svg 720w, /_astro/lydia-with-notebook.BrqySZI8_Z1ATnMD.svg 366w" alt="lydia-with-notebook" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 366px" width="366" height="366" decoding="async"> </div> </div> </div> </section> <section class="mb-24"> <hello-world class="grid grid-cols-1 gap-4 md:grid-cols-2" data-astro-cid-kk2n2nv4> <div class="flex flex-col gap-2" data-astro-cid-kk2n2nv4> <h2 class="mb-4 text-3xl font-semibold tracking-tight" data-astro-cid-kk2n2nv4>디자인 패턴 모음</h2> <p class="mb-2 text-base tracking-tight text-th-text-secondary" data-astro-cid-kk2n2nv4>
82디자인 패턴은 소프트웨어 개발의 근본적인 부분으로, 소프트웨어 디자인에서
83      자주 발생하는 문제에 대한 일반적인 해결책을 제공합니다.
84</p> <div class="flex flex-col gap-4" data-astro-cid-kk2n2nv4>
84 <button data-item="0" type="button" data-astro-cid-kk2n2nv4> <div class="label" data-astro-cid-kk2n2nv4> <span class="font-semibold" data-astro-cid-kk2n2nv4>ES2017+</span> <span class="text-base" data-astro-cid-kk2n2nv4>
85ES2017+을 사용한 일반적인 디자인 패턴의 구현과 장점 그리고 주의점에
86            대해 다룹니다.
87</span> </div> <div class="icon" data-astro-cid-kk2n2nv4> <svg width="1em" height="1em" viewBox="0 0 32 32" data-astro-cid-kk2n2nv4 data-icon="carbon:flash-filled">  <symbol id="ai:carbon:flash-filled"><path fill="currentColor" d="M11.61 29.92a1 1 0 0 1-.6-1.07L12.83 17H8a1 1 0 0 1-1-1.23l3-13A1 1 0 0 1 11 2h10a1 1 0 0 1 .78.37a1 1 0 0 1 .2.85L20.25 11H25a1 1 0 0 1 .9.56a1 1 0 0 1-.11 1l-13 17A1 1 0 0 1 12 30a1.1 1.1 0 0 1-.39-.08"/></symbol><use xlink:href="#ai:carbon:flash-filled"></use>  </svg> </div> </button> <button data-item="1" type="button" data-astro-cid-kk2n2nv4> <div class="label" data-astro-cid-kk2n2nv4> <span class="font-semibold" data-astro-cid-kk2n2nv4>React 패턴 제공</span> <span class="text-base" data-astro-cid-kk2n2nv4>
88React Hooks를 활용하는 React 용 디자인 패턴, 가능한 개선방법과
89            구현을 다룹니다.
90</span> </div> <div class="icon" data-astro-cid-kk2n2nv4> <svg width="1em" height="1em" viewBox="0 0 32 32" data-astro-cid-kk2n2nv4 data-icon="carbon:location-current">  <symbol id="ai:carbon:location-current"><path fill="currentColor" d="M4 12.984a1 1 0 0 0 .629.944l9.601 3.841l3.841 9.602A1 1 0 0 0 19 28h.016a1 1 0 0 0 .924-.658l8-22a1 1 0 0 0-1.282-1.283l-22 8a1 1 0 0 0-.658.925"/></symbol><use xlink:href="#ai:carbon:location-current"></use>  </svg> </div> </button> <button data-item="2" type="button" data-astro-cid-kk2n2nv4> <div class="label" data-astro-cid-kk2n2nv4> <span class="font-semibold" data-astro-cid-kk2n2nv4>웹 성능을 중점적으로</span> <span data-astro-cid-kk2n2nv4>
91그리고 웹 앱의 성능을 향상시킬 수 있는 다양한 웹 성능 패턴ê
91³¼ 최적화
92            방법을 다룹니다.
93</span> </div> <div class="icon" data-astro-cid-kk2n2nv4> <svg width="1em" height="1em" viewBox="0 0 32 32" data-astro-cid-kk2n2nv4 data-icon="carbon:rocket">  <symbol id="ai:carbon:rocket"><path fill="currentColor" d="m7.288 23.292l7.997-7.997l1.414 1.414l-7.997 7.997z"/><path fill="currentColor" d="M17 30a1 1 0 0 1-.37-.07a1 1 0 0 1-.62-.79l-1-7l2-.28l.75 5.27L21 24.52V17a1 1 0 0 1 .29-.71l4.07-4.07A8.94 8.94 0 0 0 28 5.86V4h-1.86a8.94 8.94 0 0 0-6.36 2.64l-4.07 4.07A1 1 0 0 1 15 11H7.48l-2.61 3.26l5.27.75l-.28 2l-7-1a1 1 0 0 1-.79-.62a1 1 0 0 1 .15-1l4-5A1 1 0 0 1 7 9h7.59l3.77-3.78A10.92 10.92 0 0 1 26.14 2H28a2 2 0 0 1 2 2v1.86a10.92 10.92 0 0 1-3.22 7.78L23 17.41V25a1 1 0 0 1-.38.78l-5 4A1 1 0 0 1 17 30"/></symbol><use xlink:href="#ai:carbon:rocket"></use>  </svg> </div> </button> </div> </div> <div class="image-area" data-astro-cid-kk2n2nv4> <img src="/_astro/es2017.BZvdOvuh_1ckwXG.svg" srcset="/_astro/es2017.BZvdOvuh_1NAt85.svg 240w, /_astro/es2017.BZvdOvuh_1ckwXG.svg 540w, /_astro/es2017.BZvdOvuh_1ckwXG.svg 720w, /_astro/es2017.BZvdOvuh_1ckwXG.svg 514w" alt="es2017" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 514px" data-astro-cid-kk2n2nv4 width="514" height="514" decoding="async"> <img src="/_astro/optimizedForReactDevelopers.DGGSE8rE_24W6q9.svg" srcset="/_astro/optimizedForReactDevelopers.DGGSE8rE_16GAUK.svg 240w, /_astro/optimizedForReactDevelopers.DGGSE8rE_24W6q9.svg 540w, /_astro/optimizedForReactDevelopers.DGGSE8rE_24W6q9.svg 720w, /_astro/optimizedForReactDevelopers.DGGSE8rE_24W6q9.svg 514w" alt="optimized for react developers" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 514px" data-astro-cid-kk2n2nv4 width="514" height="514" decoding="async"> <img src="/_astro/aFocusOnWebPerformance.B1KNsy9x_Z155lcd.svg" srcset="/_astro/aFocusOnWebPerformance.B1KNsy9x_Zd4dVE.svg 240w, /_astro/aFocusOnWebPerformance.B1KNsy9x_Z155lcd.svg 540w, /_astro/aFocusOnWebPerformance.B1KNsy9x_Z155lcd.svg 720w, /_astro/aFocusOnWebPerformance.B1KNsy9x_Z155lcd.svg 514w" alt="a focus on web performance" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 514px" data-astro-cid-kk2n2nv4 width="514" height="514" decoding="async"> </div> </hello-world>   </section> <section> <h2 class="mb-4 text-center text-3xl font-semibold tracking-tight">
94현대적 관점의 디자인 패턴들을 제공합니다
95</h2> <div class="mb-24"> <p class="mb-2 text-center text-base text-th-text-secondary">
96디자인 패턴은 종종 불필요한 복잡성을 추가한다는 시선이 있습니다.
97</p> <p class="mb-2 text-center text-base text-th-text-secondary">
98하지만 특정 문제들을 해결해 주고, 종종 현재 상태의 문제를 개발자에게
99    드러내는 데 도움을 줍니다.
100</p> <p class="mb-2 text-center text-base text-th-text-secondary">
101만약 여러분의 프로젝트에 이런 문제들이 없다면 적용할 필요는 없습니다.
102</p> </div> <h2 class="mb-4 text-center text-3xl font-semibold tracking-tight">
103여러분이 성능이 뛰어난 웹 앱을 개발할 수 있도록 돕고 싶습니다
104</h2> <p class="mb-2 text-center text-base text-th-text-secondary">
105웹 성능 패턴에 대해 알아보고, 코드를 더 효율적으로 로드하는 방법을 배워보세요.
106</p> <p class="mb-2 text-center text-base text-th-text-secondary">
107사용자 경험을 로드하거나 렌더링하는 현대적인 접근 방식에 대해 어떻게 생각해야
108  할지 모르시나요? 저희가 도와드리겠습니다.
109</p> <div class="flex justify-center"> <img src="/_astro/lastOfHome.CYe31UlF_Z1a8MOv.svg" srcset="/_astro/lastOfHome.CYe31UlF_785lV.svg 240w, /_astro/lastOfHome.CYe31UlF_Z1NKW1Y.svg 540w, /_astro/lastOfHome.CYe31UlF_Z1a8MOv.svg 720w, /_astro/lastOfHome.CYe31UlF_Z1a8MOv.svg 631w" alt="performance" loading="lazy" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 631px" width="631" height="611" decoding="async"> </div> </section> </div>  </div> </div>  </main> </body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.