Sungtt

채팅창의 input에 공백만 있을 경우 활성화되지않는 전송 버튼 만들기위해 제작한 함수였다. if문의 조건중 하나라도 충족하면 true를, 그렇지않다면 false를 반환한다. const blank_pattern = /^\s+\s+$/g; const checkBlankValue = (value: string) => { if (value === ' ' || value.length === 0 || blank_pattern.test(value)) { return true; } else { return false; } }; 이를 짧게 만들면 아래와 같다. trim()은 문자열의 시작과 끝에 있는 공백을 제거하고, 공백만 있는 경우에는 빈 문자열을 반환해준다. !연산자를 통해 문자열이 비어있으면 true를. 문자열..

Failed to execute 'querySelector' on 'Document' 랜덤으로 생성되는 클래스명을 바인딩하려던 중에 만난 오류다. 이는 클래스명이 숫자로 시작할 때 오류가 난다고한다. 위 오류 본문을 보면 클래스명이 숫자로 시작함을 알 수 있다. 제일 깔끔한 방법은 숫자로 시작하는 클래스명을 안 쓰는 것이다. 하지만 불가피한 상황일 때는 아래의 방법으로 시도해 보자. 해결방법 -1 클래스명을 생성 시 맨 앞에 특정 문자열을 추가해 준 뒤 동일하게 요소를 선택하면 된다. 관련 로직이 오류 없이 잘 진행된다. const first = document.querySelector(`.uid${className}`); 해결방법 -2 어트리뷰트 전체를 넘겨주는 방법이다. 잘 보면 클래스를 나타내는 '..

개요 공책게임 제작중 리워드중 골드 차감에 계속 걸리다보면 0에서 더 내려가 음수가 되어버린다. 음수가 되고나서 '골드 몇 배' 리워드를 획득한다게 된다면 대참사다. 골드의 최솟값을 0으로 유지하기위해 음수를 구분하는 방법을 알아보자 Math.sign() 이 함수는 인자로 받은 수의 부호에 따라 값을 반환해준다. 양수는 1 , 음수는 -1, 0은 0, -0은 -0 호출 결과 Math.sign(100) 1 Math.sign(-100) -1 Math.sign("-100") -1 Math.sign(0) 0 Math.sign(-0) -0 Math.sign("number가 아닌 타입") NaN 이제 음지를 인식하는 연산을 프론트에서 할지, 서버에서 할지 고민만 하면 되겠다.

https://jsikim1.tistory.com/227 JavaScript 배열 중복 제거하는 방법 5가지 JavaScript 배열 중복 제거하는 방법 5가지 JavaScript 의 배열에서 중복을 제거하는 5가지 방법을 알려드리도록 하겠습니다. 목차 set() 사용하여 배열에서 중복 제거하는 방법 filter(), indexOf() 사 jsikim1.tistory.com Set 함수가 안되던 이유 https://jnj1.tistory.com/66 [Typescript] --downlevelIteration 에 대해서 for-of 구문이나 배열에 대한 Spread operator 사용시에 downlevelIteration 플래그를 사용하라는 메시지가 출력된다. tsconfig의 target을 확인해 보..

