일상적인 JavaScript 개발을 위한 9가지 유용한 코드 스니펫 || 1 부

여러분, 안녕하세요!

이 JavaScript 스니펫 게시물에 오신 것을 환영합니다. 이 게시물에서는 일상적인 JavaScript 개발에 도움이 되는 가장 일반적인 JavaScript 스니펫을 살펴보겠습니다.

항상 타사 유틸리티 라이브러리를 사용할 수 있지만 이러한 기본 JavaScript 스니펫을 아는 것이 항상 유용합니다.

그리고 이러한 스니펫은 너무 쉽고 작기 때문에 타사 유틸리티 라이브러리 대신 항상 선호해야 합니다.

이 시리즈는 2부로 나누어져 있으며, 이 게시물이 첫 번째 게시물입니다.

두 번째 게시물 링크:

이제 시작하겠습니다.

1. HTTPS 리디렉션

HTTP 프로토콜을 HTTPS 프로토콜로 리디렉션합니다.

const httpsRedirect = () => {
  if (location.protocol !== 'https:')
    location.replace('https://' + location.href.split('//')[1]);
};

httpsRedirect();
// Redirect from http://mydomain.com to https://mydomain.com

먼저 window.location.protocol 로 프로토코를 찾습니다.

그런 다음 프로토콜이 HTTP인 경우 URL을 HTTPS 프로토콜로 바꿉니다.

그리고 페이지를 다시 로드합니다.

Note: Going back via brower's back button won't go to http, as it is replaced in the history.

2. 값을 숫자로 입력

입력 값을 문자열이 아닌 숫자로 원한 적이 있습니까? 기본적으로 우리는 항상 JS에서 문자열로 입력 값을 얻습니다. 그런 다음 숫자로 변환합니다.

The purpose of the number type is that mobile browsers use this for showing the right keyboards and some browsers use this for validation purposes. For example the email type will show a keyboard with the @ and '.' on the keyboard and number will show a numeric keyboard.

그러나 입력 값을 숫자로 가져오는 더 좋은 방법이 있습니다.

const numInput = document.getElementById('num-input');

let num;
// Bad: parseFloat() converts the string to a number
num = parseFloat(numInput.value);

// Good: returns a numeric value
num = numInput.valueAsNumber;

HTMLInputElement.valueAsNumber는 입력 값에서 숫자 값 또는 NaN을 반환합니다.

3. 외부 클릭 처리

사용자가 지정된 요소 외부를 클릭할 때 작업을 수행하려는 경우 이 스니펫이 시간을 절약할 것입니다.

const onClickOutside = (elementId, callback) => {
  const element = document.getElementById(elementId);

  document.addEventListener("click", (e) => {
    if (!element.contains(e.target)) callback();
  });
};

onClickOutside("red-box", () => console.log("Clicked outside red box"));

document.addEventListener("DOMContentLoaded", onClickOutside);
// Will log 'Hello' whenever the user clicks outside of #my-element

addEventListener가 click 이벤트를 수신하는 데 사용되고 있습니다.

Node.contains() 클릭한 요소가 지정된 요소 외부에 있는지 확인합니다.

DOMContentLoaded 이벤트 리스너는 HTML이 DOM에 마운트된 후에만 onClickOutside 함수가 호출되도록 합니다.

4. 스크롤 정지 처리

아마도 사용자가 스크롤을 멈출 때 하고 싶은 일이 있을 것입니다. 여기에 도움이 되는 스니펫이 있습니다.

const onScrollStop = callback => {
  let isScrolling;
  window.addEventListener(
    'scroll',
    e => {
      clearTimeout(isScrolling);
      isScrolling = setTimeout(() => {
        callback();
      }, 150);
    },
    false
  );
};

onScrollStop(() => {
  console.log('The user has stopped scrolling');
});

addEventListener는 scroll 이벤트를 수신하는 데 사용됩니다.

setTimeout을 사용하여 콜백을 호출하기 전에 150ms 동안 기다리십시오.

clearTimeout은 새 스크롤 이벤트가 150ms 미만에서 발생하는 경우 시간 제한을 지우는 데 사용됩니다.

5. CapsLock이 켜져 있는지 감지

사용자의 CapsLock이 켜져 있는지 꺼져 있는지 확인합니다.

// Assume, el is an input element, and msg is a p tag to show message.

el.addEventListener('keyup', e => {
  msg.style = e.getModifierState('CapsLock')
    ? 'display: block'
    : 'display: none';
});

KeyboardEvent.getModifierState()는 사용자 키보드의 CapsLock 키 상태를 결정하는 데 사용됩니다.

그래서 이번 포스팅은 여기까지입니다. 어쨌든 이 게시물이 마음에 든다면 지원을 보여주세요.

일상적인 JavaScript 개발을 위한 4개의 유용한 코드 스니펫과 함께 이 게시물의 다음 부분에서 뵙겠습니다.

저는 또한 주간 뉴스레터를 운영하고 있으므로 여기에서도 저와 함께 할 수 있습니다: https://www.getrevue.co/profile/8020lessons

감사합니다!