본문 바로가기

분류 전체보기

(179)
[#. 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..
[#. Git] Github 인증 방식 변경 => Access Token 발급하고 MAC OS 기준 KeyChain 시스템에 저장하기 remote: Support for password authentication was removed on August 13, 2021. Please use a personal access token instead. remote: Please see https://github.blog/2020-12-15-token-authentication-requirements-for-git-operations/ for more information. fatal: unable to access 'https://github.com/userName/repoName.git/': The requested URL returned error: 403 연휴를 쉬고 와서 git pull을 하니 위에 보이는 메시지가 뜨면서 pull이 ..
[#. 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..
[#. Firebase] Firebase Analytics 파이어베이스 애널리틱스 HTML script에 기본 설정하기, event 설정하기 ① Firebase에 프로젝트 추가 https://console.firebase.google.com/ 로그인 - Google 계정 하나의 계정으로 모든 Google 서비스를 Google 계정으로 로그인 accounts.google.com ② 추가한 프로젝트에서 웹 추가 ③ fbconfig.js 생성한 프로젝트에 들어간 후 설정(톱니바퀴) 버튼을 클릭하고 33 CDN을 가져온다 fbconfig.js CDN에서 아래 부분만 넣어준다 var firebaseConfig = { ... } ④ Firebase에서 이벤트 추가하기 Analytics=>Custom Definitions=>맞춤 측정항목=>맞춤 측정항목 만들기 이벤트가 잘 생성이 된 것을 볼 수 있다 ⑤ HTML ⑥ Analytics=>Realtime에서..
[#. 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보다 작은 음수일 경우,..
[#. CSS] Canlendar UI(HTML5 + CSS + JS) 달력 UI HTML에서 달력을 구현하기 위해 보기에 깔끔하고 코드도 깔끔한 UI 라이브러리를 서치하게 됐다 ① https://codepen.io/B8bop/pen/GhCAb Calendar Calendar I made for a little project.... codepen.io ⑴ HTML ⑵ CSS body{ background-color: #F5F1E9; } #calendar{ margin-left: auto; margin-right: auto; width: 320px; font-family: 'Lato', sans-serif; } #calendar_weekdays div{ display:inline-block; vertical-align:top; } #calendar_content, #calendar_we..