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

gsap에서 제공되는 split text라는 기능이 있다.하지만 그건 유료이기 때문에 split-type이라는 무료 플러그인을 사용해서 글자 쪼개기, gsap를 활용해 애니메이션까지 구현해 볼 예정!  See the Pen Split-type, GSAP 활용한 텍스트 효과 by YeoDaSeul4355 (@YeoDaSeul4355) on CodePen. 활용한 플러그인 split-type과 gsap 플러그인 연결해주어야 한다.로컬 파일로 저장해서 연결해도 ok HTML 구조 Play Split Text! Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro nostrum distinctio ad quo natus et an..

오늘은 GSAP(ScrollTrigger)와 Lenis 라이브러리를 써서 스크롤에 따라 반응하는 애니메이션을 만들어보았다 사용 라이브러리 (플러그인)- GSAP- ScrollTrigger(GSAP에서 제공하는 또다른 플러긘)- Lenis (부드러운 스크롤 제공) 완성작 See the Pen GSAP image transition by YeoDaSeul4355 (@YeoDaSeul4355) on CodePen. HTML 구조 GSAP ScrollTrigger SmoothScroll  이미지 영역과 텍스트 영역을 나눠준다.  CSSsection {width: 100%; overflow-x: hidden;}.img_..

알리고로 알람톡 보내려면 카카오 채널을 만들어야하고 비즈니스로 등록하려면 사업자 등록증이 필요하다.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 알리고알리고 - 국내..

맥으로 갈아탄 기념으루 ^.^Nova FTP연결하는 방법을 기록해보려한다. 근데 Nova 에디터 사용하는 사람이 별로 없어서 그런지.. 구글링해도 잘 안 나온다. 이렇게 한 번 연결해놓으면 편하게 관리할 수 있당. 1. 프로젝트 추가 [Add Project] 클릭 후 ->  [Add Remote Prject]  클릭  [Project Name]에 프로젝트명 쓰고 + 버튼 클릭+이제 안 사실인데 굳이 안 적어도 되는듯 ?  2. FTP 정보 기입  3. 프로젝트 연결추가하면 다시 이 화면으로 돌아오는데추가한 프로젝트가 리스트처럼 뜬다. 그 상태로 해당 항목을 더블 클릭하면 이런식으로 바로 접속할 수 있게끔 뜬다.   노바 에디터 설정 툴바 상단에 Nova앱 위로 마우스 오버하면 Setting이 뜨는 걸 볼..

북마크 좀 정리할 겸.. 기록용으로 적어둡니다~꾸준히 추가할 예정 다들 줍줍하세요^//^  HTML이미지맵(태그) 사이트 : https://www.image-map.net/엠밋(단축어?) 사이트 : https://docs.emmet.io/cheat-sheet/파비콘 사이트 : https://www.favicon-generator.org/html 오류 체크 사이트 : https://validator.w3.org/html 태그 정리 사이트 : https://www.w3schools.com/html/default.asp폰트 어썸 사이트 :  https://fontawesome.com/무료 svg(아이콘) 사이트 : https://heroicons.com/무료 svg(아이콘) 사이트 2 : https://ion..