여리 Repository 여리 Repository

javascript

• JS / 유튜브 자주쓰는 iframe player API 매개변수 정리

  Web dev/ETC 2024. 2. 14. 23:01

  자주 쓰는 유튜브 iframe player 매개변수 정리 유튜브영상 시작시간 설정 // 시작시간 설정 유튜브영상 끝나는시간 설정 // 끝나는시간 설정 유튜브영상 자동재생 // 자동재생 설정 mute=1 로 소리없음을 해야 자동재생 유튜브영상 컨트롤러 제거 // controls=0(컨트롤 제거), controls=1(기본값)플레이어 컨트롤이 플레이어에 표시 유튜브영상 로고 제거 // 유튜브 로고 제거: modestbranding=1 유튜브영상 반복 재생 // 반복재생 단일영상은 playlist를 추가 해줘야한다. 유튜브영상 관련 영상 표시 안하기 // 관련 동영상 표시 안하기 유튜브 IFrame Player API https://developers.google.com/youtube/player_parame..

  Read More
• 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..

  Read More
• 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..

  Read More
• 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..

  Read More
• Error / JSON Import Error

  Web dev/Error 2023. 6. 11. 20:27

  이번 작업에서 스와이퍼에 아이템을 150개 가까이 넣었어야 했다...개노가다.. JSON에 정리하여 import 했는데 자꾸 에러가 나는것.. 스크립트 연결시킬때 type을 모듈로 설정해주면 해결! 해결하기전 아래와 같은 방법도 있길래 해봤는데 안되서 패쓰.. import data from './config.json' assert{ type: "json"} ;

  Read More
• 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..

  Read More
• 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; }); })

  Read More
• 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) {..

  Read More