Web dev/JavaScript
-
JS / checkValidity(), input required 폼태그 e.preventDefault() 이슈Web dev/JavaScript 2024. 2. 14. 22:38
파이어베이스로 백엔드를 만들고 프로필 수정기능을 만들던 중 이슈가 생겼다. input 태그의 속성인 required 속성을 사용하여 폼태그의 유효성 체크를 했는데, 버튼 클릭시 e.preventDefault(); 를 사용하면 required가 동작안하고, e.preventDefault();를 빼면 DB업데이트가 안되었다. 그래서 검색하던중 checkValidity();를 체크해 required 분기 체크를 할 수 있었다. required 체크가 다되면 e.preventDefault() 후에 DB업데이트 코드실행 // required 체크가 다되면 e.preventDefault(); 실행 $('#updateProfile').click(function(e){ const form = document.query..
-
JS / modal scroll방지시 화면 울렁이는 이슈Web dev/JavaScript 2023. 6. 25. 16:22
모달을 구현하다보면 scroll을 안되게 막아야 할때가 있다. 스크롤을 막으면 기존에 있던 스크롤이 사라지면서 뚱땅거린다. 뚱땅거림을 방지하기 위해 스크립트를 짜보았다. /* 보통 height:100%;로 처리하지만 다르게 처리해보았다 */ .scroll_stop { overflow: hidden; position: fixed; top: 0; bottom: 0; left: 0; right: 0; } let posY $('.sku_btn').on('click', () => { posY = $(window).scrollTop(); $('.sku_modal').addClass('on'); $("body").addClass('scroll_stop'); $('.scroll_stop').css('top',-posY..
-
JS / 웹접근성 팝업에서 탭 이동시 벗어나지 않게 하기Web dev/JavaScript 2023. 6. 24. 14:17
작업을 하다보면 팝업창(모달)을 띄어야 할 때가 많다. 웹접근성을 고려했을때 팝업창을 열면, 팝업창으로 포커스 해주고 아웃라인(시각적),탭인덱스0(키보드접근성) 처리를 해줘야 한다. 그래야 팝업을 열고 나서 탭을 눌러이동하면 팝업으로 이어진다. 문제는 팝업을 열고 탭을 계속누르면 포커스가 팝업창 밖으로 이동한다. 그래서 팝업을 닫기 전까지는 팝업창을 빠져 나가지 못하도록 처리해줘야 한다. 1) 모달의 닫기 버튼은 마크업에서 하단에 배치한다. 2) 아래와 같이 스크립트를 짜준다. $(".modal-wrap").off('keydown.modal').on('keydown.modal', function(e) { if ($(".modal-wrap").is(':focus') && e.shiftKey && e.key..
-
JS / swiper linear autoplay 물흐르듯 슬라이드 구현하기Web dev/JavaScript 2023. 6. 17. 17:57
물흐르듯이 스와이퍼를 구현하려면 CSS 를 수정해주면된다. disableOnInteractiond옵션을 false로 해주면 스와이퍼를 잡고 움직여도 다시 물흐르듯 움직인다. 아니면 아예 터치안되도록 처리하는것도 괜찮을 것 같다. let sectionSwiper = new Swiper(".swiper-container.section_swiper", { slidesPerView: "auto", loop:true, observeParents:true, observe:true, autoplay: { delay: 0, disableOnInteraction: false }, speed: 5000, }); .section2 .section_swiper > ul{ align-items: center; /* 이건 빼도 ..
-
JS / swiper 옵션 정리Web dev/JavaScript 2023. 6. 11. 20:18
swiper 선언 // 일반 swiper 설정 예시 const slide = new Swiper('#test-slide', { slidesPerView : 'auto', spaceBetween : 6, }) // 변수에 담아서 활용 예시 var slideSetting = { slidesPerView : 'auto', spaceBetween : 6, loop : false, } const slide = new Swiper('#test-slide', slideSetting) swiper 옵션 slidesPerView : 'auto', // 한 슬라이드에 보여줄 갯수 spaceBetween : 6, // 슬라이드 사이 여백 loop : false, // 슬라이드 반복 여부 loopAdditionalSlides..
-
JS / sort() 매서드로 정렬하기Web dev/JavaScript 2023. 4. 30. 19:53
작품 투표를 하고, 작품의 득표수를 체크해 많은 순서대로 정렬을 해보았다. count는 문자열이라서 parseInt()로 숫자로 변행해주고 sort()하였다. $.each(categoryVal,function(optListKey,optValList){ optValList.sort(function(a, b) { let intA = parseInt(a.count); let intB = parseInt(b.count); if(intA intB) return -1; if(intA === intB) return 0; }); })
-
JS / 객제 지향 프로그래밍 추상화,캡슐화,상속,다형성Web dev/JavaScript 2023. 4. 30. 19:12
1. 추상화(Abstraction) 가상의 존재를 프로그램 내에서 사용할 용도에 맞게 적절하게 설계하는 과정, 프로퍼티와 메소드의 이름을 누구나 이해하기 쉽게 잘 지어주거나 주석을 단다. class User { constructor(email, birthdate) { // 사용자의 이메일 주소 this.email = email; // 사용자의 생일 this.birthdate = birthdate; } // 물건 구매하기 buy(item) { console.log(`${this.email} buys ${item.name}`); } } 2. 캡슐화(Encapsulation) 외부에서 프로퍼티나 메소드에 직접 접근할 수 없도록 함 class User { constructor(email, birthdate) {..
-
JS / 바닐라로 앵커트메뉴, 메뉴엑티브, 스티키 만들기Web dev/JavaScript 2023. 4. 23. 14:17
이전에 스티키 기능만 넣은 메뉴를 만들었다. 더불어 메뉴를 누르면 앵커드기능과 스크롤위치에 따른 메뉴 엑티브기능을 만들었다. 앵커드 기능 1) 각 컨텐츠의 위치 구하기 offsetTop; 사용, 제이쿼리는 offset().top 사용 2) scrollTo({ top:ContentsBoxPosition, behavior:'smooth'}) 메서드 사용, 스무스옵션을 안쓰면 뚝뚝 끊김. 3) 버튼들에게 이벤트리스너 주기 anchor(){ let tabBtn = document.querySelectorAll(".category_list li"); let contentsBox = document.querySelectorAll(".contents_box"); function addEvent(idx){ // le..