{"componentChunkName":"component---src-templates-blog-post-js","path":"/javascript/design-pattern.3/","result":{"data":{"site":{"siteMetadata":{"title":"아구몬","author":"[AGUMON]","siteUrl":"https://ljlm0402.netlify.com","comment":{"disqusShortName":"","utterances":"ljlm0402/tech-blog"},"sponsor":{"buyMeACoffeeId":""}}},"markdownRemark":{"id":"54c4436e-9b7e-54fc-8392-27f767b3ff9e","excerpt":"💎 목차 디자인패턴 코드를 보며 💠 디자인패턴 프로그래밍을 하다보면 유사한 상황을 자주 만나게 됩니다. 특정 상황에 사용되는 패턴을 를 통해 유연하게 대처할 수 있습니다. ⬆ 목차 😳 코드를 보며 ▸ DOM 접근 DOM 접근은 최소화 한다. 반복문 내에서 DOM 접근은 피한다. \n DOM 참조를 지역변수에 할당하여 사용한다. \n 자주 접근하는 엘리먼트에 을 추가하는 것도 성능 향상에 도움이 된다. 왜냐하면, 가 노드를 찾는 가장 빠른 방법 ▸ DOM 조작 DOM…","html":"<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 500px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 131.0810810810811%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAaABQDASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAUBAgQD/8QAFwEAAwEAAAAAAAAAAAAAAAAAAAECA//aAAwDAQACEAMQAAABadJWEuCgVmruHmsGQtP/xAAdEAEAAQMFAAAAAAAAAAAAAAACAQADEgQRExQg/9oACAEBAAEFAtRMgBBxSQmtsUFmVZyXWriujx//xAAYEQACAwAAAAAAAAAAAAAAAAABEAIRE//aAAgBAwEBPwGwsor/xAAWEQEBAQAAAAAAAAAAAAAAAAAQARH/2gAIAQIBAT8BNp//xAAdEAACAQQDAAAAAAAAAAAAAAAAAQIQERIhIDKR/9oACAEBAAY/Aslbw1Rxk0ZKadhNDeR2LQeuH//EABwQAAICAwEBAAAAAAAAAAAAAAERACExQVEQkf/aAAgBAQABPyEI2rbStA9hRKBuCIgaatdIgd6lKLLUtkPkJVjLKi37/9oADAMBAAIAAwAAABD8CLD/xAAZEQEAAgMAAAAAAAAAAAAAAAABABARIWH/2gAIAQMBAT8Q60q5SGp//8QAFhEAAwAAAAAAAAAAAAAAAAAAAREg/9oACAECAQE/EEYv/8QAHhABAAMAAgIDAAAAAAAAAAAAAQARITFRYbFxodH/2gAIAQEAAT8QEm4TlL9Qgjra0SIwAHiVJCKGpZ281r0GEEgNOnqKGF2Dn3FUsV2v2Mr7yOb4blDAC8vc5x2OOZP/2Q=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"logo\"\n        title=\"logo\"\n        src=\"/static/e6b0c2d831b7a07cd040519411e646e3/41099/logo.jpg\"\n        srcset=\"/static/e6b0c2d831b7a07cd040519411e646e3/a80bd/logo.jpg 148w,\n/static/e6b0c2d831b7a07cd040519411e646e3/1c91a/logo.jpg 295w,\n/static/e6b0c2d831b7a07cd040519411e646e3/41099/logo.jpg 500w\"\n        sizes=\"(max-width: 500px) 100vw, 500px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<h2 id=\"-목차\" style=\"position:relative;\"><a href=\"#-%EB%AA%A9%EC%B0%A8\" aria-label=\" 목차 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><strong>💎 목차</strong></h2>\n<ul>\n<li><a href=\"#-%EB%94%94%EC%9E%90%EC%9D%B8%ED%8C%A8%ED%84%B4\">디자인패턴</a></li>\n<li><a href=\"#-%EC%BD%94%EB%93%9C%EB%A5%BC-%EB%B3%B4%EB%A9%B0\">코드를 보며</a></li>\n</ul>\n<h2 id=\"-디자인패턴\" style=\"position:relative;\"><a href=\"#-%EB%94%94%EC%9E%90%EC%9D%B8%ED%8C%A8%ED%84%B4\" aria-label=\" 디자인패턴 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><strong>💠 디자인패턴</strong></h2>\n<ul>\n<li>프로그래밍을 하다보면 유사한 상황을 자주 만나게 됩니다.</li>\n<li>특정 상황에 사용되는 패턴을 <code class=\"language-text\">정형화</code>를 통해 유연하게 대처할 수 있습니다.</li>\n</ul>\n<br />\n<p><strong><a href=\"#-%EB%AA%A9%EC%B0%A8\">⬆ 목차</a></strong></p>\n<hr />\n<h2 id=\"-코드를-보며\" style=\"position:relative;\"><a href=\"#-%EC%BD%94%EB%93%9C%EB%A5%BC-%EB%B3%B4%EB%A9%B0\" aria-label=\" 코드를 보며 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><strong>😳 코드를 보며</strong></h2>\n<h3 id=\"▸-dom-접근\" style=\"position:relative;\"><a href=\"#%E2%96%B8-dom-%EC%A0%91%EA%B7%BC\" aria-label=\"▸ dom 접근 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>▸ DOM 접근</h3>\n<ul>\n<li>DOM 접근은 최소화 한다.</li>\n<li>반복문 내에서 DOM 접근은 피한다.</li>\n</ul>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 590px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 50%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAABtElEQVQoz4WRy5IhQRSGLW0sMC51l5VKYapkT3evhBVeQMTgBbyDN6HYeQHv0aPD0oYNIYQYdy/wd1YVPeiOmMUXJ/OczD/PnydwOp2w3W6x+bvx4iebh/1/2O/3OJ/PCKzXawwGAzi9LhzHgdN10O36616v94V+v/+FTqeD4XCI4/GIwHg8RsYwIKRUSIoCSRahaDIkSUQ8FkP0B4fHSCTCCSMcvicajSIYDKJUKmG1WiEwGo3AGEPWfgJ7+YXnZxsvrwwFK4+cafI8Q86yYfBHKaUghCCVSn2i6zoEQUC1WsV8PvcFf7ICaJYixyxQg0AURYiSBFmWoXC8yLt3UVX1Dk3TEI/HUalUsFgsfMGCxaBn8l4nGTMDM2sizTtyO7iK3Irdrq+C5XLZF3x/9y2bVgF524bpCnIo1T07xIXbJES/s3rFrSWTSc+yJ/jn7Q1GNg9Jc/9DBU3zg3woqihA1ghUPQ1J1aAQihgfziOJRAKhUAjFYtH/w8lkglarhd/1OprNJhqNxgP1b3L/cO/UajW0221/yrvdzlOeTqec2SXeMPsmd2HGa7NLfblc4nA44APSmLjENsDrYAAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"1\"\n        title=\"1\"\n        src=\"/static/bf46eab641e4e0eb06ed820d4d55dd24/fcda8/1.png\"\n        srcset=\"/static/bf46eab641e4e0eb06ed820d4d55dd24/12f09/1.png 148w,\n/static/bf46eab641e4e0eb06ed820d4d55dd24/e4a3f/1.png 295w,\n/static/bf46eab641e4e0eb06ed820d4d55dd24/fcda8/1.png 590w,\n/static/bf46eab641e4e0eb06ed820d4d55dd24/efc66/1.png 885w,\n/static/bf46eab641e4e0eb06ed820d4d55dd24/c83ae/1.png 1180w,\n/static/bf46eab641e4e0eb06ed820d4d55dd24/19ab6/1.png 1664w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span>\n<br /></p>\n<ul>\n<li>DOM 참조를 지역변수에 할당하여 사용한다.</li>\n</ul>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 590px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 47.972972972972975%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAABsklEQVQoz6WQy27aQBSGvUYsuZRg47EZj28YZOOUS6p20YpWXQAromJ4Cx6Bd4lNYN1seQ92DRJCQgRe4O+MkdJUbVZZfDpHRz7f+cfS+XzG0/EJp9PpTQiPQHp4+IkkucP9YoFFEvM+QRxfSMRscc/nvI9j3idYLpd/sVqt+Lcx1uv1RdjqdkEcC9RxoDEH1LLg2BRujcGoEugVBYQyVG0PatVAoZBHsVjktZBSKpWQzWbR7/dxOBwgtTsdGI4Ht+7D9UPUfR/NoIYwbKDuWnBNBttrwAvbMB0XlUoFqqo+o2laKh4MBtjtdpA6NzcgTAdljGPBNHk614RtmzCpDoPSdC6Xy5Dlcip8CSEE+Xw+TZgKP335CrPehNMI0Gh/hNd8D10j6WUiEvAFout8WU0FiqL8I8zlcn+En799R+26hWbrGq0PXfhhAMaTuTYDM43np4nF/6HzY+KfDofDi9APAhTld9Aov0yuoAjUK55KTqt4jkjwGkKWyWTQ6/UuwtlshtvRLaJxhPFLfox5HSOKIkwmk1eZTqcYjUaYz+fY7/eQfj0+YrPZvJntdovj8Yjfan+2mqMIXN4AAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"2\"\n        title=\"2\"\n        src=\"/static/198f73c8efbed2b1663285046b2108e1/fcda8/2.png\"\n        srcset=\"/static/198f73c8efbed2b1663285046b2108e1/12f09/2.png 148w,\n/static/198f73c8efbed2b1663285046b2108e1/e4a3f/2.png 295w,\n/static/198f73c8efbed2b1663285046b2108e1/fcda8/2.png 590w,\n/static/198f73c8efbed2b1663285046b2108e1/efc66/2.png 885w,\n/static/198f73c8efbed2b1663285046b2108e1/c83ae/2.png 1180w,\n/static/198f73c8efbed2b1663285046b2108e1/19ab6/2.png 1664w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span>\n<br /></p>\n<ul>\n<li>자주 접근하는 엘리먼트에 <code class=\"language-text\">id 속성</code>을 추가하는 것도 성능 향상에 도움이 된다.</li>\n<li>왜냐하면, <code class=\"language-text\">document.getElementById()</code>가 노드를 찾는 가장 빠른 방법</li>\n</ul>\n<br />\n<hr />\n<h3 id=\"▸-dom-조작\" style=\"position:relative;\"><a href=\"#%E2%96%B8-dom-%EC%A1%B0%EC%9E%91\" aria-label=\"▸ dom 조작 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>▸ DOM 조작</h3>\n<ul>\n<li>DOM 업데이트는 최소화 하는 것이 좋다.</li>\n<li>업데이트시에 화면을 <code class=\"language-text\">repaint</code> 하고, 엘리먼트를 <code class=\"language-text\">reflow</code> 하는데 많은 비용이 발생한다.</li>\n<li>서브트리를 추가할 시에는 서브 트리의 구성요소를 모두 생성한 후에 마지막에 한번만 추가해준다.</li>\n</ul>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 590px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 80.4054054054054%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAAAsTAAALEwEAmpwYAAACJ0lEQVQ4y6WTy27aQBSGvWQVAVK5iouNjcEOBhsMmEtSEItWVZ+DBmiAJc0TIPFiEJ6AHYiCYAEItoi/x6RNL0kTaC19skfyfHPm/DPMbrfD4XAg8E/P4fvE/X6P7XYLZjKZ4O7uC5qtz2i1Wri9bT7QbB7Hr9Fut1Gr1dDr9bBarcAMh0NwYgQeloXT7YbL5YDH44TL8QZ2m+2IjbBarc9it9thsViQy+UwnU7BDPp9GMVrlD58RPn9O5RKWbwtGdASCqSwACUqIiwICAaDYIngH3AcBzcVUqlUYO6WuR8MoKZ0SIkkYqoKVZWhxGUIJPH5fI/4/f5nCQQCcDgcKJfLD8KBKUymkMpfIVPII5NOwDA0aIoMSeARiwgQ6f036VNhf4BUNgs1o5NYg6JIiEoRBFkOXq/3UXSy0NyyQhXyURIpGm2VRzgcIniIogCWwnpJ+lR4P0AsriIsJyBTH+PUP02LQYnRApHwb8KTe5jUdaSLRUo7jzT1MJWKI2amy7GQqVI+FDqjh2YoegaZfBZGTkecjgvPh8BRZb9OPEuo6Wmkr0swrqjKrEqHNHlMOWqmLJ6ZshmKlqYKjSRyhHR5SZPpZ/oxcAJmj10u18+Dbd4UUZLhZek2hKgakYNAKZvfTqfzuPpLmLKLiwsUCgWMx2Mwo9EInU4HNzefUK/Xjxf9B+b4NRqNBqrVKrrdLubzOZj1eo3FYoGvsxlm/8FyucRms8E3hEKC7by+Y2wAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"3\"\n        title=\"3\"\n        src=\"/static/19cd1e42ee28e2d75993c5006ea7fed6/fcda8/3.png\"\n        srcset=\"/static/19cd1e42ee28e2d75993c5006ea7fed6/12f09/3.png 148w,\n/static/19cd1e42ee28e2d75993c5006ea7fed6/e4a3f/3.png 295w,\n/static/19cd1e42ee28e2d75993c5006ea7fed6/fcda8/3.png 590w,\n/static/19cd1e42ee28e2d75993c5006ea7fed6/efc66/3.png 885w,\n/static/19cd1e42ee28e2d75993c5006ea7fed6/c83ae/3.png 1180w,\n/static/19cd1e42ee28e2d75993c5006ea7fed6/19ab6/3.png 1664w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span>\n<br /></p>\n<ul>\n<li>존재하는 트리를 변경하는 경우에는 서브트리의 루트를 복제해서 변경한 뒤 원래의 노드와 바꾼다.</li>\n</ul>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 590px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 30.405405405405407%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAAsTAAALEwEAmpwYAAABHklEQVQY05WPvW6CYBRAWR0hpoWYtlpAAatpH8DVoYIPUJ/BZ3GAjy72AXwUuziok4mJA+BfNPoCp5841g4dTs7N/cu9yul0YrvZkKWJJM2dSidJmjvL1qzXf7ORsxfvdjvO5zNKlmUMh1+EUYQQgkjEEkEcR3zG0jIWIiIMw5tEcm4wGDAajTgejyiTyYSKafNouzw7dazGG42mQ/PVw7RNHgwd/f4OVdPQblAsFikUCrRaLflVgvI9HuN4L1SqLna9ie16eJ6F49Z4MquU7Rpl00LXdQzD+EWpVEJV1XzharVCmc1mfPR6vHc6BN0ufhDg+/4VGQfBNdeR9Vtc+trtNv1+/3rhfr9nsVgwnU65LP8v8/k893K55HA48AMEoDKOzIC3xAAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"4\"\n        title=\"4\"\n        src=\"/static/a10b696cad692c0a973234ec7925ccf7/fcda8/4.png\"\n        srcset=\"/static/a10b696cad692c0a973234ec7925ccf7/12f09/4.png 148w,\n/static/a10b696cad692c0a973234ec7925ccf7/e4a3f/4.png 295w,\n/static/a10b696cad692c0a973234ec7925ccf7/fcda8/4.png 590w,\n/static/a10b696cad692c0a973234ec7925ccf7/efc66/4.png 885w,\n/static/a10b696cad692c0a973234ec7925ccf7/c83ae/4.png 1180w,\n/static/a10b696cad692c0a973234ec7925ccf7/19ab6/4.png 1664w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span>\n<br /></p>\n<hr />\n<h3 id=\"▸-이벤트\" style=\"position:relative;\"><a href=\"#%E2%96%B8-%EC%9D%B4%EB%B2%A4%ED%8A%B8\" aria-label=\"▸ 이벤트 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>▸ 이벤트</h3>\n<ul>\n<li>이벤트 리스너는 아래와 같이 구현할 수 있다.</li>\n</ul>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 590px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 104.05405405405406%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAVCAYAAABG1c6oAAAACXBIWXMAAAsTAAALEwEAmpwYAAACzUlEQVQ4y5VUy04iQRRl7cIoIhgeDXRXVz/pbppXN4yOGZPJ/ICJuvQX/BgTBV37EwrxA1xrgomPjYgxfsGZW8U4Y5RMYHFyya3m1D3n3rqJt7c3jMfPeH4mjJ4wGo3wRBBxRDmB8XgsIb/5hPf8y8sLBFfi4eEBJ6enODo6Qrd3gm63i15vgu7xsYQ4+x8ODw9xdnYmSROXl5fIFopIZ3PIqxxKSYGmFVEq5pHLrCKbSWN5eRlLS0syfkYymcTCwgKq1Spub2+R6Pcv4DoVtNc38OPXT3zb2kK8volWZwOVWhO65YAZNlRVRalU+gKRz+Vy6HQ6uLm5QeKCCB3bRbPeQNRpodaoI/A8BI0YTlBDuVyGUixCUZSpKNLZ2toa4jieEPb7fXBdB+MmiioDM6ki00Y+lyXkUCgU/kIQvMfPhFEUTQgHRKhxC2XdhO87ME0DygeCj5iW+0IoKtQYB3d8hFGMoBlL30plVUqdu0JBqGoaSTZg+SHsoA7HD6ghdTCdU7cVaf7MFQ4GA6hkPCP/PL8OgzpucBWWpdNFKkymwdDZnJI1Rj4aYCKKBpkWGBGpahn5PM0jQRLOKlmQeM02au111OMIre+bqNVDuK4Dm+QLS2b38I9k0RjTq8KueORfg6R7VCWDZVCe63NKpmlnROjR8wkbVdRaTXCaRXERJ9niXMhVZvdQkxUafgN2GIFXQjDLha6WYJCX4rXMJ5kq0DQdhuuj4tk04DZ1mUvvdKpQpziXZEnIdLi+hzB0aXO44JzJyiaEqvzjzHMo3jI3LNi1NgJaElXqcCUIoFPepoY41Bhhy7RtIy7NZrP/ts35+blMpFIpZDIZrKYzWEmtTrCyIpEkiPNpSKfTWFxcREAFXF9fI3F1dYX9/X3s7Oxgd3d3buzt7WF7exsHBwe4u7tDQqzt+/t7DIdDuXGHAvR7Xjw+PuL19RW/AQSjG7bCVW+fAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"5\"\n        title=\"5\"\n        src=\"/static/905e02fdea1a0196b94569cf635b4dd3/fcda8/5.png\"\n        srcset=\"/static/905e02fdea1a0196b94569cf635b4dd3/12f09/5.png 148w,\n/static/905e02fdea1a0196b94569cf635b4dd3/e4a3f/5.png 295w,\n/static/905e02fdea1a0196b94569cf635b4dd3/fcda8/5.png 590w,\n/static/905e02fdea1a0196b94569cf635b4dd3/efc66/5.png 885w,\n/static/905e02fdea1a0196b94569cf635b4dd3/c83ae/5.png 1180w,\n/static/905e02fdea1a0196b94569cf635b4dd3/19ab6/5.png 1664w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span>\n<br /></p>\n<ul>\n<li><code class=\"language-text\">setTimeOut()</code> 이나 <code class=\"language-text\">Web Worker</code> 를 이용하여 쓰레드 같은 기능을 구현할 수 있다.</li>\n</ul>\n<br />\n<hr />\n<h3 id=\"▸-xmlhttprequest\" style=\"position:relative;\"><a href=\"#%E2%96%B8-xmlhttprequest\" aria-label=\"▸ xmlhttprequest permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>▸ XMLHttpRequest</h3>\n<ul>\n<li>자바스크립트에서 HTTP 요청을 생성하는 특별한 객체 (생성자 함수)</li>\n<li>생성과정은 아래와 같다.</li>\n<li>XMLHttpRequest(XHR) 객체를 생성</li>\n</ul>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 590px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 24.324324324324326%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAYAAABFA8wzAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAr0lEQVQY05XOTQqCUBSG4TtM80LQ7yYiWoqbUPS6i9yBkJptoDbghnSiCIpDsTfBpFnYx3ngO4MDR/R9z5jXMBP+Ttd1NE2DeDyeXMOIW5IQ3z+GHkXRLHEcEwQBaZrSti3ieDqzWEpW6y1yv0Medqy2GwzDQNM0dF3/SUqJEALTNMcPff+CbVso18V1nC+lUDN4nodlWYRhSFVViKIoyLJslOejaZ8pH27KsqSua96Xxhwu8dRIEwAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"6\"\n        title=\"6\"\n        src=\"/static/be5894eaf3840874bbb54da010c52ed3/fcda8/6.png\"\n        srcset=\"/static/be5894eaf3840874bbb54da010c52ed3/12f09/6.png 148w,\n/static/be5894eaf3840874bbb54da010c52ed3/e4a3f/6.png 295w,\n/static/be5894eaf3840874bbb54da010c52ed3/fcda8/6.png 590w,\n/static/be5894eaf3840874bbb54da010c52ed3/efc66/6.png 885w,\n/static/be5894eaf3840874bbb54da010c52ed3/c83ae/6.png 1180w,\n/static/be5894eaf3840874bbb54da010c52ed3/19ab6/6.png 1664w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span>\n<br /></p>\n<ol start=\"2\">\n<li>응답 객체의 상태 변경시 알림을 받기 위한 콜백함수 지정</li>\n</ol>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 590px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 24.324324324324326%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAYAAABFA8wzAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAwElEQVQY042OTQqCUBSF31gS+tGkKFpC1E5cRKLpLmwHDp76tHluwA3pRBEUh+Y7qUE5Eg98954D98AlbftGL855P34MGRxz1TQNqqoCeUURqOeBhU+wIITPAvhBMGSfMbiuO4nXdR3HQRzHqOsa5Hy5YrHcQN4fIXWsZQVrZQf5cMJK2kIQhElEUQQhBKqqfj982DY07Ya7YcDQ9WGPvWmak1iW1fU1UEpRFAVIlmVI0vRPMvbJLNLuNs9zlGWJDzAuHNF9VAh4AAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"7\"\n        title=\"7\"\n        src=\"/static/eb1e6e73ee914e1e05cd8efcca6332db/fcda8/7.png\"\n        srcset=\"/static/eb1e6e73ee914e1e05cd8efcca6332db/12f09/7.png 148w,\n/static/eb1e6e73ee914e1e05cd8efcca6332db/e4a3f/7.png 295w,\n/static/eb1e6e73ee914e1e05cd8efcca6332db/fcda8/7.png 590w,\n/static/eb1e6e73ee914e1e05cd8efcca6332db/efc66/7.png 885w,\n/static/eb1e6e73ee914e1e05cd8efcca6332db/c83ae/7.png 1180w,\n/static/eb1e6e73ee914e1e05cd8efcca6332db/19ab6/7.png 1664w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span>\n<br /></p>\n<ol start=\"3\">\n<li>요청</li>\n</ol>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 590px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 26.351351351351354%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAYAAABFA8wzAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA0klEQVQY06XPsWqEQBQF0CmypImjrCFNCoslf+C/RNkZIcQZV6vs9hb+nj9gaaHYqaCdBm7GkbhbJNUWh8t98B48Mo4j5mnCtJjnzfyX6b/Zt94fhgGkLEt8nS+IIomTFFqshEIqKuXnRkThtYs1ZSwQfHBkWYa2bUHyPIdzeIPjvOLl2YZFDexNCoNaikrzSaOWoa1dJV3nlm1i9/gA13VRVRVIURRIkgS+74NxDsYYjgrb8BvXzn+TB/DePaRpiqZpQLquQ13XWF6/x3Ks73v8ADC9EB6cyJYHAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"8\"\n        title=\"8\"\n        src=\"/static/744801afe7f88e2c76adc2c3e7137bb7/fcda8/8.png\"\n        srcset=\"/static/744801afe7f88e2c76adc2c3e7137bb7/12f09/8.png 148w,\n/static/744801afe7f88e2c76adc2c3e7137bb7/e4a3f/8.png 295w,\n/static/744801afe7f88e2c76adc2c3e7137bb7/fcda8/8.png 590w,\n/static/744801afe7f88e2c76adc2c3e7137bb7/efc66/8.png 885w,\n/static/744801afe7f88e2c76adc2c3e7137bb7/c83ae/8.png 1180w,\n/static/744801afe7f88e2c76adc2c3e7137bb7/19ab6/8.png 1664w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span>\n<br /></p>\n<hr />\n<h3 id=\"▸-jsonp\" style=\"position:relative;\"><a href=\"#%E2%96%B8-jsonp\" aria-label=\"▸ jsonp permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>▸ JSONP</h3>\n<ul>\n<li>JSON with padding</li>\n<li>브라우저의 동일 도메인 정책의 제약을 받지 않는다.</li>\n<li>JSONP의 요청 URL 형태</li>\n</ul>\n<br />\n<div class=\"gatsby-highlight\" data-language=\"sh\"><pre class=\"language-sh\"><code class=\"language-sh\">http://example.org/getdata.php?callback=myHandler</code></pre></div>\n<br />\n<ul>\n<li>위에서 <code class=\"language-text\">getdata.php</code> 가 웹페이지 이거나 스크립트가 될 수 있다.</li>\n<li><code class=\"language-text\">getdata.php</code> 파일이 수신되면, <code class=\"language-text\">myHandler()</code>같은 콜백함수가 실행된다.</li>\n</ul>\n<br />\n<hr />\n<h3 id=\"▸-웹-페이지-로딩-전략\" style=\"position:relative;\"><a href=\"#%E2%96%B8-%EC%9B%B9-%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%A1%9C%EB%94%A9-%EC%A0%84%EB%9E%B5\" aria-label=\"▸ 웹 페이지 로딩 전략 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>▸ 웹 페이지 로딩 전략</h3>\n<ul>\n<li>\n<p>script 태그에 들어가는 엘리멘트를 살펴보자</p>\n<ul>\n<li><code class=\"language-text\">&lt;script type=&#39;text/javascript&#39;&gt;</code> ⇨ HTML5에서는 필수 속성이 아니다.</li>\n<li>마크업 유효성 검사를 위한 경우가 아니라면 사용하지 않는다.</li>\n<li><code class=\"language-text\">async(defer)</code> ⇨ 비동기 스크립트 로딩으로, 스크립트를 받는 동안 다른 다운로드를 방해하지 않는다.</li>\n</ul>\n</li>\n</ul>\n<br />\n<p><strong><a href=\"#-%EB%AA%A9%EC%B0%A8\">⬆ 목차</a></strong></p>\n<hr />\n<br />\n<blockquote>\n<p>출처</p>\n<p><a href=\"https://joshua1988.github.io/web-development/javascript/javascript-pattern-dom-browser/\" target=\"_blank\">CAPTAIN PANGYO > javascript-pattern-dom-browser</a></p>\n</blockquote>\n<h1 id=\"여러분의-댓글이-큰힘이-됩니다-๑̀ㅂ́و✧\" style=\"position:relative;\"><a href=\"#%EC%97%AC%EB%9F%AC%EB%B6%84%EC%9D%98-%EB%8C%93%EA%B8%80%EC%9D%B4-%ED%81%B0%ED%9E%98%EC%9D%B4-%EB%90%A9%EB%8B%88%EB%8B%A4-%E0%B9%91%CC%80%E3%85%82%CC%81%D9%88%E2%9C%A7\" aria-label=\"여러분의 댓글이 큰힘이 됩니다 ๑̀ㅂ́و✧ permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>여러분의 댓글이 큰힘이 됩니다. (๑•̀ㅂ•́)و✧</h1>","frontmatter":{"title":" 디자인 패턴 💠 ▻ DOM과 브라우저 패턴 ","date":"September 04, 2019"}}},"pageContext":{"slug":"/javascript/design-pattern.3/","previous":{"fields":{"slug":"/javascript/design-pattern.2/"},"frontmatter":{"title":" 디자인 패턴 💠 ▻ 디자인 패턴 ","category":"JavaScript"}},"next":{"fields":{"slug":"/algorithm/programmers/sql/groupby/1/"},"frontmatter":{"title":" 프로그래머스 ▻ 고양이와 개는 몇 마리 있을까 ","category":"Algorithm"}}}},"staticQueryHashes":["3128451518","3956431471"]}