js

나만의 cli 만들어서 npm 패키지 배포해보기

가입하기 https://www.npmjs.com/ npm | Home Bring the best of open source to you, your team, and your company Relied upon by more than 17 million developers worldwide, npm is committed to making JavaScript development elegant, productive, and safe. The free npm Registry has become the center of Java www.npmjs.com 먼저 npm 패키지 배포를 위해 npm 사이트에 가입이 되어 있어야 한다. 2. $ mkdir [디렉토리명] $ cd [디렉토리명] $ npm init npm..

웹 페이지에 lottie 파일 적용해보기

👀 lottie 디자이너 분께서 lottie json을 만들어주셨다. ✅ html 페이지에 적용해보자 📌 공식문서 보기 Lottie Docs airbnb.io 로티 : 에어비앤비에서 개발한 라이브러리 애니메이션은 백터 기반, svg로 저장 된다. 📌 CDN https://cdnjs.com/libraries/lottie-web lottie-web - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers After Effects plugin for exporting animations to SVG + JavaScript or canvas + JavaScript - Simple. Fast. Reli..

Js, lastindexof 와 substring 을 이용하여 파일 확장자 추출하기

function getFileExtension(fileName) { let fileLegnth = fileName.length; // 가장 마지막의 . 의 위치 let lastDot = fileName.lastIndexOf('.'); // .의 다음 위치부터 파일 총 길이까지 let fileExtension = fileName.substring(lastDot + 1 , fileLegnth).toLowercase(); return fileExtension; } .lastIndexOf() 문자열 위치를 찾습니다. indexOf() 와 반대로 뒤에서부터 시작하여 찾아줌 .substring() 특정 문자열을 잘라내어 반환한다. substring(start, end) 시작위치에서 종료 위치까지 문자열을 자른다. ..

swiper 마우스 올렸을 때 슬라이드 일시정지 autoplay stop

swiper 슬라이드에 마우스를 올렸을 때 슬라이드 동작을 일시적으로 정지하고 싶은 경우 See the Pen swiper 2 - autoplay stop on hover by jaeheekim (@jaehee) on CodePen. $('.swiper').hover(function() { swiper.autoplay.stop(); }, function(){ swiper.autoplay.start(); }); swiper.autoplay.stop() swiper.autoplay.start() 두 개 속성을 이용하여 마우스가 올려졌을 때는 슬라이드 stop() 그 외는 다시 start로 적용되게끔 한다. 이때 슬라이드 동작이 멈출 때 기준은 하나 slider 기준 하나의 슬라이드 처음과 끝이 모두 시작과 ..

js 오늘 날짜 YYYY-MM-DD 로 나타내기

new Date() const date = new Date(); console.log(date) //Mon Apr 03 2023 13:16:27 GMT+0900 (한국 표준시) 날짜 가져오기 const date = new Date(); const year = date.getFullYear(); const month = date.getMonth(); const day = date.getDate(); console.log(year, month, day); //2023 3 3 //현재 날짜 2023년 4월 3일 월 정보를 가져오기 위해 getMonth()를 활용했다. 주의할 점은 1월은 0부터 시작하여 12월은 11로 나타나기에 +1을 해줘야함 YYYY-MM-DD 형식으로 const date = new Dat..

두 개 swiper를 이용한 부드럽게 흐르는 슬라이드 만들기

간혹 작업하다보면 흐르는 배너일까 슬라이드일까 하는 부분이 필요할 때가 있다 애니메이션 요소로도 만들 수 있지만 swiper를 이용한 슬라이드로 만들어보기 smooth motion of slide 🧵 조건 슬라이드 2개가 서로 다른 방향으로 흘러가야함 ( 오른쪽->왼쪽 / 왼쪽 ->오른쪽) swiper loop 옵션을 사용하여 무한으로 돌아야함 부드럽게 흐르는 이미지 🔧 HTML/CSS/JS 1. HTML 1 2 3 4 5 6 7 8 9 10 1 2 3 4 5 6 7 8 9 10 html layout 은 swiper js Doc 기본구조를 적용하여 진행했다. 두 개의 슬라이드가 서로 다른 방향으로 흘러가야 하기 때문에 ltr rtl 를 사용해야 한다. 컨테이너 요소에 슬라이드 방향을 지정해주는 것인데 l..

textarea 글자수 카운트 기능 및 제한

https://jsfiddle.net/ug98cxsr/ Edit fiddle - JSFiddle - Code Playground jsfiddle.net html 글씨를 쓸 공간인 textarea 입력창을 만든 후 jQuery 글씨가 입력될 때 마다 => keyup 이벤트 아래 데모보기 https://jsfiddle.net/ug98cxsr/ Edit fiddle - JSFiddle - Code Playground jsfiddle.net

tooltip 툴팁 무료 라이브러리

다양한 기능을 가진 툴팁(tooltip) 확인 할 수 있는 무료 라이브러리를 소개합니다. 1. popper.js 많이 사용하고 부트스트랩에도 들어가 있는 툴팁 라이브러리 ! 용량이 작아 사용감이 좋다는 장점이 있음 https://popper.js.org/ Home Positioning tooltips and popovers is difficult. Popper is here to help! Popper is the de facto standard to position tooltips and popovers in modern web applications. popper.js.org 2. Tippy.js tippy.js는 popper.js를 기반으로 업그레이드화한 플러그인으로 popper.js의 스크롤 액션..