WWWEB/Script23 [js] keyCode는 그만 쓰자! 요약: keyCode 대신 code를 사용하자 KeyboardEvent: keyCode KeyboardEvent: keyCode property - Web APIs | MDN The deprecated KeyboardEvent.keyCode read-only property represents a system and implementation dependent numerical code identifying the unmodified value of the pressed key. developer.mozilla.org Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may ha.. 2024. 1. 16. 타입스크립트 핸드북, 윈터루드님의 소개 - 한 입 크기로 잘라먹는 타입스크립트 한 입 크기로 잘라먹는 타입스크립트 ts.winterlood.com 🌱 Section 1. 타입스크립트 개론 기술을 잘 이해하려면 그것이 어떤 배경에서 탄생했는지 알 필요가 있습니다. 1섹션 에서는 타입스크립트의 탄생 배경을 살펴보며 타입스크립트가 해결하고자 했던 문제가 무엇이고 타입스크립트가 어떤 특징을 가지고 있는지 자세히 살펴봅니다. 🌱 Section 2 ~ 3. 타입스크립트 기초 다지기 가장 기본적인 타입스크립트의 문법을 살펴봅니다. 동시에 타입스크립트가 말하는 타입이란 정확히 무엇인지 그리고 타입들이 서로 어떤 관계를 맺고 어떻게 상호작용하는지 살펴봅니다. 🌱 Section 4 ~ 6. 다양한 타입스크립트 문법 살펴보기 함수 타입 정의, 함수 오버로딩.. 2023. 7. 10. [ js ] 스크립트 동적 생성하기 - 스크립트는 동적으로 추가하여 실행하는 경우 async와 같이 비동기로 실행됨. - 즉, 스크립트가 추가가 되는 즉시 다운로드를 시작하며, 다운로드가 완료되면 바로 실행함. - 아래와 같이 "js.async=false"를 주는 경우에 스크립트는 문서에 추가된 순서대로 실행하게 됨. let js = document.createElement( "script" ); js.src = "async-script.js"; js.async = false; // 문서에 추가된 순서대로 실행해야 하는 경우 사용. document.body.append(script); // body에 추가. 2023. 4. 25. [ js ] defer vs async 브라우저는 HTML을 읽을 때 태그를 만나면 DOM생성을 멈추고 스크립트를 먼저 실행하는데, 이런 경우 아래와 같은 문제점이 발생함. 1. 스크립트가 먼저 작성된 경우 DOM요소에 접근할 수 없음. 2. 스크립트의 크기가 큰 경우 해당 스크립트를 다운받고 실행할 때까지 아래쪽 페이지를 볼 수 없음. 이런 문제를 해결할 수 있는 속성이 바로 defer와 async임. 두 속성은 기본적으로 페이지 렌더링을 막지 않는 공통점을 갖고 있으나 아래와 같은 차이점이 있음. defer - 페이지 생성을 막지 않아 페이지 콘텐츠가 바로 출력됨. - DOM이 준비된 후 실행됨. - DOMContentLoaded 이벤트 발생 전 실행됨. - 스크립트 크기와 상관없이 작성 순서에 맞게 실행됨. - 에 src 속성이 없으면 .. 2023. 4. 25. [ js ] 크로스도메인에서 iframe 높이값 자동 처리하기 서로 다른 도메인을 가진 아이프레임 페이지를 부른 후 높이값을 맞춰주고 싶은데, top.document, parent.frame 등과 같이 직접 접근이 불가하다. 이 경우 window.postMessage() method를 사용하면 되는데, 이 method는 윈도우 오브젝트 사이에서 안전하게 cross-origin 통신을 할 수 있게 한다. 아래 예시 코드로 확인해보자. 부모 페이지 (parent-site) function fn_postMessageController( e ){ if( e.origin === "http://child-site.com" ){ document.querySelector( "#iframe-id" ).setAttribute( "height", parseInt( e.data ) );.. 2023. 3. 2. javascript로 style 삭제 방법 javascript로 html에 인라인 스타일로 들어가 있는 style을 삭제하려고 찾아보니 여러가지 다양한 방법을 찾을 수 있었다. 아래 코드들을 통해 정리해봄. 1. removeProperty() document.querySelector( 'button' ).onclick = function(){ const obj = document.getElementById( 'container' ); obj.style.removeProperty( 'border' ); } 2. 빈 문자열 document.querySelector( 'button' ).onclick = function() { const obj = document.getElementById( 'container' ); obj.style.border =.. 2023. 1. 2. [자바스크립트] Keycode 이벤트 코드값 자바스크립트에서 키보드 이벤트 시 키코드 값을 키보드 배열을 참고해서 표로 정리해보았다. 기능키 ESC (27) Backspace (8) Insert (45) Home (36) PgUp (33) Tab (9) Delete (46) End (35) PgDn (34) CapsLock (20) Enter (13) Shift (16) Shift (16) ↑ (38) Ctrl (17) Alt (18) Spacebar (32) Alt (18) ← (37) ↓ (40) → (39) 알파벳 q (81) w (87) e (69) r (82) t (84) y (89) u (85) i (73) o (79) p (80) a (65) s (83) d (68) f (70) g (71) h (72) j (74) k (75) l (.. 2022. 12. 28. slick slider 사용법과 옵션 캐러셀 중 개인적으로도 선호하는 라이브러리인 slick 사용법에 대해 알아보았다. 1. slick 파일 다운로드 및 적용 다운로드는 https://kenwheeler.github.io/slick/ 에서 "git it now" 클릭 후 ⏬ 코드 예시 your content your content your content ※ slick 캐러셀은 jQuery기반 라이브러리로 jquery 파일이 필수다. 2. 기본 사용법 /* 1개만 보여주는 경우 */ $( '.single-item' ).slick(); /* 여러개 보여주는 경우 */ $( '.multiple-items' ).slick({ infinite: true, slidesToShow: 3, slidesToScroll: 3 }); 3. 자주 사용하는 옵션 .. 2022. 12. 28. [js] 시크릿 모드 체크하기 예시 크롬 브라우저는 쿠키, 세션, 기록, 양식 데이터, 비밀번호 및 임시 데이터를 저장하고, 시크릿 모드는 이러한 정보를 별도의 위치에 저장하고 시크릿 창이 닫히면 삭제하게 된다고 함. 사이트 정책에 따라 쿠키나 세션을 사용할 수 없는 경우 문제가 되는 경우가 있는데, 아래 스크립트를 이용해서 사용자가 시크릿모드를 사용하는지를 체크해볼 수 있음~ 1. function 작성 /** * 시크릿모드 확인(Determine wheter the incognito mode of Google Chrome is available or not.) * * @시크릿모드인 경우 반환되는 익명함수 */ function isPrivateMode( callback ){ let fileSys = window.RequestFileSyst.. 2022. 12. 22. 이전1 1 2 3 다음 728x90 반응형
