이벤트 좌표 client, offset 차이
clientX, clientY clientX : 브라우저 페이지에서의 X좌표 위치를 반환하나 스크롤은 무시하고 해당 페이지의 상단을 0으로 측정합니다. clientY : 브라우저 페이지에서의 Y좌표 위치를 반환하나 스크롤은 무시하고 해당 페이지의 상단을 0으로 측정합니다. offsetX, offset ...
고양이발
자료구조 : 스택(Stack), 큐(Queue), 덱(Deque)
스택 (Stack) LIFO (Last In First Out) : 후입선출 구조 한쪽 끝에서만 자료를 넣고 뺄 수 있는 접시처럼 쌓아올린 형태의 구조 삽입 (Push) : top에 데이터가 저장된다. 삭제 (Pop) : top의 데이터가 삭제된다. 자료가 없을 때 pop 하는 오류를 stack underflow, 스택의 크기...
Typescript NPM 모듈 만들기
tsconfig 설정 { "compilerOptions": { "target": "es5", "module": "commonjs", "declaration": true, "outDir": "./dist", "strict": true } } 기존 tsconfig 설정에 "declaration": true ...
디바이스 감지 Detect Devices
Ipad (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1) || navigator.platform === "iPad"; mobile const toMatch = [ /Android/i, /webOS/i, /iPhone/i, /iPad/i...
Detect Browser - 브라우저, 버전 감지하기
브라우저 구하기 const detectBrowser = (reg) => { return reg.test(navigator.userAgent); }; const isChrome = detectBrowser(/chrome|crios|crmo/i); const isChromium = detectBrowser(/chromium/i); const ...
서버 사이드 렌더링(SSR) vs 클라이언트 사이드 렌더링(CSR)
서버 사이드 렌더링(SSR) 사용자가 페이지를 이동할 때마다 서버에서 새로운 페이지를 받아온다. 서버가 내용이 담긴 html 파일을 보내면 브라우저가 받아서 렌더링한다. 이후 브라우저는 서버로부터 js 파일을 받아 페이지에 적용시킨다. 서버로부터 만들어진 html을 받기 때문에 첫 ...
[error] The play() request was interrupted by a call to pause()
<video id="video" preload="none" src="https://example.com/file.mp4"></video> <script> video.play(); // <-- This is asynchronous! video.pause(); </script> Uncaught ...
모두의 네트워크 - 02 네트워크의 기본 규칙
네크워크의 기본 규칙 네트워크의 규칙 컴퓨터 간에 정보를 주고받을 때의 통신 방법에 대한 규칙을 프로토콜이라고 한다. 편지를 배송하기 위해서는 편지를 쓸 때부터 상대방에게 도착할 때까지 지켜야 하는 독립적인 여러 규칙을 거쳐야 한다. OSI 모델과 TCP/IP 모델 네트워크에서는 데이터를 주고받기 위한 통신 규격이 정해...
모두의 네트워크 - 02 네트워크의 기본 규칙
네크워크의 기본 규칙 네트워크의 규칙 컴퓨터 간에 정보를 주고받을 때의 통신 방법에 대한 규칙을 프로토콜이라고 한다. 편지를 배송하기 위해서는 편지를 쓸 때부터 상대방에게 도착할 때까지 지켜야 하는 독립적인 여러 규칙을 거쳐야 한다. OSI 모델과 TCP/IP 모델 네트워크에서는 데이터를 주고받기 위한 통신 규격이 정해...
Mobile Canvas🎨 클래스 만들기🖌
Why? VP host에서 simple-canvas 라이브러리를 사용하던 중 에러 발생. (ios 기기에서 그리기 좌표 안맞음 등) 모바일 브라우저에서 문제 없이 작동하는 심플한 Painter 클래스를 만들기로 함. How? React + TypeScript EventEmitter EventListener Painter Con...