오늘은 자바스크립트에서 이벤트 핸들링을 최적화하기 위해 많이 사용하는 개념인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..

익숙한 크롬 브라우저에선 글꼴 적용이 잘 되는데...항상 사파리 브라우저가 문제 ㅜㅜ 크로스 브라우징 생활화해야하는데 아직 쉽지 않다.. 그러므로 사파리 브라우저에서 글꼴 적용하는 방법을 기록해보려한다. 보통은 html, body {font-family: "Pretendard";} 이런식으로 많이 적용하는데,사파리 브라우저의 경우 적용이 안될 수도 있다. 그래서 항상 지정 폰트 뒤에 sans-serif를 붙여줘야한다. html, body {font-family: "Pretendard", sans-serif;} 또한 웹폰트 방식 중 @import 방식을 사용한다면 import링크를 css파일 최상단에 적어야한다.

내가 보려고 정리하는 것이므로,, 자주 쓰일 것같은 단축키만 모아서 표로 정리해보겠슴다...vscode를 쓰면 좋겠지만,,, 기존 작업을 editplus해서 많이 했기 때문에유지보수 하려면 단축키를 어느정도 알아놔야한다 😂 Edit Plus  단축키Ctrl + N새 문서 작성Ctrl + Shift + SFTP 업로드Ctrl + Z실행 취소Ctrl + Y다시 실행Alt + Shift + Del줄 지우기Ctrl + J줄 복사Ctrl + R줄 선택Ctrl + I들여쓰기 (vscode의 tab기능)Ctrl + Shift + I들여쓰기 줄이기 (vscode의 shift + tab 기능)Shift + F3찾기Ctrl + J여러 줄을 한 줄로 만들어줌 (한 줄 코딩으로 변환할 때 개꿀) 그리고 에디트 플러스의 제일..