본문 바로가기

JavaScript80

JavaScript - 유용한 정규식 예제들 내가 보려고 만든 유용한 정규식 예제들 🤩 정규식은 사랑입니다 💝 (계속 업데이트 해서 채워나갈 예정) JavaScript - 유용한 정규식 예제들 URL 검사 const validURL = (url: string): boolean => { if (!url) { return false; } const regex = /(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-/]))?/g; return regex.test(url); }; 이메일 검사 const validEMAIL = (email: string): boolean => { if (!email) { return false; } const regex = /^([\w._-])*[.. 2023. 3. 2.
JavaScript - 재귀함수 만들기(feat. 반복문 비교) 프로그래머스 코테 문제를 풀어보다가 while 문을 사용한 함수를 → 재귀함수로 바꾸어 한번 더 풀어보았다. 처음에는 어렵지만 유형을 익히고 이해하게 될수록 참 재미있어 지는 것 같다. JavaScript - 재귀함수 만들기(feat. 반복문 비교) 문제를 간단히 설명해보면 다음과 같다. (출처 : 프로그래머스 - 콜라문제) 콜라 빈병 2개를 가져가면 → 새것 1병으로 교환해준다. 나는 총 빈병 20개를 가지고 있다. → 그럼 새것 10병을 받을 것이다. 10병을 그자리에서 마신다 → 그럼 새것 5병을 받을 것이다. 5병을 그자리에서 마신다 → 그럼 새것 2병을 받을 것이다. + 빈병 1개가 남을 것이다. 2병을 그자리에서 마신다 → 그럼 새것 1병을 받을 것이다. 새병 1개 마셔버리고 + 아까있던 빈병.. 2023. 3. 1.
웹최적화 - Reflow 와 Repaint Reflow ? Repaint ? 브라우저 렌더링 과정을 공부할 때 나왔던 단어들이다. 그 전까지는 그렇게 깊이 생각해본 적은 없었지만, 최적화를 공부하면서 이들의 존재감에 대해서 깨닫게 되었다. 이들은 무엇이고 왜 존재감이 생겼을까? 브라우저 렌더링의 과정을 간단히 알아보면 dom + cssom 트리를 각각 만들어서 → 렌더 트리를 만들어내고 → 각 요소들의 사이즈를 계산해 자리를 배치하는 레이아웃을 거친 뒤 → 그 레이아웃 요소들에 페인트하는 페인트 단계를 거친다 → 그 모든 걸 조합하는 컴포짓해서 화면에 내보낸다 웹최적화 - Reflow 와 Repaint 여기서 css 요소가 변경이 되면 Reflow 와 Repaint 를 거친다. Reflow는 이모든 단계를 다시 거치는 것이고 DOM + CSSOM.. 2023. 2. 4.
JavaScript - 조합 구하기 (재귀함수) 조합은 순서 상관없이 경우의 수를 구하는 것이다. 그림을 보면 한번에 이해가 될 것이다. [1,2,3] 배열의 경우 [1,2], [2,3], [1,3] 이렇게 세가지 조합이 나온다 JavaScript - 조합 구하기 (재귀함수) 조합을 구하기 위해서는 재귀함수를 응용한다. 반복문으로 구할 수 있지만 일일이 구하고자 하는 숫자만큼 반복해주어야되어 코드가 길고 복잡해질 수 있기 때문이다. // 1 function getCombination(arr, selectNum){ const result = []; // 결과값을 담은 배열선언 if(selectNum === 1) { // selectNum 이 1 일 떄 (재귀함수의 종료조건, 탈출구!) return arr.map(item => [item]) // ex) .. 2023. 1. 4.
JavaScript - 소수구하기 (에라토스테네스의 체) 소수는 자기 자신과 1 로만 나뉘어지는 수이다. 예를 들어 5 는 1 로만 나뉘어 질 수 있다. 자, 소수를 구하는 판별식을 정리해보았다. 이제 당신은 이걸 가지고 응용하기만 하면 된다 :) JavaScript 에서 소수인지 검사하기 위해서는, For 문으로 검사를 할 때, { number 이 0, 1 이면 탈락 → 1은 소수가 아님 number 가 2 이면 소수이다 → 2은 소수이다 number % index === 0 이라는 조건에 들거든 탈락 → 자기자신과 1로만 나뉘어져야 된다는 소수의 조건 성립이 X) } 방법 1) 반복문 함수 판별식 함수는 보기에 너무 간단하다. 하나하나씩 다 돌려서 소수에 부합하는 것을 찾아낸다. 시간복잡도는 O(N) 으로 무난하지만, 해당하지 않는 숫자까지 일일히 하나하나.. 2022. 12. 30.
JavaScript - e.preventDefault() 와 e.stopPropagation() 의 차이점 특정 이벤트를 막고 다른 동작을 실행해야 하는 상황이 있다. 아래와 같이 안의 를 클릭하면, onClick 이벤트가 실행되야 하지만 현실은 다르다. href 를 통해 링크로 이동한다. console.log('클릭'}/> 그 이유는 이벤트 버블링 때문이다. 자식 → 부모 순으로 이벤트가 실행이 된다. 자식(온클릭) 이벤트 후, 부모(링크 이동) 이벤트까지 순서대로 실행되는 것이다 이럴 때 우리는 e.preventDefault()와 e.stopPropagation() 를 사용해서 부모까지의 흐름을 끊어주어 해결하였다. 그 시점에서 정확히 그 둘의 차이가 무엇인지 궁금해졌다. 실제 버블링 이슈를 어떻게 해결했는지 궁금하시다면 ... ? (아래 포스팅 클릭 ↓↓↓) React(55) 겹친 영역에서 자식 이벤트만.. 2022. 12. 26.
JavaScript - 정규식 전화번호 입력시 하이픈(-) 추가하기 하이픈 (-) 없이 전화번호를 숫자만으로 입력했을때, 하이픈(-) 을 자동으로 추가해주는 정규식을 알아보자 아래와 같이 숫자로만 입력하면 → 하이픈이 붙어서 리턴된다. 정규식을 이용해보았다. const phone = 01012340000; phone .replace(/ /g, '') // 공백이 들어있다면 지워주고 .replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`); // 숫자그룹을 나눠 사이에 하이픈(-)추가 // 결과 010-1234-0000 관련 개념 포스팅 정규식을 자세히 파보기 위해 관련 개념을 정리한 포스팅이다. JavaScript - 정규식 Regular expression updated 07/30/22 오늘은 정규식의 날이었다 정규식이 나를 애먹였지.. 2022. 12. 2.
JavaScript - 문자열인 숫자 여부 확인하기 타입은 String 인데 무늬만 숫자인 경우가 있다. '153' 이런 경우가 그렇다. 숫자인 척 위장한 스트링 녀석들의 값이 숫자인지 확인해주는 내장 메소드를 알아보자. (실제로 적용해본 코드 중심으로 하나씩 업데이트해나갈 예정) isNaN() console.log('aaa', isNaN('aaa' as any)); // true console.log('132', isNaN('13579' as any)); // false console.log('1,399', isNaN('1,399' as any)); // true ** BUT 여기서 '1,234' 세자리 콤마로 분리되는 숫자값이 들어가게 되면 isNaN('1,234' as any)는 string 으로 취급한다. 2022. 11. 26.
JavaScript - scrollIntoView() 이란 화면 바깥으로 삐져나가 스크롤해야만 볼수있는 메뉴 탭이 있다. 살짝 화면을 삐져나간 메뉴를 클릭하면, 메뉴탭은 삐져나간 그자리 그대로 있고, 내용만 바뀐다. 뭔가 이상하지 않은가? 보통은 메뉴을 누르면 자동으로 스르륵 화면 중간쯤 알아서 스크롤되는 동작에 익숙하지 않은가? 그 기능을 위해 javaScript 내장메서드인 scrollIntoView() 를 알아보자 JavaScript - scrollIntoView() 이란 이 메소드는 scrollIntoView()가 호출된 엘레멘트를 유저가 볼수있는 부분으로 상위 컨테이너를 스크롤 한다 The Element interface's scrollIntoView() method scrolls the element's ancestor containers such t.. 2022. 11. 8.
반응형

티스토리툴바