JS (22) 썸네일형 리스트형 (JS) ECMA 262 - TC39 new feature 2022.6 version ECMAScript 2022, the 13th edition, introduced top-level await, allowing the keyword to be used at the top level of modules; new class elements: public and private instance fields, public and private static fields, private instance methods and accessors, and private static methods and accessors; static blocks inside classes, to perform per-class evaluation initialization; the #x in obj syntax, to.. (JS) console 객체 console.log('기본'); console.info('정보'); console.warn('경고'); console.error('에러'); console.dir(document.body); // DOM 객체 메서드를 보고 싶을 때 [JS] 마우스 클릭 좌표 (feat. canvas) JS 에서 2D로 화면에 그림을 그릴 때 canvas를 많이 활용한다. 이때 마우스 클릭의 좌표의 값을 체크하는데 기본적인 좌표값의 이름들을 알아보자. 중요도 순서 1. clientX, clientY 뷰포트를 기준으로 좌표를 표시한다. 스크롤바가 움직이더라도 마우스로 클릭한 clientX, clientY의 값은 바뀌지 않는다. 2. offsetX, offsetY DOM을 기준으로 좌표를 표시한다. React에서 useRef로 설정한 DOM 객체의 영역에서 왼쪽 상단 모서리 부분(0, 0)을 기준으로 offsetX와 offsetY 좌표값을 출력한다. 나머지 screenX, screenY pageX, pageY도 있다. 추가 참고는 아래 링크 https://hianna.tistory.com/493 (JavaScript) DOM 조작방법 DOM과 JavaScript의 차이에 대해 이해할 수 있다. DOM은 JavaScript 언어의 일부가 아니라 웹사이트를 구축하는 데 사용되는 Web API. JS는 다른 컨텍스트에서도 사용할 수 있다. DOM은 특정 프로그래밍 언어와 독립적으로 설계되어 문서의 구조적 표현을 일관된 단일 API에서 사용할 수 있습니다. createDocumentFragment를 활용하여, 더 효율적으로 DOM을 제어할 수 있다. HTML5 template tag 사용법을 이해할 수 있다. : The Content Template element - HTML: HyperText Markup Language | MDN The HTML element is a mechanism for holding HTML that is not.. (JavaScript) 번들링과 빌드 시스템 bundler 웹서비스 규모가 커지면서 수백줄의 코드, 수십개의 JS파일을 읽어야 하면서 발생하는 문제점 전역 범위를 파일의 중복 선언 느린 로딩 수동적인 웹 개발 루틴 작업 (파일, 이미지 압축 / CSS 전처리기 변환 등) 번들러(bundler)란, 웹 애플리케이션을 구성하는 모든 자원을 하나의 파일로 묶는(번들) 도구를 의미합니다. Webpack 프론트엔드 프레임워크에서 가정 대중적인 모듈 번들러. 모듈: 웹 애플리케이션을 구성하는 특정 기능의 자원 JS 파일 뿐만 아니라 HTML, CSS, image,Font 등의 수십개의 파일을 하나의 JS파일로 압축, 축소 장점: 서버와 여러번 통신하지 않아도 됨. 로딩 속도 높아짐 transpile 최신 버전으로 작성된 자바스크립트 코드를 하위 버전의 자바스.. (DOM) querySelector의 부모는 꼭 document 객체여야만 하는가? document.querySelector() element.querySelecotor() 꼭 document만 들어갈 필요가 없다. document 하위의 어떤 객체이든 간에 자식 요소를 가지고 있다면 querySelector의 부모 요소가 될 수 있다. (링크) var x = document.getElementById("myDIV"); x.querySelector(".example").innerHTML = "Hello World!"; (DOM) querySelector로 좀 더 복잡한 요소를 선택해 보자. CSS 셀렉터(=선택자)에서 '기본 속성 선택자' 를 활용하여 좀 더 복잡한 요소를 선택해 보자. HTML에서 클래스명이 tweet 이라는 요소를 조회하는 DOM메소드는 querySelector('.tweet') 이다. 그렇다면 아래의 DOM메소드는 어느 요소를 조회하는 메소드일까? let oneEle = document.querySelector("div.user-paner.main input[name=login]"); 위의 예제는 MDN querySelector에 나온 것이다. 예제의 결과는 클래스가 "user-panel main"인 안에 이름이 "login"인 중 첫번째 요소를 조회하는 것이다. input[name=login]은 CSS 선택자의 기본 속성 선택자이며, div.user-paner.mai.. (JS) DOM과 Jquery로 짠 코드 간단한 차이 DOM JQuery 추천 도서 : 'DOM을 깨우치다' 이전 1 2 3 다음
