본문 바로가기

JavaScript

(36)
[#. JavaScript] addEventListener is not a function 에러 해결 방법 js에서 클릭이나 스크롤 이벤트를 추가하려고 하는데 addEventListener is not a function 에러가 발생했다 getElementsByClassName() 를 사용해서 가져온 요소는 배열이다 그래서 getElementsByClassName()를 사용한다면 length만큼 for문을 이용하거나 아래처럼 하나일 경우 [0]번째 요소임을 명시해야 한다 var topDiv = document.getElementsByClassName("container"); topDiv[0].addEventListener("scroll", function() { alert("test"); });
[#. regex] regex 작성법, Regular expression 이제 복사해서 쓰지 말고 직접 작성해서 쓰자 input에서 숫자 혹은 한글만 작성 가능하게 하고 싶다 이때 regex를 사용해야 하는 경우가 꽤 많다 매번 숫자만, 영어만, 한글만 등 검색해서 사용하지 말고 직접 작성해서 사용하는 법을 알아보자 기호 뜻 | 또는 () 그룹 [] 캐릭터셋, 괄호 안의 어떤 문자든 [^] 부정 캐릭터셋, 괄호안의 어떤 문자가 아닐때 (?:) 찾지만 기억하지는 않음 ? 없거나 있거나(0 이상) * 없거나 있거나 많거나 + 하나 또는 많거나(1 이상) {n} n번 반복 {min,} 최소 {min,max} 최소, 최대 \b 단어 경계 \B 단어 경계 아님 ^ 문장의 시작 $ 문장의 끝 \ 특수 문자가 아닌 문자 . 어떤 글자(줄바꿈 문자 제외) \d digit 숫자 \D digit 숫자 아님 \w word 문자(영숫자 & ..
[#. JavaScript] Array 배열 함수 모음 Array APIs 자주 쓰는 혹은 자주 쓸 배열 함수들에 대해 정리해 보자 기본적으로 animals라는 배열이 있다고 하자 let animals = ["dog", "cat", "bird"]; for of 반복이 가능한 객체의 모든 원소를 하나씩 추출하여 변수에 담아 반복문을 수행한다 value에는 실제 원소의 값이 담긴다 for(let animal of animals) { console.log(animal); } // "dog" // "cat" // "bird" forEach() forEach는 for of와 달리 Array 배열만 반복할 수 있다 animals.forEach((animal) => console.log(animal)); // "dog" // "cat" // "bird" push(), pop() push는 ..
[#. JavaScript] regex 정규표현식 이용해서 한글, 숫자만 입력 가능하도록 하기 + 글자수 제한 input에서 한글, 숫자만 입력 가능하도록 하고 싶다 var testStr = "아이스아메리카노"; var testStr2 = "아이스아메리카노2"; var regex = /^(?=.*[가-힣])(?=.*[0-9]).{2,10}$/; regex.test(testStr);// false regex.test(testStr2);// true  정규표현식을 만족하는 경우 true를 반환 만족하지 않는 경우 false를 반환하는 것을 볼 수 있다 혹은 아래와 같이 쓴다 var regex2 = /([ㄱ-힣]+[0-9]+).*|([0-9]+[ㄱ-힣]+).*/g;
[#. Javascript] 휴대폰, 이메일 인증번호 타이머 버튼을 클릭했을 때 인증번호를 입력할 수 있는 유효시간 타이머가 시작되고 버튼을 다시 클릭했을 시 유효시간 재시작 만료됐을 시 `시간초과`라는 alert와 텍스트가 노출된다 var timer = null; var isRunning = false; $("button").on("click", function() { var display = $(".time"); // 유효시간 설정 var leftSec = 120; // 버튼 클릭 시 시간 연장 if (isRunning){ clearInterval(timer); display.html(""); startTimer(leftSec, display); }else{ startTimer(leftSec, display); } }); function startTimer(c..
[#. Swiper] Swiper 슬라이드 작동 안 될 때 해결하기 https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 팝업을 띄우고 팝업 안에서 swiper를 사용하려고 한다 ① HTML 1 2 3 ② JS var swiperPopup = new Swiper('.swiper-popup', { // Optional parameters direction: 'horizontal',// 가로 슬라이드 slidesPerView: 1,// 한 영역에 보이는 슬라이드 수 spaceBe..
[#. JavaScript] sort()를 이용해서 오름차순, 내림차순 정렬하기 sort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환하며 return 값이 음수, 양수, 0인지에 따라서 순서를 정한다 파라미터로 보통 a, b 두 개의 값을 받으며, a는 배열의 n+1 값, b는 n 값이다 const arr = [2, 1, 3, 10]; var data = arr.sort((a, b) => { console.log(a, b); // 1 2 // 3 1 // 10 3 }); ❶ a, b 파라미터 값이 없을 경우 배열의 값들은 유니코드 값 순서대로 정렬된다 const arr = [2, 1, 3, 10]; arr.sort(); console.log(arr);// [1, 10, 2, 3] ❷ a, b 파라미터 값이 있을 경우 함수의 리턴 값이 0보다 작은 음수일 경우,..
[#. JavaScript] event.stopPropagation(), event. preventDefault()의 차이 event.stopPropagation() 이벤트 캡쳐링과 버블링에 있어 현재 이벤트 이후의 전파를 막는다 이벤트가 상위 엘리먼트에 전달되지 않게 막아준다 table row 클릭 시에 페이지를 이동하도록 click 이벤트를 적용해 놨고, column에도 delete 아이콘 클릭 시에 click 이벤트를 적용해 놨다 e.stopPropagation() 적용 전에는 delete 아이콘을 클릭하면 column onClick => row onClick 순으로 둘다 진행된다 => console에 test 출력 후 페이지 이동 import React from "react" import { Table } from "antd" import { DeleteOutlined } from "@ant-design/icons" ..