프론트엔드 복습노트 프론트엔드 복습노트

frontend/꿀팁

• [자바스크립트 꿀팁] 브라우저 다크모드 감지 (Detect DarkMode Using JavaScript)

  frontend/꿀팁 2022. 10. 7. 10:24

  오늘은 다크모드를 지원하는 앱을 만들 때 자바스크립트를 활용하여 다크모드를 감지 하는 방법에 대해서 알아 보겠습니다. 다크모드 지원을 위한 글로벌 theme를 적용하려고 분기처리할 때 많이 사용하게 됩니다. JavaScript const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; 이렇게 간단한 방법으로 우리는 다크모드에 대해서 감지해볼 수 있습니다. 물론 CSS의 media query를 통한 분기 처리도 가능합니다. CSS @media (prefers-color-scheme: dark) { .scheme { background: #000; color: #fff; } } @media ..

  Read More
• [VS Code] 자주 쓰는 비주얼 스튜디오 코드(VS CODE) 확장 프로그램 모음

  frontend/꿀팁 2022. 10. 5. 17:00

  오늘은 저가 프론트엔드 개발을 할 때 비주얼 스튜디오에 꼭 설치하여 사용하는 확장 프로그램들에 대해서 알아보도록 하겠습니다. 저가 개인적으로 사용하는 것이니 꼭 이것이 정답은 아닙니다. 1. ES-LINT & PRETTIER lint는 소스코드의 문제를 찾는 작업이고, 이러한 작업을 행하는 것이 linter입니다. 대표적으로 많이 사용하는 javascript linter는 eslint입니다. 해당 익스텐션을 깔아두면 밑줄 등을 통해 우리에게 에디터 내에서 잘못된 코드를 알려줍니다. 필수적으로 사용하는 확장프로그램입니다. code formatter는 개발자가 작성한 코드를 약속된 코딩 스타일로 변환해주는 도구 입니다. 이중 대표적으로 많이 사용되는게 prettier입니다. 대다수의 오픈소스(ex: reac..

  Read More
• [DOM Hack] 특정 DOM element의 이벤트 모두 없애기(HTML Event remove)

  frontend/꿀팁 2022. 9. 29. 08:52

  오늘은 이벤트 덮어 쓰기에 대해서 알아보려고 합니다. 가끔 웹사이트를 이용하다 보면 스크립트 공격과 다양한 취약점들을 해결하기 위해 브라우저에서부터 폼 내부에 특수문자가 들어오지 않게 막는 경우가 있습니다. 이럴때 우리는 한자키를 이용한 특수문자로 대체하거나 아니면 해당 돔의 keyup이벤트에 걸려 있는 치환 이벤트를 지우고 입력해야됩니다. //TAG let tagEle = document.getElementsByTagName('input'); for(let i = 0, len = tagEle.length i < tagEle ; i++){ tagEle[i].outerHTML = tagEle[i].outerHTML; } //ID let idEle = document.getElementById('test')..

  Read More
• [자바스크립트 꿀팁] 숫자 세자리 콤마 ( 숫자 3자리 콤마 )

  frontend/꿀팁 2022. 3. 24. 17:25

  오늘은 숫자 3자리마다 콤마 넣는 방법에 대해서 알아보겠습니다. 숫자 3자리 쉼표처리는 금액의 표현에서 엄청 자주 사용됩니다. 사내 시스템에서도 대고객 서비스에서도 이용될 수 있습니다. 이런 콤마 처리를 어떻게 하면 가장 빠르게 적용할 수 있을지 알려드리겠습니다. 정규식 const number = 123124124.123123123; function formatComma(number){ const div = number.toString().split("."); return `${div[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",")}.${div[1]}`; } console.log(formatComma(number)) //123,124,124.12312312 정규식을 이용해서는 위..

  Read More
• [자바스크립트 꿀팁] 진수 변환 (N 진수 > N진수)

  frontend/꿀팁 2022. 3. 23. 17:33

  오늘은 진수변환에 대해서 알아 보도록 하겠습니다. 진수변환 다들 하실 줄 아시겠지만 자바스크립트에서는 toString() 메소드와 parseInt()메소드를 통해 아주 손쉽게 할 수 있습니다. 10진수 -> 2진수( 3, 4, 5...N 진수) let decimal = 2022; //10진수 -> 2진수 console.log(decimal.toString(2)); //10진수 -> 3진수 console.log(decimal.toString(3)); //10진수 -> N진수 console.log(decimal.toString(N)); 간단합니다. 위와 같이 Number 프로토타입 안에 있는 toString메소드의 파라미터로 원하는 진수값을 넘겨주면 손쉽게 변경됩니다. 2진수 ( 3, 4, 5...N 진수 ..

  Read More