계발하는 개발자

금번 개인 프로젝트를 준비하며 정리해두면 이후에도 좋을 것 같은 현재페이지번호/전체요소갯수 구하는 방법! /(슬래시) 기호를 기준으로 왼쪽에 있는 숫자는 현재 페이지번호이고, 오른쪽에 있는 숫자는 리스트 안에 들어있는 전체요소갯수다. 먼저 코드 공유를 먼저 하자면, 내 경우는 아래와 같은 방식으로 진행했다. const totNum = document.querySelector(".total-page-num"); const cNum = document.querySelector(".current-page-num"); const proItem = document.querySelectorAll(".recent-view-prod-list > ul > li"); const arr = []; proItem.forEac..

오늘 포스팅은 자바스크립트에서 숫자를 출력할때, 숫자 3자리마다 콤마를 찍고 출력하는 방법에 관한 것입니다. 흔히 대표적으로 사용되는 2가지 방법으로 나눠 다뤄보겠습니다. 1. toLocaleString()을 이용하여 3자리마다 콤마 넣기 다음과 같이 toLocaleString()로 특정 국가의 숫자 단위로 출력하여 콤마를 넣을 수 있습니다. let cost = 65000; let result = cost.toLocaleString(); console.log(result); // 65,000 toLocaleString()는 인자로 전달한 Locale의 표현 방식으로 숫자를 출력합니다. 인자를 전달하지 않으면 Default locale이 사용됩니다. 미국이나 한국은 3자리마다 콤마를 넣습니다. 따라서 Lo..

is() 메서드는 선택한 요소 중 하나가 is( 선택한 Element )와 일치하는지 확인합니다. 결과값은 참(true)/거짓(false)을 나타냅니다. is는 '~는 ~이다' 는 뜻이므로 ele.is() is -> ele요소는 is뒤 소괄호() 안의 요소이냐?! 라고 기억하면 쉽겠죠? 여기서 포인트는 ~이냐? 라고 기억하는 것 $(".abtn").click(function () { // 1. 오른쪽여부 // is(클래스/아이디명) -> 선택요소해당여부 리턴 let isR = $(this).is(".rb"); console.log(isR); }); 슬라이드배너의 방향버튼 클릭시 해당 버튼의 클래스명이 rb 인지 판별해서 맞으면 -> true 반환 틀리면 -> false 반환 해당 판별여부를 boolean..

사이트들을 보면 꼭 있는 필수 기능인 상단이동버튼 구현에 관한 포스팅도 정리차 올려보려합니다. Window.scrollTo() Javascript는 Window.scrollTo()라는 메소드를 제공합니다. 해당 메소드는 Window 내에서 사용자가 원하는 위치로 스크롤을 이동시킬 수 있습니다. // 기본 형태 window.scrollTo(x-좌표, y-좌표) scrollTo의 인자로 behavior를 추가하면 모션 설정도 가능합니다. 참고로, smooth 모션 미추가시 이동버튼을 클릭하게되면 슝~하면서 이동하는 과정없이 화면이 깜빡이면서 바로 상단으로 이동하게 됩니다. 이 동작이 많이 부자연스럽기 때문에 smooth 모션도 꼭! 설정해주기 ! // behavior에는 auto와 smooth를 입력할 수 ..