오늘은 자바스크립트에서 이벤트 핸들링을 최적화하기 위해 많이 사용하는 개념인Debounce와 Throttle에 대해 알아볼 것이다. 최적화 필요성자바스크립트에서 이벤트 핸들링을 최적화하는 이유는 성능과 사용자 경험을 개선하기 위해 필요하다.특히, 사용자가 반복해서 발생시키는 이벤트(예: 스크롤, 리사이즈, 입력 등)는 자칫 성능 저하를 유발할 수 있기 때문에..  Throttle목적: 특정 함수가 호출되는 빈도를 제한하여 자원 소모를 줄이기 위해 사용된다.동작 원리: 함수를 일정 시간 간격(예: 1000ms, 1초)으로만 실행되도록 제한한다. 이 간격 동안에는 함수를 한 번만 실행하고, 그 후에 다시 호출할 수 있다.throttle은 이벤트 핸들링, API 호출 등의 상황에서 쓰일 수 있다.throttl..

알리고로 알람톡 보내려면 카카오 채널을 만들어야하고 비즈니스로 등록하려면 사업자 등록증이 필요하다.api키 발급받는 것까진 공식 문서 정독을 추천한다(한국어니까) https://smartsms.aligo.in/ 알리고알리고 - 국내 최저가 문자발송 알리고 문자, 단문8.4원 장문25원 그림60원 알리고 대량문자/단체문자/문자사이트/문자발송smartsms.aligo.in:443 https://smartsms.aligo.in/aligoxkakao.html 알리고알리고 - 국내 최저가 문자발송 알리고 문자, 단문8.4원 장문25원 그림60원 알리고 대량문자/단체문자/문자사이트/문자발송smartsms.aligo.in:443https://smartsms.aligo.in/alimapi.html 알리고알리고 - 국내..

패럴랙스 이펙트하면 가장 기본적인 것은 아마 스크롤의 감도? 아닐까 생각이 든다. 스크롤 움직이는 느낌에 따라 사이트의 퀄을 좌우할 수 있달까!? 난 그렇게 생각한다. 아무튼 가장 많이 쓰는 플러그인은 lenis 아닐까 싶다. Lenis (smooth scroll) lenis 공식 사이트 https://lenis.darkroom.engineering/ Lenis – Get smooth or die trying A smooth scroll library fresh out of the Studio Freight Darkroom lenis.darkroom.engineering 깃허브 https://github.com/darkroomengineering/lenis GitHub - darkroomengineeri..

오늘은 jQuery로 스크롤 값에 따라 이벤트를 추가하는 방법을 작성해보겠다! 클론코딩하던 도중 의외로 jQuery가 많이 쓰인다는 걸 깨달았다. 그냥 단순 스크립트로 이벤트를 줄 수 있지만 훨씬 코드가 복잡해지고 어려워짐.. ㅠ 제이쿼리를 쓰면 더 직관적이고 애니메이션도 줄 수 있다. 아무튼! 사이트를 보다보면 스크롤 이펙트가 많이 사용된 사이트를 볼 수 있을 것이다. 내가 클론한 사이트 또한 스크롤마다 다양한 애니메이션과 효과가 적용됐는데 스크롤값에 따라 이벤트를 추가하는 방법을 기록하려한다.(class 추가, css 적용 등등등..) jQuery로 스크롤 이벤트 추가하기 스크롤 값에 따라 CSS 속성 변경하기 요건 헤더 부분을 스크롤 할 때마다 네비게이션이 나타나게끔 이벤트를 적용했다. 파티룸 오디..

gsap 연습할 겸 요즘 클론코딩을 자주하고있는데 처음보는 플러그인이 있어서 사용법을 기록해보려한다! 클론할 사이트는 랜딩페이지로 https://vibe.naver.com/about/ VIBENAVER VIBEvibe.naver.com vibe 서비스의 어바웃 페이지다. 요렇게 전광판 효과?로 플레이리스트를 추천하는 부분이다.CSS로만 구현해야하나 싶었는데 마침 jQuery 플러그인이 있어서 사용해볼려한다. marquee.jsMarquee.js는 HTML 요소를 효과적으로 스크롤하도록 도와주는 JavaScript 라이브러리 중 하나입니다. 이를 사용하여 웹 페이지에서 텍스트나 이미지를 자동으로 스크롤하거나 특정 동작에 따라 스크롤할 수 있습니다. 👀 사용법Marquee.js 라이브러리 추가  구조 ..

Matter.jsMatter.js는 웹 기반 2D 물리 엔진으로, 웹 페이지나 웹 애플리케이션에서 간단한 물리 시뮬레이션을 구현하는 데 사용된다.이 엔진은 HTML5 Canvas를 기반으로 하며, 자바스크립트로 작성되어 있다. Matter.js를 사용하면 물리적인 특성을 가진 객체들을 생성하고, 그들 간의 상호작용을 구현하여 현실적인 움직임 및 충돌 효과를 만들 수 있다. 물리엔진? 그게 뭔데 ㅠㅠ  정말 처음보는 거라 먼소린지 모르겠고,.. 공식 문서도 참 불친절하구,,,,,,,,,,,,기본 효과같은 건 구글링이나 공식문서를 보면 충분히 활용 가능하지만저 ... path지정방법과 스크롤 이펙트가 어렵다. 그래서 오늘은 예제 코드를 뜯어보면서 사용법을 익혀볼 생각이다.(코드펜 예제를 바탕으로 주석 설명을..

오늘은 복잡한 구조로 이루어져있는 json을 변환해서 트리구조로 읽기 쉽게끔 리더기를 만들어볼 거다 디자인에 신경을 쓰고싶지만.. 귀찮아서 대충 긁어오는중..ㅋㅋ JSON Reader 구조 JSON Reader 변환 원래 파일 첨부기능도 넣고싶었지만.. 그 input type=file 스타일링이 귀찮아서 뺐다..ㅋㅋ 스크립트는 적용시켜놨으니까 참고해주시긔 여기서는 button을 눌렀을 때 displayJson함수가 실행되는 onClick 이벤트 정도만 봐도 될 듯 싶다. CSS @font-face { font-family: "Pretendard-Regular"; src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretenda..

오늘은 날씨 오픈 API를 활용해서 간단하게 만들어보았다! 단점은... 영어로만 도시를 검색해야한다는 점 ㅜㅜ 되게 간단한 기능인데도 자스 코드가 그렇게 간결하지가 않다.. (최대한 리팩토링 해봤는데도..) 아마 괜히 효과주고 싶어서 gsap랑 css 뭐 이것저것 넣었는데 별 호과없음 ㅋㅋㅋ 다음엔 좀 더 멋지게 만들어야징. Weather App 구조 유효하지 않습니다! 다시 한 번 확인해주세요. 습도 풍속 배경쪽은 무시해주시고 ㅎㅎ.. 에러문구는 display: none으로 감춰놨다가 if문을 사용해 잘못 검색했을 시 에러 문구를 노출시키게끔 스크립트를 짰다. CSS @font-face { font-family: "SUIT-Regular"; src: url("https://cdn.jsdelivr.net..