조각모음 조각모음

자바스크립트 무작위 정수 뽑기, 배열에서 무작위 원소 뽑기 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/random Math.random() 메소드를 이용해서 무작위 정수와 배열에서 무작위 원소를 뽑을 수 있다. 기본적으로 Math.random()메소드는 0 이상 1 미만 난수를 뽑아낸다. 내가 원하는 범위의 무작위 정수 뽑기 Math.random() 값에 내가 지정하고 싶은 숫자를 곱한 뒤 Math.floor()를 이용해 내림해주면 된다. // 10 미만의 정수를 뽑고 싶다면 const num = 10; console.log(Math.floor(Math.random() * num)); 배열에서 무작위..

npm, npm, yarn 구분하기 참고 문제 상황 Vue나 React 프로젝트를 하다보면 항상 헷갈렸다. 어떨 때는 npm을 쓰고, 언제는 yarn을 쓰고, 또 언제는 npx를 이용하는지. 도대체 3개의 차이가 뭔지 궁금해서 간략하게라도 정리를 해둬야겠다고 생각했다. npm node package manager의 줄임말로 말 그대로 node.js의 package 관리 도구다. npx execute npm package binaries의 줄임말로, npm에 속해 있는 npm 파일 실행 도구다. npx는 해당 패키지를 실행만 되게 해 주기 때문에 가볍게 쓸 수 있다. 예를 들어 다른 사람의 깃허브 레포지토리에서 패키지를 다운받아 package.json의 scripts중 하나를 실행하고 싶을 때 npx와 스..

02 - optional chaining operator https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining API에서 어떤 object를 가져올 때 매우 유용하다. const me = { name: 'simmy', profile: { email: '@gmail.com' } } console.log(me.profile.email); // @gmail.com const someone = { name: 'who', } console.log(someone.profile.email); // Uncaught TypeError: Cannot read propert..

01 Nullish coalescing operator (??) 연산자 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator null 병합 연산자는 ||와 &&처럼 논리연산자다. ?? 연산자는 ||와 마찬가지로 기본값을 줄 때 유용하다. 다만, ||은 0, 과 빈 문자열 등을 포함한 falsy한 값을 방지하고, ??은 오직 nullish한 값을 방지한다. let name; console.log('hello', name); // undefined console.log('hello', name || '시명'); // '시명' ..

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 등을 활용해서 응용하면 되겠다.