Programming/Javascript, Typescript18 [javascript] jquery one()의 vanilla js once 옵션을 이용하면 된다. document.getElementById('btnTest').addEventListener('click', () => { // do something }, { once: true, }); https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener EventTarget: addEventListener() method - Web APIs | MDN The addEventListener() method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered .. 2024. 2. 11. [javascript] IE에서 Edge로 redirect하기 역사의 뒤안길로 사라진 IE. Google, Twitter, Facebook, Instagram 등 사이트는 IE로 접근 시 다음과 같이 동작한다. 1. IE는 "이 웹 사이트는 Microsoft Edge에서 더 잘 작동합니다." 안내 페이지로 이동 2. Edge browser로 해당 사이트를 팝업 한다. 다음 소스코드로 구현할 수 있다. if (/MSIE \d|Trident.*rv:/.test(navigator.userAgent)) { window.location.href = 'microsoft-edge:' + window.location.href; setTimeout(function () { window.location.href = 'https://go.microsoft.com/fwlink/?link.. 2022. 7. 12. Heroku로 Node.js 배포하기(github action, secrets 설정) 아래 repository에서 Heroku로 git action을 이용해서 간단 CI/CD를 구현했다. https://github.com/HanJaeJoon/Web3API GitHub - HanJaeJoon/Web3API: Node.js + vanilla js NFT transfer Node.js + vanilla js NFT transfer. Contribute to HanJaeJoon/Web3API development by creating an account on GitHub. github.com 물론 아래와 같이 Heroku에서 Automatic Deploys를 설정해도 된다. 하지만 일일이 github secrets를 Heroku settings > Config Vars에 입력해야 해서 귀찮다. .. 2022. 7. 7. [javascript] delay 실행 반복하기 1초를 기다리면서 10번 반복하려면 아래와 같이 recursive 함수를 이용하면 된다. var idx = 1; function loop(n) { setTimeout(function() { console.log(idx); idx++; if (idx 2021. 8. 14. [Javascript] Map object IE 10 이하 버전에서 사용하기(core-js) javascript Map object를 사용하는 라이브러리 때문에 IE 11 미만 버전을 지원하지 못하는 상황이 벌어졌다. IE 좀 쓰지마라!! 🤬🤬🤬 자료를 조사하던 중 MDN See also 메뉴에 한 줄기 희망이 보였다. A polyfill of Map is available in core-js core-js는 생각보다 많은 곳에서 사용 중인 라이브러리였다(심지어 Babel도). core-js를 사용하니까 IE 11 미만에서도 Map object를 사용할 수 있었다. 하지만 내년이면 없어질 IE를 위해(심지어 old 버전) 이렇게까지 투자를 해야 하는지 모르겠다. 참고 core-js CDN 링크 core-js(minified) CDN 링크 2021. 7. 6. [javascript] jquery ajax, Blob을 이용한 file download 전에 회사에서 csv, excel export 기능을 개발한 적이 있다. 이번 회사에서도 새로 개발하려니 기록이 없어서 꽤 고생했다. 이번에는 잘 기록해두어야지.😊 먼저, XmlHttpRequest의 response Type을 Blob(Binary type)으로 설정한다. $.ajax({ url: url, data: parameters, type: 'POST', cache: false, xhrFields: { responseType: "blob", }, }) 서버에서는 다음과 같이 response를 해준다. 한글이 포함된 파일명도 잘 보이게 하도록 파일명을 URL encoding했다. Content-Disposition: attachment; filename=%ed%95%9c%ea%b8%80_file_d.. 2021. 7. 1. [Javascript] Object Clone하기(shallow copy/deep copy) shallow copy: {...obj}, Object.assign({}, obj) deep copy: JSON.parse(JSON.stringify(obj)) let obj = { a: 1, b: 2, c: { level: 1 } }; // Spread Operator를 사용하는 방법 let newObject1 = { ...obj }; // Object.assign을 사용하는 방법 let newObject2 = Object.assign({}, obj); // JSON.stringify 후 JSON.parse하는 방법(조잡하다...) let newObject3 = JSON.parse(JSON.stringify(obj)); // 모두 같다 console.log(newObject1.c.level); // 1.. 2021. 6. 30. DOM Element의 ID는 전역 변수로 사용할 수 있다. DOM element의 id는 전역 변수로써 사용할 수 있다. 아무리 생각해도 글로 설명하기 어렵다. 아래 예시가 이해하기 쉬울 것이다. HTML JS test.innerText = "this is text"; https://jsfiddle.net/jjhan/u2bqL4dw/1/ 오늘 element id와 전역함수의 이름이 공교롭게도 같아서 클라이언트단에서 에러가 발생했다. Uncaught ReferenceError: something is not defined 일반적으로 DOM element의 id는 prefix(btn, select 등등)를 붙이기 때문에 충돌이 발생할 경우는 없지만 이 사실을 몰랐더라면 꽤나 헤맬 수 있었던 이슈다. 운이 좋게 이직 전에 이 사실을 알게 되어서 쉽게 찾아서 고칠 수 .. 2021. 6. 25. [javascript] 빈 Object 확인하는 법 javascript에서 빈 object({})인지 확인하려면 아래와 같이 확인하면 된다(ES5 이상). var isEmptyObject = obj && Object.keys(obj).length === 0 && obj.constructor === Object 주의할 점 만약 빈 object가 아닌 경우를 조건으로 할때 isEmptyObject === false 조건을 이용해야 한다. !isEmptyObject 의 경우 obj가 null일때 문제가 된다. null && true, null && false 모두 null이고 !null은 true이기 때문이다. if (isEmptyObject === false) // 이렇게 사용 if (!isEmptyObject) // 사용 x, obj가 null인 경우 문제 2021. 6. 16. 이전 1 2 다음
