hmk run dev

1. ClientX, ClientY 클라이언트 영역(현재 보여지는 브라우저 화면 기준)을 기준으로 가로, 세로 좌표를 제공 clientX - 스크롤은 무시하고 해당페이지 상단을 0으로 측정하여 클라이언트 영역에서 X위치를 반환 clientY - 스크롤은 무시하고 해당페이지 상단을 0으로 측정하여 클라이언트 영역에서 Y위치를 반환 2. OffsetX, OffsetY 이벤트 대상을 기준의 좌표 ex) 화면 중앙의 박스 요소에서 클릭한 위치를 찾으면 박스위 왼쪽 모서리 좌표가 0으로 측정됨 offsetX - 이벤트 대상을 기준으로 상대적 마우스 x좌표 반환 offsetY - 이벤트 대상을 기준으로 상대적 마우스 y좌표 반환 3. pageX, pageY 스크롤을 포함한 전체 문서를 기준으로 x,y 좌표를 반환 ..

webpack이란? - 모듈 번들링이라고 한다. - html 파일에 들어가는 JS파일들을 하나의 파일로 만들어주는 방식을 모듈 번들링이라고 한다. > 쉽게말해 다수의 JS파일들을 하나의 JS파일로 만들어주는 것을 webpack이라고 할 수 있다. 사용하는 이유 - SPA가 나오기 이전 html을 요청해 뿌려서 화면을 보여줬는데 SPA가 등장한 이후 하나의 HTML페이지에 여러가지 자바스크립트 파일이 포함된고 연관되어 있는 JS 종속석 있는 파일들을 하나의 파일로 묶어줘 관리하기가 편하다. - 파일을 컴파일 할 때, 여러 모듈을 읽어오는데 시간이 오래거리는 것을 해결하기 위해 여러 파일을 하나의 파일로 번들링 해준다. > 하나의 JS파일로 만들어 웹페이지 성능 최적화 webpack 설치 1. npm ini..

웹 어셈블리란 왜 쓰는 것일까? 새로운 프로그램 언어가 아닌 브라우저에서 실행할 수 있는 새로운 파일 형식 WASM를 쓰는 이유 자바스크립트 말고 다른 언어의 코드도 브라우저에서 실행 가능 javascript 보다 작동 속도가 빠르다. js 코드는 크롬 브라우저가 실행해준다. 그 과정을 뜯어보면 상당히 복잡한데 javascript 작동과정 1. 크롬 브라우저가 js 코드를 발견한다. 2. parsing ex) 코드의 변수 함수 등을 스캔 3. Bytecode // 기계 친화적인 js 해석본 > 반복되는 코드는 최적화 Optimized Code(Optimizing 해줌) > Turbofan 엔진이 빠르게 실행해줌 옵티마이즈는 취소도 가끔 함 ex) 타입이 변하거나 그럴 때! 4. interpreter가 코..