padStart and padEnd padStart MDN 문서 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/padStart padEnd MDN 문서 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd String.prototype.padStart() 날짜나 시간 등을 만들 때 유용하다. 예를 들어 let hours = 12; let minutes = 3; let seconds = 15; console.log(`${hours}h:${minutes}m:${seconds}s`); //..
hasOwnProperty등 builtin 메소드 안전하게 사용하기 참고 문제 상황 eslint 세팅 작업을 하다가 hasOwnProperty 메소드에 빨간 줄이 가는 걸 보았다. no-prototype-builtins 라는 eslint 규칙인데, 이는 Object.prototype의 builtin으로 제공되는 메서드를 객체에서 직접 호출하기 않도록 하는 규칙이다. // bad if (result.data.hasOwnProperty('error')) { alert(result.data.error.msg); } // good if (Object.prototype.hasOwnProperty.call(result.data, 'error')) { alert(result.data.er..
clientHeight, offsetHeight, scrollHeight의 차이 참고 문제상황 DOM을 이용해서 JS 이벤트를 조작하고 있었는데 문득 clientHeight(width), offsetHeight(width), scrollHeight(width)의 차이가 궁금해졌다. 위의 스택오버플로가 너무나 간결하게 정리해줬다. client- : 눈에 보이는 content + padding의 크기값 offset- : 눈에 보이는 content + padding + border + scrollbar의 크기값 scroll- : 눈에 보이지 않는 영역까지 포함한 전체 content + padding의 크기값 따라서 아래 구문이 true면 어떤 요소를 끝까지 스크롤한 것이다. (출처) // true면 eleme..
자바스크립트로 페이지 새로고침하기 참고1 참고2 문제 상황 어떤 특정 상황에서 강제로 페이지를 새로고침해야 했다. 해결 아래 메소드 중 하나를 골라 사용한다. // 1. history.go(); // 2. history.go(0); // 3. window.location.reload(); // 4. window.location.href=window.location.href; 매번 새로고침을 해야 하는 페이지가 있다면 setInterval 등을 활용해서 응용하면 되겠다.