[JS] 채널톡 버튼 커스텀하기 바쁜 사람을 위한 요약:// 채널톡 플러그인을 불러오는 코드(function(){var w=window;if(w.ChannelIO){return w.console.error("ChannelIO script included twice.");}var ch=function(){ch.c(arguments);};ch.q=[];ch.c=function(args){ch.q.push(args);};w.ChannelIO=ch;function l(){if(w.ChannelIOInitialized){return;}w.ChannelIOInitialized=true;var s=document.createElement("script");s.type="text/javascript";s.async=true;s.src="https:/.. 2025. 1. 16. setTimeout, setInterval의 심화 사용법 (개발 시 시간 처리에 관하여) 최근에서야 setTimeout, setInterval의 제대로 된 사용법을 알게 되었습니다.많은 분들이 아는 setTimeout, setInterval의 일반적인 사용법은 아래와 같을 겁니다.// setTimeoutsetTimeout(() => { console.log('3초 후 실행');}, 3000);// setIntervalsetInterval(() => { console.log('매 2초마다 실행');}, 2000);하지만 위처럼 간단한 사용법 말고도 더욱 많은 사용법과 응용법이 있다는 것을 알게 되어 공유해 보려 합니다.setTimeout과 setInterval의 심화 사용법setInterval(add, 1000, 3, 4, 5); // 인자는 계속 추가할 수 있습니다.function.. 2024. 12. 20. [JS] 함수명과 변수명 만드는 방법. 난독화에 관하여 오늘은 함수와 변수의 이름을 짓는 방법에 대해 간단하게 얘기를 나누어 볼까 합니다.함수 이름을 명시적으로 짓는 것은 HTML에서 class나 id의 이름을 직관적으로 짓는 것만큼 중요합니다.코드가 복잡한 JS 특성상 class나 id 보다도 더 중요하다고 말씀 드릴 수도 있겠네요.위 코드처럼 직관적인 이름이 가장 이해하기 편하고 사용하기도 편합니다.함수 뿐만 아니라 HTML과 CSS를 사용할 때도 알맞은 태그와 어울리는 이름을 지어주는 것이 무척 중요합니다.HTML의 태그는 Search Console 등이 참고하며, 시각 장애인 분들께서는 태그를 통해 사이트를 이용하시기도 합니다.CSS의 class나 id 또한 유지보수와 생산성 향상을 위해 해당 태그와 어울리는 이름을 짓는 것이 무척 중요합니다.이름을 .. 2024. 12. 19. [JQuery] qrcodejs로 QR 코드 만들기 바쁜 분들을 위해 바로 코드부터 보시지요. See the Pen Untitled by BellRiver (@orugpbqu-the-solid) on CodePen.">See the Pen Untitled by BellRiver (@orugpbqu-the-solid) on CodePen.QR 코드는 qrcodejs라는 라이브러리로 쉽게 만들 수 있습니다.옵션도 무척 간단하기에 바로 가져다 사용하실 수 있습니다.간단한 만큼 커스텀이 제한적이라는 약간의 아쉬움이 있지만 간단하게 QR 코드를 만들 수 있으니 무척 기쁘네요.위 코드에서 다 알아보겠는데 correctLevel이 뭐지? 싶으실 수 있습니다.correctLevel은 "복원 능력" 레벨을 뜻합니다.QR 코드의 복원 능력이란?물리적 손상: QR .. 2024. 12. 9. [JS] 객체 탈곡기 (객체에서 원하는 값만 추출) 이게 뭔 소린가 싶으실 텐데요.좀 더 자세히 말하면 객체 중에서 내가 원하는 값만 볼 수 있게 해주는 코드입니다.// window 객체에서 width와 관련된 내용만 추출할 수 있는 대다난 코드for (let key in window) { if (key.toLowerCase().indexOf("width") != -1) { console.log(key, window[key]); }}빈 사이트에서 위 코드를 사용하면 아래처럼 window 객체 중 width와 연관된 값만 가져올 수 있습니다.innerWidth 1920outerWidth 1920height를 찍으면 아래처럼 나오게 됩니다.innerHeight 945outerHeight 1032Global로 값을 저장하셨다면 해당 값을.. 2024. 12. 4. [JS] 파일 크기를 깔끔하게 만들어주는 JQuery 코드 input으로 파일 정보를 추출하면 파일 사이즈가 "878562" 이런 식으로 숫자로만 추출되는 것을 확인할 수 있습니다.이때 이를 깔끔하게 만들어주는 함수나 코드를 그때그때 작성하기보다는 이렇게 탬플릿화 해서 적재적소에 사용하면 시간을 아끼고 효율적으로 일할 수 있기에 관련 코드를 공유합니다.이러한 코드들을 앞으로도 지속해서 공유하고 저 또한 재사용함으로써 모두 효율적으로 일하는 것이 목표입니다.그럼 다들 파팅! See the Pen Untitled by 이종원 (@orugpbqu-the-solid) on CodePen.">See the Pen Untitled by 이종원 (@orugpbqu-the-solid) on CodePen. 2024. 12. 2.
