Web Front End

[Javascript] Event & EventListener

addEventListener("click", ()⇒{}) 이벤트 등록 표준방법 첫 번째 인자: 발생하는 이벤트 이름 두 번째 인자: 이벤트가 발생할 때 실행되는 함수 / 이벤트핸들러 / 이벤트리스너 event Type https://developer.mozilla.org/en-US/docs/Web/Events https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_handler_properties

[Javascript] Web API - Window

Window DOM 문서를 포함하는 창 현재 스크립트가 작동 중인 창을 나타내는 전역 변수 주요 메소드 Window.alert() Window.open() Window.requestAnimationFrame() Window.requestIdleCallback() EventTarget.addEventListener() GlobalEventHandlers.onclick() GlobalEventHandlers.onfocus()Referrence https://developer.mozilla.org/ko/docs/Web/API/Window

[Javascript] DOM API

document.getElementById("{id}"); 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환 ID가 없는 요소에 접근하려면 Document.querySelector()를 사용 찾으려는 id가 없으면 null 반환 document.querySelector("{css selector}"); document.querySelectorAll("{css selector}"); getElementId + innerHTML Node Type elements, text, comments 처럼 서로 다른 종류의 노드를 구별하는데 사용 가능 HTML Node 탐색 text를 포함하여 탐색할 수 있음 let divEl = documenlt.querySelecto..

[HTTP] DOM과 브라우저 동작방식

[DOM 문서 객체 모델 HTML, XML 문서의 프로그래밍 Interface 문서의 구조화된 표현 제공 프로그래밍 언어가 DOM 구조에 접근 가능한 방법 제공 문서 구조, 스타일, 내용 변경 가능하게 도움 웹페이지 : 일종의 document Object로 구성되어 있음 구성 요소: property, method, event 웹페이지의 객체지향 표현 DOM API(함수묶음정도) 제공 브라우저 동작방식 브라우저는 어떻게 동작하는가 Naver D2 https://d2.naver.com/helloworld/59361 https://poiemaweb.com/js-browser (브라우저 동작원리) 자바스크립트는 렌더링 엔진이 아닌 자바스크립트 엔진이 처리한다. 랜더링 엔진 기본동작 과정 자바스크립트 엔진 JS를..

[HTML] <div> tag 의미와 의문점 정리

tag란? Division의 약자 레이아웃을 나눌 때 쓰는 태그 특별한 기능을 가지고 있지 않음 가상의 레이아웃 설계에 쓰임 용도 랩핑하기 위해 많이 쓰임 시맨틱 태그가 있는데 무분별하게 쓰는 것은 권장되지 않음 왜 div를 사용해야 할까? html은 와 같은 이름의 태그를 써도 에러가 나지 않는다. 그러면 아래와 같이 div 태그가 많은 것을 없애고 각각의 의미가 있는 태그를 만들어 쓰면 되지 않을까 하는 의문이 들었다. airbnb 메인 홈페이지의 소스코드 중 일부 언뜻 생각할 때, 의미가 있고 가독성이 좋아질 것 같아 보인다. div 태그 자체도 특별한 의미가 없는데 div 태그를 쓰는 이유는 무엇일까? 몇 가지 이유를 검색을 통해 찾을 수 있었다. 브라우저에서 처리하고 렌더링하기가 더 쉬워지기 때..

[HTML] 특수문자 Unicode

Unicode란? 전 세계의 모든 문자를 컴퓨터에서 일관되게 표현하고 다룰 수 있도록 설계된 산업 표준 목적: 현존하는 문자 인코딩 방법들을 모두 유니코드로 교체하려는 것 한글 ↔ 유니코드 간편 변환기 https://raisonde.tistory.com/entry/한글-↔-유니코드-간편-변환기 참고 https://ko.wikipedia.org/wiki/유니코드 https://www.w3schools.com/charsets/ref_html_entities_j.asp