IT/javascript

[javascript] range slider 양옆에 버튼을 두고 25% 단위로 값 조절하는 함수 만들기

range slider란? range slider는 흔히 우리가 슬라이더라고 많이 부르는 범위를 조절하는 바 형태의 컴포넌트입니다. javascript에서는 태그의 type 속성을 "range"로 넣으면 만들 수 있습니다. min에는 최소값을, max에는 최댓값을 넣을 수 있고, default값은 중간값이 들어갑니다. 동그란 핸들부분을 thumb라고 흔히 부르는데, 저 부분을 눌러서 좌우로 당기면 값이 변경되는 형태입니다. 그런데 실제로 사용하다보면 세밀한 조절보다 한 번에 수치를 조절하고 싶을 때가 있는데 그럴 때는 어떻게 하면 될까요? 예를 들어 위와 같은 형태로 좌우에 버튼이 있어서 누르면 현재값에서 가까운 25의 배수로 설정이 되면 어떨까요 값이 68일때 왼쪽 버튼을 누르면 50이 되고 오..

[javascript] 특정 시간만큼 대기시키는 함수 만들기(setTimeout(), Promise, async await)

함수 실행 중에 특정 시간만큼 대기시키고 싶을 때 사용하는 함수 만들기 안녕하세요~ 보통 자바스크립트에서 시간을 지연시키기 위해서 setTimeout()을 많이 활용하는데요 setTimeout의 파라미터를 살펴보면 첫 번째로 code 부분이 들어가고 두 번째로 delay가 들어갑니다. 이중 code는 시간이 지연된 후에 실행될 코드를 말하고 delay는 얼마큼 시간을 지연시킬지를 정하는 값입니다. 그렇다면 특정 시간만큼 대기후에 다음 코드를 실행시키기 위해서는 setTimeout()의 code 파라미터에 코드를 넣어주면 해결되겠죠. 그렇지만 특정 이유로 자주 지연시켜야할 수도 있고 가독성도 떨어지기 때문에 setTimeout()을 응용해서 useSleep()라는 함수를 만들어보겠습니다. const tes..

[javascript] 랜덤 문자열 생성하는 방법

랜덤으로 영어 문자열을 생성하고 싶다면?? 오늘은 자바스크립트에서 랜덤으로 문자열을 생성하는 방법을 간단하게 알아보겠습니다. 구글 같은 곳에서는 페이지별로 다른 비밀번호를 사용할 수 있게끔 자동 비밀번호 생성 기능을 제공해 주죠. 그런 자동으로 생성되는 문자열은 어떻게 만들 수 있을까요? 우선 자바스크립트에서 random함수부터 살펴보도록 하겠습니다. Math.romdom() Math.random() 메서드는 0에서 1 사이의 난수를 반환하는 기능을 가지고 있습니다. 그런데 특정 범위의 int값으로 난수를 받고 싶다면 어떻게 해야 할까요? function getRandomInt(max) { return Math.floor(Math.random() * (max+1)); } Math에는 올림, 반올림, 내림..

[javascript] 객체가 빈 값인지 확인하는 방법

객체 안에 값이 들어있는지 확인하고 싶다면?? 먼저 단순하게 생각해 봤을 때 const obj = {}; if (obj === {}) { console.log("빈 객체입니다"); } 위의 경우에 if 조건문이 true가 될 것 같습니다. 하지만 자바스크립트에서 동등연산자(==)와 일치 연산자(===)는 Abstract Equality Comparison Algorithm를 사용합니다. 그리고 해당 알고리즘을 살펴보면 Return true if x and y refer to the same object. Otherwise, return false. 두 값이 같은 객체를 참조할 때만 true를 반환한다고 되어있습니다. 하지만 단순하게 obj === {}으로 비교한다면 안에 프로퍼티가 비어있다는 점은 동일하..