본문 바로가기
자바스크립트 (JavaScript)/예제

[ 함수 ] 콜백 (Callback) 예제

by Hwanii_ 2023. 12. 10.
728x90
//  이미지 링크 주소
const url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANIAAADSCAMAAAAIR25wAAABlVBMVEX/////6cT/4KvK5P8AAACz2P9MTEwuLi7//9b//9j/58JAQEAQEBA9PT1VVVXc7f/C4P/R0dH/9s7/8MmAgIBHR0dra2vv7+8zMzP/+8DIyMhOTk7/8suqvtLZ9v/W8v9hYWH/7bWUlJS/v7+IgXS0p5H/460eHh7f39//970nJyeqqqr0372/qIDJ8v9VSzl2f4iGor+4uLgeGhTy+P8VGR6ev+HC6v/SwqZ3kKqMjIyXjn/fza6fn5///8uUgmNscnm70urk8f/R/P9rXkji//+VpLTRuIxoaGjv0qEuKB+uoo7DtZxxoP+EdFjh16RabIB1cWjk0bLm4r9nZF6Psv///+RBOSyGkp8hKC9whp+Ojn/S0bOurZiNg3bbyKpRVkammH7l3M+5xeZsm/+hue+Uuf+qpoQeFxKEgWTYz6FugqyUwf+IrP9ldJarlnPcvZBmVkLA1uCqvsNGT1ptbVSTe17/7J8+fPp/nuRWivX/6qJNgv+VrObR1KIDETE/Zbc3aNFgfcGLpaqpzOFHVmV3j7FSOZwCAAAWF0lEQVR4nO1dC1vbSJbFUMiy9cCWLEtGBiQb/A4kJokJxg40MRhsQgxOAp1XJ530dDKTCcmkd7Lds7uz25393XtLD78fEtjG2eF8X0DIklNH99ape2+VpImJK1zhCle4wqghXnYDLopYKNe8Y5b2XU5LuiNcu8ppydv36DSNkNOZC4dre/yIHk7Dzg0W0TF9K4aQ0O9oBZlQzF0+5Bxa486HKIoaZgJyyfr+2U7uVATWfsT6MaeisW/sKCURMn2IRo0soijXdnAOISANRo3FnAgZXjp2lJyIMbaSiE43fECj9dZjY9G6Z6YR8utb40YJrvussVlsbloUhVqOFaOIqQu20/x83CgptYsdo+vdYwJLcxslH0Kx+l8JRIjG7rGihCUZ6ZogNnZ53NBEyxAKrtboikmT4JhRSiBkKl4I0SBkisnDj6LNh4oSkhr/9o4npSKiwzAaJbCLRWGkYRDs0D6BvS0iDlZsVI+J8FhS0tsNXQRF/etYlEWQZr2hYk2jTYgtJMfSSl7oSNjPfLQWDtB4OyywmuvNttgEKMFRjX+PZV9izP4eCwmoue+DEjpjLYeDTaWaCIogLIait/W6S8R6gyelm8M7CA6UtuNxGJQIadAMO2ue2n7opcHbZVsT7NmJNoQpVIezFg/2D9/HAbN6L2tDmorq8Cc7fTzOCDcFCv8vQCHnt55+ezVgw8Qoio11iFlNiHCcuR2D7TFjLmL4/H4/q/d4Gjaj8DsEYXaXegIObpHTr8M4Z4xcNEljoFYovok+lFrAjrbZvZDQW0QBoojOeXN4S9bcqisl7HhhyoDf6w1RNJJH2OY+SEeFZDKpjT++lkJKd0ptUMbJSg3wI6rpbxuU2CtKo8K/BKVu41IbvhVKTbWg3hhXSkpzXWFCsB7jjSulVhGfSFoOCeRxGpcaIPrOHdWMK6ULwMt+GyngFa5whVHD6+s4JictRx/jB7bDZOGEqEjRDkWzMYaXVWrDmC9am1sXfays85tNMMIYpe8W0DQFWm96zEnTenAUSzDfFiPIh8Mdd3uTSaNjha+G328EXm9a8Ss+r3d2fJwwFvaHRB32GxX2S4wBiVr3jUUJM8ZSlFOSdVD+kC1Wok+SCEJefFaqwtmCJFFs7tJJhVlJEBZZwQCTINjaSDMbTisY6TDAxyo60un6+iqBISpPjlKcy5U6Ol5bfFIVBKesjJaUuK40Tq94FYmSS0/J1JqBSlWQGE25k0W/5NSdSsJgKNO/EkROEzrRxzBEmXNxHO92BDmOI12Op1mZklh/Z6UcCsKMk5bqFzFEOAm25CIdHGmAc5QUQfKHQkUgQbCsUlp6tshiVJc0wF8y8PKth0UlIWSfuoBODW6e5J9lWUpy+kdGyUez63W/8icEOXtE8o4GBMlgVga7UDL7pBxMpUjSxacw3DpnF88vZQmZcVIsU31Gkm5HC1zkUVYmnCNbjhjz18ZGL/RsefEY7NICzpUliOrii5SL5INB2AE/MYyP+SBJHpcrrEARS49az9W/gDx+IjOy5r4xJTmy0TjnlIRqOUi2t8gdDJbLDpJr49rQaM51VC6X+a6fuzbYhBYzpWknM5pZnJhPAp/jSL7NbzSQ3T6o88a9r8fnriVB0MyTAzkZRWgbExLE4gYZ7NGmC4Lnqwk9Wo+tC4m2FX+DQrI24siSvOTq4VgDAKdQ5nKyXNRySdcuI4lWjP8DMxoqIaCUJSQjMxHlYVnJT7O6T+ecwvPOWjVISjzLsMMOI2J+/X8QKaZ6PFyvA7hdJdk5Kv0OOdlU+wg5cHApgqmN6sOVPFEWSr3kd2CUjmTGCItERRrOuh2vrAWTIiUsDlG96yBLjKF5MGbQwygkxZioLjzrUrXrsD9QSlmTEpjJPwyl8EYF/WuTzsrQxcGBHY9ghh2PJ41hIpeoboyAE6Y0qrJlmhFKwx5oHbo8jCy9ZZnRUCKEYt1Mw2WXlNjy8D2PD1ZkiTEzdlEeuEDE6vPMYo4hKsM3kzvIrVUoxsg5Z+m2lc4XZcREa1MMSkImRjHYunnSlRWkhDbKir5Bz9qIfsqchEhLBFt2jGRkwvmxQg1tJsD05DDLKMcjUAcDrmO2to5eTHdr3IWQTDDssWv4QasJ96OSQBlm8ltfsGQDIkONJAyvg0vJTvN2AHkYQ68fbDRSRqDlVUoeXm4hFp3KiBlBKrjGRofTiTB8Cbn0aLSMcK2IHV746pWELDcS9W4Cl6WGtaBK9EtVbiTJXzNca0aVcgighPIoMvRWgEBIQyr65yhi7TIouV1LsrPDOpABMHIK1eNL8DuHI8hVKWEIyUUuAYxGLOAG3K6y7Bx84BBjqOpow4ZGuLLM4Nf6hpyXZSONUplRhkBpcYTBaivIpWFQkkZS6epOqdi/jTaRG03xrgtckGEMet2A6GcukxK3oSQGLXkxRl67REoOsuIcdKE/JghHl0xp0PEDUBpF0bgbuDV24NMxl0zJVRq8iF8ypYGOS+JwKQX7rvkYOKV144FkQ6Hk5shUKWUlTR4gpWRU0kc4URBe2MuVOG2VXdMegwdn7nYdl1hi0crXDpBSiDYKGSGGtSXifDBbWeOalrUFN4Iao9SRxslNkk+rBEE8HzGlpPkMJZ+UtVU05o6gtZhUvVUlbW6A56ssXjThJjcW4ZDqkqXq+iAj8ZDRlRTKHiUHt0RgUuVaRYmsEBVS54orGDDSwOfd14o1geeeD1zE0wn2yGaOzh09waRK5mlklsgalHAFA4xGLL7otWav8btStfVEA0NYYh12yw4c+fSJTBAp4zzeoc3g8MHFyjG2HF9ea19w2QXBFGvhUZC2KaVsV1JAADZKL2rN5nWx4HlHUPO1nisM2ykNOrc4j5UwOJJr6yq8/Xpt0DF4StCXRjGJ3pXSEescHKWc9lVY8WzX98neK1zdPNl7eWsdriwhDWxqKUfrNUGfpHdqy3AHuaWXJUe739UO4BwvX74sW5o2cGWlgc1dxChaz49DDGEvIOKOqooC0U7XFge5CqHIhJWpEDdQGlhRPImMtZii3azWVdmEs4jFbifxwSqeYfETFr6WO65KgysQmXfexBhigwu6dHT3pnorNgh80ylLdLMB7ybwStl1C5Tcrg15CEsMRZZZfHSk3wiy9MLFBfuwIl9A5ACe13XlHu+GgEhWWAuUgsHKQMvHMePugLTEVmtPS/rhZbCPpSDuWY/5CYJtpaTG43GV18JXIhdTCLnvwl+eq8iJ84ZDYvuER0ygzQfJYkK0+dyo/WCflriyn3NAqdR8GK+++vHHH7dSvOoIHld8IYLtn1hC6GDeJpO27H6i/sRBiaal1tn4NB01KLHA4+XhHsZbIPXS1dv3+NSTKlF91qySvPrjwcHr1wfv37zi3VywVMlakNFHJcFYcpNMJCwSWo/WH7tVu0V5Ft/rFhbNe8hjRWCk5lUN+cN7CK2kepb93byL23C0RBw8MHr/008Hrw9ev1Ih6LOgNJBXsc5101Gs1fJ8mNAqxv6ffoFNwQv9hzUesRZVikUF3yKGfU0NTBqIB4DTfp91N26+VUTU1MHBT9PfTcy8OTh4Y3Hg5o5ZquY71iII/DDWe7sqbmgkH3i3D/3F1+GhacDgsMZoclIN3O/PqQ3q1sHB9MLNiYmbPx08tHgOmRUoe9oAjH5+mw9EsD9F4PLH7+qStnL/8Ozs8P6KAbT/w14DI8zp7Spwslc0UoGJZ2oGKP3FKiW8gshefR8zOsxH6k2NB8BOv7zLBwKgtmrAxLVIXp1sQsT1AaH79qJz9c3rNwtTnpmbM+8PtlRLp7iyFGVr4hkYrR42Xf1J9ezuWSA+2YKA2rpnMhLZR7StvNCdf3PwcGpmyjM19fAgFrdyyqOybG8SJtnSQwyXam9+RwTu2qQUfLf5/v174DT15v1rr9r/BJJ7WmXsrQ5IInovb639nSjt0shG2YjnHpWJP//lPYj4w4ODg1d9KfHcWkWWbN4GCJQmLZqkI6fH6J5FSniUOi5XCOD008OHQKu/kXjI+wTjxsaY5QfaYitdgFL8sWV94FPPnsu4Bkb89c+AV/3rDzyZlSnKeNyWL2p1RfXFrBTAkmcxe8c3D0MM++xZVePVf3UVZuQ01zyLitPqLXQ5RO9ejNLqxiNLkynci0q1spZyuRxrT7PVSt8yJ3idXKehJCxH4qITrZxfHibxsEw/4S0khA43x/NBfHOw6xHJ8cF+2RZmJNUfkRCSLAs5ULrbNgRZRySPQ42PnBVOGGQK0sdyHwPhu6I5rs4ohvNqyzouRtFqPNK/6d05xXd/wJysRaDBo2r/fuTmUmtPn1dNr5tVWNpOQqsgdBHBw4iT0KGWLBbjSoRc7dePuGOZkGUmavSjYsJpZ3FADgSrNXSwDRWU/LHL2oSro7QRdPC9+5EL8ndZ8plVHD9dtBGGA6N7+Yu4nY78fbRaLvOWDEVyPQri7iDHkdzas6rcUIaM2SnfzUJe2hpdn8tMZyB7bOmYdIGSnWPBdTAY5DmtlObeOM5CfNF4T6O9CRgGobMLux1G4CNCTpbIZjf4lMPu0wWCZCqVCq5lAU/0UVhmKdYcYf1RO0YSwEgDYTQZP1yFfF5rDFt9tsF1mn/p7Gk8SaZKuApA1FAMbW2xCSMf99EJG5SSmNEA3A4j/xg5P51s6m2SK0tPUy79WTd4lQDuIPq2tsGZG3jU5Z6WDDbFTYy5ra2pQsFTm8OMFW2kSmIC9HswRgIzrSC0dXNhbu5vJ4rWRPbJIuD5UeqIf5Q6SmUXF0vHR0fHG7CzjDfKixqe4I5DKDt/m5ubml/AmF+Y8UwtnAjnmcRMYrUbEKPJ+C5Cp1sL8/OFhamt36/LNS+S5Qrol6xv6r/rGzpOdqbmAVONmN+sSZ7XeiUcZxUXiISaEcGx3p2C1pyZwsLW1nWM9XoP8V3XfyvrhncS1w1szRem2jC/Q5hmYltfsdOT0kVyvxbE92iTEgD8B6OwNffperG4OTe3VZif0zBVWNA3YI+OhXZCmFPRNJNCW6YUvlju14L8R3T6qbV1ngWtxTPw06M5V6FQgH/zC12Z1FCYk83FWNZDB/9gKd1Dnwue3s2cWtjRkOlDRzt0SmbsCkQM1CFw8VioRuljf0rQQfReNN/7OI3Sln1KEIJ/GJSEAwL30a253ld/YQvPj2GNP+lvpnNQmsUl+55GUgOdjah2vBAqyMNOB+lqQOGEwIUE0U8Uh0JJ6GckdfLDB7NCGa/3uUhg70OnHogpzfV2KKCkxTY5YnMolBIQDPUyUkTdBzt+UHHz42dAMKBdgHj+Ld3xWqh7CJ30oXSd8PehNFOnVFM8y6DQ/mEvvYuov2izLxEVRwb7qnr/Lhyu7kLIje52pLSPbvW+8GAlIq05ntKZkqdh9/x1grJJKdzP8SKBs18ea5Ty/4ZQBAKes3hE/Rmh1beRDuaNqCuI7qN4C5sEu54udpWHhU9KTQwL120v3PAidK2P4Kl5dRcYTcavITr+DiGwqvrh8f3DjmkwdrzPvRnB8GkEdV1kpAAib6rm/KbtpzLOWqAUCOi6oH44U+PXtAJmPNA+SaMh3l/xcAfZURTlpJDp/PH8nExc179jfkeg7K6BAkq7vSnFJ+9/MBQEC59OBctFR+2H6AHt6F7jWVjo5oFavN1d7sAzTQsWBdsLN8Kde3mDjQ4fo7aipXq4srraqZIZB787NX1mq8+Y25eSByI8+3dnemlER3pJHq52I1S3yG8RcyfdwUz5awjd0C/wwieZaAtgLVJS9GCpMKUw9qYyNaz3qeCph/tNAUYq8ndNKTpGHeoujU7n9VFlHhKiPoNuV0pYHwrzU58UIXGOO5VEGv3c00zxvXv3zDmNyN9fffn3p7+BVN+t72xgFAdx39GiVuwzxOb5GGlR4NanHUVmznfvFZip9yyMGqjV+H6b+/XLly+p38D18u2Fv4h6D9FzBa10UJg5v5E0SpsExSSI891NBgLx0WLtIbL3jy+vX3/5j9+62RMhZmcL49PvirXkoSslgWF96fPei+60XE6JqL9+eX/w5dcuQWEeRINhtSoJLpOczM/0b31XSsxFbsrEaa2VjEmNB1784/Wvv/7axUpqfBUhWTGrJHML52WE5eFij44DgVjpEgs0tXhy9z8f/9c///nf//P3jl0vosIAFj2Z0qskc/Pn9TpMqXjRFbl+hFYO+3FSD1fNRVErnXNGMBItz5kFn/MTwkPtRe8yFSkYNz/06U86pf2P3ShF8rs/o4RyXpFrsZLzwo/Qxe8y7stpcnf3LJ5/d69jAT0Qv0bjWYuLU/J4PAubiYsvMs5pnHoXitR4Pr63l493mNJVyWvQkZBPEc5PyWMAW+m7QdyBEMac+sxf4NhodbdDp1P37sPpUnKCoFooeRoa2rKnAdr+me90DICMgTQ06rEKNuhOCed/HbIrNe6CjAIl8QJy4dN8U1tnDNQb+t1MO27C/puDo1IDttP+u92zvNrVVuretbMWyhE1v/fuTzRK6G92iEHbGjGEdtrBrKK9w/iXvUgeL47sZC61tjcSiUxGAhD9Hb7dx6cN79lhF4NPf5nz/tu7gGuB9gWHNcS19a93775d0ZbzRsf2Bem4P1GntTsPdrVFrZiBin/mI9dM7N7dx6itSB7duzVsAvemncL2g1sAbQU8Xnq8d29l5f67s48rKz/UKZigo7c+/34CVrrspneDD9E3tqc9mWlA5sZmxxXiNTIPMG57pj3b2zfAtpf+Bp6OEKOIzniADpbf6eXCDfaW1vpT7Ip08evXr7f/uF3DNoZ25PT2V4TGlBJCDzQLGchsT9/AyOBfuu22MzU0HLh8m7b+iuSRApIM8LtGZJYxpj3Ly9i5kOaXnQBmEvp//yUAKN1Z7tjk6cyW0YVuZJp264d7/jgd05cE96J0G6FcLE2jz9tNe29ox2//L/o2KSk4B/naQMmTuYV2MoaVxvMlwT0oeTKfdcdrpIR50tMeLPj0+FqpsftnNEGv9RqN0+kfDfumlx+gW5jSMqj8eL54EUScqVsp8+BzY/szHqzn001W3P5eo+SZvjWmRsKvzUZ3tmsUGv7QfA/reaONTErLhQdoKE+NHgS8CNPQGp7BA9GdzqNQEyXP8o0HNJLHM3iY0ONWAcKF7e3vnQjdynj6UkKnEu5j4/M+zDaEtQD8lNW0YKeL/NUpPdBlcHyzJQ1FM9Le7BL81JGB0I72+Xxj/3LjWIilEPp8o9DPRpqRhvLo3iEghtB0JxNlmncWvmploW8CoBK3M+2Mtm98bSKYOUX0GOtCE4DSdLvbLUP886Bup0zhr2hMs6QOSENfWm71PE8BZLAeAy5nQMHHNJftAFEAIT/Z1pLwej8CMailFp7CH5DE0+MZ2HUGLuhhiyxrVsksb3syeAx6AFsQFm0vT58Ao2/s1fS4osdIt77fWV7ObN++8/tnTAECiu/vYHyPCyy+b8brDISNIZeRTim9+kWJyYaiV3SEby8eFGYVmk2YoQRNC7jonRZoA75vRb2bMTvhDenvnk7PzhoPVZo1cMlNu8IVrnCFf038Hy4QUt8hi5LOAAAAAElFTkSuQmCC"

