WEB&서버 (18) 썸네일형 리스트형 [WEB] MutationObserver API https://developer.mozilla.org/ko/docs/Web/API/MutationObserver MutationObserver - Web API | MDN MutationObserver 는 개발자들에게 DOM 변경 감시를 제공합니다. DOM3 이벤트 기술 설명서에 정의된 Mutation Events 를 대체합니다. developer.mozilla.org WEB API 중에는 'Observer'이라는 표현이 붙는 종류의 API들이 존재하는데, 이들은 등록된 특정 이벤트가 감지되면 콜백에 정의된 동작을 수행한다. MutationObserver은 이러한 API 중 하나로, DOM 상에서 발생하는 특정 변경사항을 감시하는 역할을 수행한다. 사용법 const mutObserver = new Mut.. [WEB] console.log로 객체를 출력하지 말자 인터넷에서 자바스크립트 관련 정보를 찾다가 다음과 유사한 코드를 봤다. const something = document.createElement('something'); console.log(something); something.innerHTML = 'hello'; console.log(something); something.innerHTML += ' my world!'; console.log(something); 코드의 요점은 웹 브라우저에서 엘리먼트를 생성한 후 innerHTML을 수정, 엘리먼트를 출력하는 것이다. 코드 자체는 단순하고 결과도 쉽게 예상할 수 있을 만했는데, 의외로 예상하지 못한 결과가 나타났다. 아마 이 글을 보는 대부분의 사람들은 다음과 같은 결과를 예상했을 것이다. "" "h.. 브라우저 동작 관련 읽어볼만한 내용들 https://developer.chrome.com/blog/inside-browser-part1/ Inside look at modern web browser (part 1) - Chrome Developers Learn how browser turn your code into functional website from high-level architecture to the specifics of the rendering pipeline. developer.chrome.com 2018년 기준 웹 브라우저가 어떻게 구성되는지 4부에 걸쳐 설명한다. https://web.dev/howbrowserswork/ 또는 https://d2.naver.com/helloworld/59361 ( 한글 번역 ) How .. [WEB] 웹 상의 전역변수 length 최근 자료구조를 공부하면서 타입스크립트로 자료구조를 구현해보고 있다. 힙을 구현해보는 과정에서 현재 힙의 크기를 length라는 이름으로 지정했는데, 분명 타입 문제가 없음에도 불구하고 어디선가 오류가 발생해서 힙 정렬이 제대로 동작하지 않는 문제가 있었다. 구현된 내용은 vite을 이용하여 웹 콘솔에서 출력했다. 당시 코드의 일부는 다음과 같다. export class ABHeap { /** * priority: val1 > val2 를 반환하는 비교 함수 */ protected comp: Predicate; list: HElem[]; protected readonly maxLen: number; protected length: number = 0; //... delete() { if (this.isE.. [WEB] 데이터 속성 https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/Use_data_attributes 데이터 속성 특정 사이트를 돌아다니다 보면, 익숙한 태그에 data-* 형식의 속성이 붙어 있는 경우가 존재한다. 이러한 속성들은 태그에 추가하고 싶은 정보가 있으나 대응되는 속성이 표준에 존재하지 않는 경우, 표준 HTML 범위 안에서 해당 정보를 추가할 때 사용한다. HTML은 사용자가 표준에 없는 속성을 태그에 나열해도 오류를 발생시키지 않는다. 당장 위 스크린샷만 보더라도 div 태그에 정의되지 않은 속성 jscontroller 및 jsacti.. [웹 스크래핑] 셀레니움 사용법 https://www.selenium.dev/ 셀레니움은 웹 브라우저에 대한 테스팅 자동화 목적으로 등장한 프레임워크로, DOM 상의 엘리먼트들에 접근해서 명령을 내리거나, 여러가지 정보를 가져올 수 있다. 특히 동적으로 동작하는 웹 브라우저에서 아직 등장하지 않은 엘리먼트를 기다리거나, 특정 엘리먼트에 직접 접근하여 자바스크립트 기반 명령을 내릴 수도 있는 등 다양한 기능을 가지고 있기 때문에 동적 웹사이트의 정보를 읽어오는 기능이 탁월하다. 위와 같은 특징들에 기반하여 셀레니움은 웹 스크래핑에도 자주 사용된다. 이때 유사한 용어로 웹 크롤링이라는 말도 많이 사용하는데, 약간의 뉘앙스 차이가 있다. 웹 크롤링 https://en.wikipedia.org/wiki/Web_crawler 봇을 이용하여 보관.. SSH nginx 관련 강의를 듣는 도중 외부 서버를 이용하는 실습을 하게 되었다. 아직 AWS 프리티어가 있기 때문에 EC2 서비스를 이용해보고자 했는데, EC2 서버를 로컬 영역에서 접근하려면 SSH 을 이용해야 한다는 것을 알게 되었다. SSH 를 어디선가 많이 들어보기는 했는데, 정확이 이게 뭐하는 놈인지를 잘 알지 못해서 조금 공부했다. https://www.youtube.com/watch?v=ORcvSkgdA58 기술의 발단 과거 컴퓨터는 데이터에 보안 관련 처리를 하지 않은 채로 패킷 단위로 나눠 통신했다. 기본적으로 모든 패킷은 라우터 및 스위치 , 랜선 등을 거쳐야만 상대방의 컴퓨터에 적절하게 도착할 수 있는데, 이 넓은 범위 중 어디서든 패킷 정보를 훔칠 수 있었기 때문에 유저의 정보는 해커들.. [WEB] beforeunload 이벤트 특정 사이트 사용을 위해 유저가 로그인하는 상황을 생각해보자. 엄청난 양의 개인 정보를 작성한 이후 회원가입 버튼을 누르려는 찰나, 실수로 새로고침을 누르거나, 북마크에 있는 다른 사이트 링크를 클릭하여 기입했던 정보를 모두 잃어 처음부터 작성해야 하는 불상사가 일어나면 어떨까? 유저는 매우 부정적인 경험을 하게 되며, 해당 사이트의 대체제가 있다면 다른 사이트를 사용할 지도 모른다. 이를 방지하기 위해서는 유저의 행동이 의도된 것인지 확인할 필요가 있다. 위와 같이 유저가 현재 페이지를 벗어나는 상황을 재확인 해야 하는 경우, beforeunload 이벤트를 이용한다. Window: beforeunload 이벤트 - Web API | MDN beforeunload 이벤트는 문서와 그 리소스가 언로드 되.. 이전 1 2 3 다음
