웹 페이지에 기둥을 하나 만들어서 좌우로 리사이징을 하는 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..

JSON을 만드는 부분에서 자꾸 해당 에러가 발생해서 코드를 한참 쳐다보았다. const custNo = { CUST_NO = CUST_NO }; 아무리 봐도 이상이 없어서 찾아봤는데 진짜 이렇게 멍청할 수가 없다. const custNo = { CUST_NO: CUST_NO }; JSON인데 대체 왜 '=' 기호를 쓴 건지...

✅ 왜? 위와 같이 오늘 날짜를 기준으로 특정 날짜를 가져오고 싶었는데 여러 페이지에서 매번 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를 사용하기 위해 적용 후 테스트를 진행하다 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..

웹소켓 서버를 생성 및 구동하려다 해당 오류를 만난다면 살짝만 수정해주면 된다. ws 버전에 관한 문제 // 기존코드 import ws from "ws"; const wws = new ws.Server({ server: HTTPServer, }); 위 코드에서 // 수정코드 import ws, { WebSocketServer } from "ws"; const wws = new WebSocketServer({ server: HTTPServer, }); 위와 같이 변경하면 된다.

회사 업무를 진행하다가 Element를 리사이징 했을 때 window resize 이벤트가 비정상적인 속도로 실행되어 Canvas의 annotation이 오류를 일으키는 것을 확인하였다. 최초 canvas annotation 부분의 코드를 수정하려고 했는데 해당 부분에는 문제가 없는 것 같아 리사이징 이벤트 자체를 수정하기로 하였다. 브라우저를 리사이징 할 때는 이상이 없지만 Element를 리사이징 했을 때 오류가 발생하는 경우 window resize 이벤트를 약간 수정할 필요가 있다. // 기존 코드 $(window).resize(function() { initializePerfectScroll(); if(false == checkCanvasImageLoaded()) { return; } selec..

평소처럼 프로젝트 하나를 생성하여 이것저것 패키지를 설치하던 중 @babel/node를 설치하였음에도 위와 같은 메세지와 함께 서버가 실행되지 않아서 당황했는데 이런 경우에는 npm i @babel/node -g global 옵션과 함께 설치해주면 된다. // 요즘 잔잔바리들이 나를 괴롭힌다 까먹지 않게 메모

이번에 NodeJS와 React를 이용하여 토이 프로젝트를 진행하기 위해 기본적인 서버 및 프론트 세팅을 진행하려고 한다. 위와 같은 형식으로 구조를 만들어 보려고 한다. Server 우선 Node 프로젝트를 하나 생성한다. mkdir "projectName" cd "projectName" mkdir backend cd backend npm init -y backend 디렉토리 내부에 package.json 파일이 생성되었을 텐데 해당 내부로 들어가 license를 "MIT"로 변경하고, main, keywords 등 필요 없는 내용은 삭제한다. { "name": "backend", "version": "1.0.0", "description": "", "scripts": { "start": "nodemo..