개요 비밀번호가 주어진 양식에 맞는지 체크하기위한 정규표현식을 사용한다. 완성되있는 코드가 어떤 원리로 작동하는지 분석한다. 주어진 양식 영문,특수문자,숫자가 포함된 최소 8글자 최대 25글자여야 합니다. const passwordRegex = /^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-])(?=.*[0-9]).{8,25}$/; 분석 제일 바깥엔 정규표현식 리터럴인 슬래시( / )로 감싸져있다. 그리고 괄호가 크게 3개로 나뉘어져고 안에 문자열을 보아 각 영문,특수문자,숫자에 대한 패턴 검색임을 추측할 수 있다. 정규표현식에 나온 각 특수문자에 대한 기능을 알아보자. 특수문자 예시 설명 소괄호 () a(b)c 전체 패턴을 검색한 후에 괄호안에 명시된 문자열을 저장해준다("abc"를 찾으면 ..

개요 포트폴리오를 만들던도중 문자열 변환을 해야할 상황이 찾아왔다. 크롤링한 각 사이트의 날짜양식이 달랐기때문이다. 양식을 통일하기위해 문자열을 변환해야했으며, 존재만 알았지 실제로 코드에 적용해본적 없는 메서드들이라 예상한 시간보다 쪼끔 더 헤맸다. 그런 기념으로 어떻게 사용했는지 기록하고자한다. 나는 공간을 더 적게 차지하여 비교적 눈이 편안한 우측의 00.00.00-00.00.00 양식으로 통일하기로 했다. 그럴려면 우측에서 삭제해야할 문자열은 공백, / , 연도 앞 2자리 총 3가지 문자열을 삭제하고, / 의 자리에는 . 을 넣어주어야했다. 사용한 메소드들의 기능을 다시 한번 훑고가자. replace replace 메서드는 어떤 패턴에 일치하는 일부 또는 모든 부분을 원하는것으로 교체한 새로운 문..

브라우저는 키보드를 누를때나, 스크롤을 내릴때나, 클릭을 할때나 항상 이를 감지하고 이벤트를 발생시킨다. 특정 타입의 이벤트에 반응하여 어떠한 동작을 실행하고싶다면 이 이벤트 핸들러를 등록하여 할 수 있다. - 이벤트 핸들러 이벤트가 발생했을 때 호출될 함수를 말한다. - 이벤트 핸들러 등록 브라우저에게 이벤트 핸들러 호출을 위임하는것을 말한다. - 이벤트 타입 브라우저에서 일어나는 이벤트의 종류들을 말한다. click - 마우스를 클릭하였을 때 dbclick - 마우스를 더블 클릭하였을 때 keyup - 누르고 있던 키를 놓았을 때 등 자주 쓰는 이벤트 타입이 더 있고 총 200가지가 넘는다고 한다. 이벤트핸들러에는 총 3가지 방식이 있다. 1. 이벤트 핸들러 어트리뷰트 방식 HTML의 요소에 접두사 ..

data어트리뷰트와 dataset프로퍼티에 대해 배웠다. 예전에 스크롤감지 애니메이션 라이브러리를 사용할 때 이 data어트리뷰트를 통하여 애니메이션을 조절했는데, 뒤늦게서야 그 원리를 이해할 수 있는 시간이었다. Sungtt Sott data프로퍼티 값 dataAdd dataCss 1번 dataCss 2번 See the Pen Untitled by qirtudgus (@qirtudgus) on CodePen.

자바스크립트 document 메서드를 사용하여 html의 노드를 제어하는 몇가지 방법이다. document.createElement("문자열 태그네임") 인수를 통해서 전달받은 element노드를 생성한다. document.createTextNode("생성할 문자열" 또는 변수) 전달받은 인수를 textnode로 생성한다. element.removeChild(x) 전달받은 인수를 삭제한다. 자신을 호출한 메서드의 자식노드여야한다. element.appendChild(x) 전달받은 인수를 element의 마지막 자식노드로 추가한다. 자신을 호출한 메서드의 자식노드여야한다. element.insertBefore(x,y) 첫번째 인수(x)로 전달받은 요소를, 두번째 인수(y)에 지정한 노드앞에 추가한다. 자신..

오늘은 스크롤을 실시간으로 감지하여 일정 위치에서 애니메이션이 실행되는 코드를 작성하기위해 알아보았다. 스크롤 감지를 위해 쓰이는 내장함수는 아래와 같았다. 이미지 출처 https://developer.mozilla.org/ko/docs/Web/API/Element/getBoundingClientRect window.pageYoffset HTML 시작점에서 viewport 시작점까지의 Y축 거리 window.pageXoffset HTML의 시작점에서 viewport 시작점까지의 X축 거리 element.getBoundingClientRect() 위 이미지에 따라 지정요소와의 거리를 반환해준다. HTML는 아래와 같다. Child 자바스크립트는 아래와 같다. function update(){ const c..