반응형 javascript58 브라우저에서 '사이트에서 나가시겠습니까?' 표시하는 방법 window.addEventListener("beforeunload", (event) => { event.returnValue = true; }); window.onbeforeunload = () => { return true; }; 이 이벤트를 사용하면 사용자에게 실제로 페이지를 나갈것인지 묻는 alert창이 뜹니다. 확인하면 새 페이지로 이동하고 취소하면 해당 페이지에 머무릅니다. 2023. 2. 9. html2canvas CORS 우회하기 화면과 같이 드래그해서 이미지들을 캡쳐해서 서버에 다운로드 시키는 기능이 있었다. 문제는 이미지들이 다른 서버에서 가져온 이미지여서 html2canvas로 canvas로 변환할때 CORS오류가 나는 것이였다. 원본데이터가 오염 및 안전하지 않다고 판단하여 js에서 오류가 발생한 것이다. https://developer.mozilla.org/ko/docs/Web/HTML/CORS_enabled_image 교차 출처 이미지와 캔버스 허용하기 - HTML: Hypertext Markup Language | MDN HTML은 이미지 처리를 위해 CORS header를 포함하고 있는 crossorigin 속성을 제공합니다. 이는 요소에서 정의된, 외부 origin으로 부터 가져오는 이미지가 에서 사용할 수 있도록.. 2022. 12. 11. JSDoc JSDoc을 사용하면 자바스크립트 소스코드에 타입 힌트를 제공할 수 있다. JSDoc 주석은 /** ... */ 사이에 기술한다. 일반적인 자바스크립트 주석 /* ... */은 무시된다. TypeScript를 사용하는 것처럼 타입을 추론하고 디버깅을 쉽게 할 수 있다는 장점이 있다. 코드에 맞는 JSDoc 태그의 사용법은 https://jsdoc.app/ 에서 볼 수 있다. 변수 /** @type {string} */ let str; /** @type {number} */ let num; /** @type {boolean} */ let bool; /** @type {*} */ let any; /** @type {?} */ let unknown; /** @type { {id: number, content:.. 2022. 8. 30. setTimeout + async/await로 sleep 자바나 파이썬에는 실행을 입력한 시간만큼 멈추는 sleep이나 wait가 있지만 자바스크립트에서는 사용자가 직접 구현해야합니다. setTimeout이 비슷하지만 아래와 같이 사용하면 예상이랑 다른 결과가 나옵니다. function test(){ console.log('a'); setTimeout(() => console.log('time'), 3000); console.log('b'); } // a // b // time setTimeout은 비동기로 동작하기 때문에 먼저 실행이 가능한 a, b가 먼저 콘솔에 찍히고 3초후에 time이 찍힙니다. async/await 사용하면 동기적으로 실행을 하게 할 수 있지만 setTimeout은 Promise를 반환하지 않기 때문에 async/await를 적용해도 .. 2022. 6. 28. for loop 에서 우선순위 찾기 배열에서 우선순위에 있는 요소를 찾아 리턴해주는 방법입니다. const arr1 = ["blue sea", "banana yellow", "red apple", "green wood", "white egg"]; const arr2 = ["banana yellow", "green wood", "blue sea"]; const priorityArray = ["red", "blue", "green", "yellow"]; function findPriorityElement(arr) { for (p of priorityArray) { const match = arr.find(v => v.includes(p)); if (match) { return match; } } } console.log(findPriority.. 2022. 6. 9. 더 깔끔한 조건문 사용하기 function test(fruit) { if (fruit === 'apple' || fruit === 'strawberry') { console.log('red'); } } 이러한 조건문이 있는데 여기에 조건을 더 추가를 한다면 || 를 확장하게 될겁니다. function test(fruit) { if (fruit === 'apple' || fruit === 'strawberry' || fruit === 'cherry' || fruit === 'cranberries' ) { console.log('red'); } } 이것을 Array.includes 를 사용하여 간결하게 쓸 수 있습니다. function test(fruit) { const fruitsList = ['apple', 'strawberry'.. 2022. 5. 12. 이전 1 2 3 4 5 ··· 10 다음 반응형
