프론트엔드 개발자로서의 삶을 더 쉽게 만드세요

매일 유용한 JS 스니펫 목록

하나의 라이너 스니펫:

다음은 내가 가장 좋아하는 자바스크립트 스니펫 목록입니다. 대부분 한 줄 코드이지만 많은 작업을 해결합니다!

Javascript: 클립보드에 텍스트 복사

조만간 전자 상거래 웹 사이트에서 작업하는 경우 "프로모션 코드 복사"구성 요소를 만들어야 합니다. 팝업, 푸시 알림 또는 웹 사이트의 간단한 텍스트일 수 있습니다. 이 한 줄의 코드로 로켓을 발사합니다!

const copyToClipboard =  (text) => navigator.clipboard.writeText(text);

// usage example
document.addEventListener('selectionchange', () => {
  copyToClipboard(window.getSelection().toString())
});

주의:
내 사용 예는 성능에 위험할 수 있습니다. 재귀 이벤트가 아닌 특정 이벤트와 함께 함수를 사용하십시오.

자바스크립트: 집중

복잡한 응용 프로그램이나 웹 사이트에서 요소에 초점이 맞춰져 있는지 아는 것이 도움이 될 수 있습니다.
예를 들어, 로그인 팝업이 활성화되어 있고 이에 대한 몇 가지 작업을 수행하기 위해 포커스가 있는지 알고 싶을 수 있습니다.

여기 쉬운 방법이 있습니다!

const isOnFocus =  (el) => (el === document.activeElement);

// usage example
isOnFocus(document.querySelector('#popup'))

Javascript: 보기로 요소 스크롤

귀하의 웹사이트에 매끄러운 앵커를 만들어야 합니까? 이 한 줄 함수를 사용하여 요소를 맨 위에 매끄럽게 놓을 수 있습니다.

const scrollToTop =  (el) => el.scrollIntoView( { behavior: 'smooth', block: 'start'});

// usage example
scrollToTop(document.querySelector('#mySection'))

같은 방법으로 "블록"만 변경하면 요소를 바닥에 고정할 수 있습니다!

const scrollToBottom =  (el) => el.scrollIntoView( { behavior: 'smooth', block: 'end'});

// usage example
scrollToBottom(document.querySelector('#mySection'))

Javascript: 장치 유형 감지

사용자가 모바일 또는 데스크톱 장치에서 웹 사이트를 탐색하는지 알고 싶습니까? 이런 식으로 네비게이터 에이전트를 확인하십시오.

const detectDevice =  () => /Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
  navigator.userAgent
)  ? 'Mobile' : 'Desktop'

// usage example
detectDevice()

Javascript: 다크 모드 감지

이 한 줄 기능으로 사용자가 선호하는 색 구성표가 어두운 모드인지 확인하여 완벽한 웹사이트 버전을 제공하세요.

const isDarkMode =  () => window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

// usage example
isDarkMode()

사이트에 어두운 모드를 만들고 싶습니까?

this repository에서 아주 적은 수의 코드로 다크 모드 토글을 생성합니다: 링크). 하지만 먼저 사용자가

이 스니펫을 github에 별표 표시하여 편리하게 유지하세요.

작업에서 매일 사용하는 스니펫은 무엇입니까?

아래에서 나와 공유하십시오!

기억하세요: 공유는 배려입니다 😁