틈

데이터 바인딩을 포함한, 무한 롤링 예제 데이터 준비하기 var peopleData = [ { id: 0, title: "1", img: "/assets/images/main/image2.png", href: "123", }, { id: 1, title: "1", img: "/assets/images/main/image1.png", href: null, }, { id: 2, title: "2", img: "/assets/images/main/image2.png", href: null, }, { id: 3, title: "3", img: "/assets/images/main/image3.png", href: null, }, { id: 4, title: "4", img: "/assets/images/main..

페이징 처리나, 수제 슬라이드를 작업할 때 next 버튼이 마지막 index에 도달했다. index를 0으로 돌려보자. 그래. 조건문이지! 음화화~ const index = index >= x.length ? 0 : index+1 하고 있을 때 내 뒤통수를 때리는 고수님의 방법 const index = index+1 % x.length 자! 그럼 prev다! index 0 이하가 될 때, 맨 뒷번호를 가져야해! 이건 다른 방법이 없지! 암! const index = index-1 < 0 ? x.length-1 : index-1 아~ 그건 말이죵! const index = (index-1 + x.length) % x.length; 참 쉽죠?

9 이하의 숫자 앞에 0이 추가가 되어야 하는 경우가 종종 있다. 이런 경우 이전에는 3항 연산자를 이용한 조건식으로 작업을 하곤 했다. x < 10 ? `0${x}` : `${x}` 이거보다 좋은 방법은 없을 거라고 굳게 믿었는데... const minutes = `0${parseInt(time / 60, 10)}`; const seconds = `0${parseInt(time % 60)}`; return `${minutes}:${seconds.slice(-2)}`; 앞에 0을 무조건 추가하고 변수에 저장한 뒤, slice를 이용해서 뒷자리부터 2개만 잘라준다... (숫자형일 경우에는 적용이 안되므로 꼭 string으로 변경해주세용~) 이제라도 알아서 다행인가.. 2년만에 알게 된 아름다운 tip..

audio.play() audio.pause() audio.volume 이 외, 핸들러를 이용한 여러 상태 변경 요소들 - playing-time/duration-time(with progressBar) const onTimeUpdate = (event) => { if (event.target.readyState === 0) return; const currentTime = event.target.currentTime; const duration = event.target.duration; const progressBarWidth = (currentTime / duration) * 100; prograssBar.current.style.width = `${progressBarWidth}%`; }; - p..

new Date() 부분은 퍼블리셔가 사용할 일이 없어서 관심밖에 두고 있다가, 개발자 전향을 생각하면서 '한 번 찾아봐야지' 했던 부분입니다. REACT 학습 중 나오는 부분이어서 정리해 놓으려고 합니다. const today = new Date(); const dateString = today.toLocaleDateString("ko-KR", { year: "numeric", month: "long", day: "numeric", }); const dayName = today.toLocaleDateString("ko-KR", { weekday: "long", }); dateString : XXXX년 X월 X일 dayName : X요일 today 변수에 date를 저장하고, .toLocaleDateSt..

객체의 값을 조회할 때 null이나 undefined 속성일 경우, 해당 객체의 프로퍼티를 참조하면 타입 에러가 발생합니다. 타입에러가 발생하면 프로그램이 강제 종료될 수 있는데, 이때에 단축 평가를 하면 에러를 발생하지 않습니다. var elem = null; var value = elem && elem.value; cf. 함수에서 매개변수의 기본값을 설정할 때, function setTest(str) { str = str || ''; } es6+ function setTest(str = ''){ ~~~ } es11+ optional chaning var elem = null; var value = elem?.value; es11+ null 병합(nullish coaliscing) 연산자 var foo..