//  loadImage라는 화살표 함수.
//  인자에는 url이라는 이름을 가진 매개변수와 callback의 줄인말로 cb라는 매개변수.
const loadImage = (url, cb) => {
    const imgEl
        = document.createElement('img') //  JavaScript의 메모리상에 img 태그를 생성.
    imgEl.src = url //  메모리에 올려진 img 태그의 src 속성에다가 인자로 받은 url 데이터를 할당.
    imgEl.addEventListener('load', () => {  //  addEventListener 메서드의 인자로 load 이벤트와 화살표 함수를 추가. 즉, 화살표 함수는 콜백 함수 이다.
        setTimeout(() => {  //  위의 화살표 함수 내부에 setTimeout 함수를 사용 했고, 인자로 또 콜백 함수를 사용 했다.
            cb(imgEl)
        }, 1000)
    })
}

const containerEl = document.querySelector('.container')

loadImage(url, (imgEl) => {  //  콜백 함수. (위의 cb라는 매개변수가 이 함수의 데이터를 받는다)
    containerEl.innerHTML = ''
    containerEl.append(imgEl)
})

 

1. const 키워드로 만든 변수 url에 이미지 링크를 저장 한다.

 

2. loadImage 함수는 이미지 주소를 불러오는 기능을 하는 화살표 함수 이다.

매개변수로 주소와 함수 데이터를 받는다.

 

3.

imgEl이라는 변수에 document.createElement('img') 를 사용해서 JS 메모리에 새로운 img 태그를 생성 한다.

이 img 태그에 src 속성으로 매개변수로 받은 이미지 링크인 url을 할당 해서 이미지를 설정 한다.

 

4.

addEventListener 메서드를 사용해서 이미지가 로딩이 되면, 이벤트에 대한 콜백 함수 (setTimeout) 를 등록 한다.

 

5. 1초 후에 (1000ms) 로딩이 완료 되면 콜백 함수 cb를 호출 한다.

 

6. 콜백 함수 cb의 인자로 로딩된 이미지 요소를 imgEL 이라는 매개변수로 받는다.

 

7. HTML 문서에서 container 이라는 클래스를 찾고, const 키워드가 붙혀진 containerEL 이라는 변수에 저장 한다.

 

8. 기존에 container 클래스 내부에 있는 것을 모두 비우고 (innerHTML = ' ') 로딩된 이미지를 append 한다.

 

 

 

 

반응형

'자바스크립트 (JavaScript) > 예제' 카테고리의 다른 글

달력 예제  (1) 2023.08.27
로그인 폼  (0) 2023.08.27