본문 바로가기

javascript56

Cookie Store API https://developer.mozilla.org/en-US/docs/Web/API/CookieStore CookieStore - Web APIs | MDN The CookieStore interface of the Cookie Store API provides methods for getting and setting cookies asynchronously from either a page or a service worker. developer.mozilla.org 쿠키 가져오기 쿠키를 사용하려면 아래처럼 전체 문자열을 뒤져보거나 라이브러리를 사용했어야 했다. function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie... 2024. 2. 22.
FE 클린코드 https://velog.io/@chooble/%EC%8B%A4%EB%AC%B4%EC%97%90%EC%84%9C-%EB%B0%94%EB%A1%9C-%EC%93%B0%EB%8A%94-FE-%ED%81%B4%EB%A6%B0%EC%BD%94%EB%93%9C-by-Toss 실무에서 바로 쓰는 FE 클린코드 by Toss & 진유림님 SLASH 21에서 진유림님께서 발표하신 "실무에서 바로 쓰는 Frontend Clean Code" 영상을 분석하였습니다. velog.io 2023. 8. 29.
백틱 tagged templates tagged templates를 사용하면 함수의 인자를 구분지을 수 있습니다. 태그 함수의 첫번째 인자는 문자열 값의 배열이고 나머지는 인수 표현식과 관련됩니다. var person = 'Mike'; var age = 28; function myTag(strings, personExp, ageExp) { /* strings: [ "that ", " is a ", "" ] */ var str0 = strings[0]; var str1 = strings[1]; var str; ageExp > 99 ? str = 'centenarain' : str = 'youngster' return str0 + personExp + str1 + str; } var output = myTag `that ${ person } .. 2023. 5. 19.
memoize Memoize는 동일한 인수로 연산 비용이 많이 드는 루틴을 여러 번 호출하는 것을 방지하기 위해 특정 함수의 결과를 캐싱하는 용도로 사용된다. 입력 변수를 기반으로 복잡한 계산을 수행하는 함수가 있다면, 결과 값을 캐싱하고 동일한 입력값으로 여러 번 호출될 때 즉시 값을 가져올 수 있도록 memoize() 함수를 사용할 수 있다. function memoize(func) { const cache = new Map(); return function() { const key = JSON.stringify(arguments); if (cache.has(key)) { return cache.get(key); } const result = func.apply(this, arguments); cache.set(k.. 2023. 3. 22.
브라우저에서 '사이트에서 나가시겠습니까?' 표시하는 방법 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.