Resizer.js
·
JavaScript
웹 페이지에 기둥을 하나 만들어서 좌우로 리사이징을 하는 JS // Query the element const resizer = document.getElementById("resizer"); const leftSide = resizer.previousElementSibling; const rightSide = resizer.nextElementSibling; // The Current Position of mouse let x = 0; let y = 0; // Width of left side let leftWidth = 0; // Handle the mousedown event // that's triggered when user drags the resizer const mouseDownHandle..
Uncaught SyntaxError: Invalid shorthand property initializer 해결
·
JavaScript
JSON을 만드는 부분에서 자꾸 해당 에러가 발생해서 코드를 한참 쳐다보았다. const custNo = { CUST_NO = CUST_NO }; 아무리 봐도 이상이 없어서 찾아봤는데 진짜 이렇게 멍청할 수가 없다. const custNo = { CUST_NO: CUST_NO }; JSON인데 대체 왜 '=' 기호를 쓴 건지...
Javascript 날짜 계산기
·
JavaScript
✅ 왜? 위와 같이 오늘 날짜를 기준으로 특정 날짜를 가져오고 싶었는데 여러 페이지에서 매번 new Date() 하는 것도 번거롭고 const now = new Date(); const tomorrow = now.getDate() + 1; 이런 식으로 간단하게 적용해 버리면 31일에는 오류가 날 수밖에 없다. 그래서 날짜를 구해야하는 모든 페이지에서 간단하게 적용하기 위해 계산기를 만들었다. ✅ 날짜 계산기 Script function getDate(addYear, addMonth, addDay, token) { token = token == undefined || token == null ? "-" : token; addYear = addYear == null ? 0 : addYear; addMonth..
Swiper <DevTools failed to load source map>
·
JavaScript
Swiper를 사용하기 위해 적용 후 테스트를 진행하다 Console을 들여다보았더니 아래와 같은 문구가 출력되었다. ✅sourcemap이란? 아주 간단하게 설명하자면 빌드 전, 후 파일을 맵핑 시켜서 빌드 이후 발생하는 오류를 어떤 파일, 위치에서 생긴 것인지를 알 수 있게 해주는 녀석이다. 즉, 원활한 디버깅을 위해서 필요하다는 것 ✅문제 해결 해당 warning을 해결하기 위해서는 두가지 방법이 있다. https://github.com/nolimits4web/swiper GitHub - nolimits4web/swiper: Most modern mobile touch slider with hardware accelerated transitions Most modern mobile touch slid..
TypeError: ws.Server is not a constructor
·
JavaScript
웹소켓 서버를 생성 및 구동하려다 해당 오류를 만난다면 살짝만 수정해주면 된다. ws 버전에 관한 문제 // 기존코드 import ws from "ws"; const wws = new ws.Server({ server: HTTPServer, }); 위 코드에서 // 수정코드 import ws, { WebSocketServer } from "ws"; const wws = new WebSocketServer({ server: HTTPServer, }); 위와 같이 변경하면 된다.
Element Resize 시 window resize 이벤트 발생 속도
·
JavaScript
회사 업무를 진행하다가 Element를 리사이징 했을 때 window resize 이벤트가 비정상적인 속도로 실행되어 Canvas의 annotation이 오류를 일으키는 것을 확인하였다. 최초 canvas annotation 부분의 코드를 수정하려고 했는데 해당 부분에는 문제가 없는 것 같아 리사이징 이벤트 자체를 수정하기로 하였다. 브라우저를 리사이징 할 때는 이상이 없지만 Element를 리사이징 했을 때 오류가 발생하는 경우 window resize 이벤트를 약간 수정할 필요가 있다. // 기존 코드 $(window).resize(function() { initializePerfectScroll(); if(false == checkCanvasImageLoaded()) { return; } selec..