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..

[react/react-native] 특정 시간만큼 딜레이를 주는 커스텀 훅 만들기

sleep 함수 만들기 오늘은 특정 시간만큼 대기했다가 다음 문장을 실행해야 할 경우에 유용하게 쓰일 수 있는 함수를 만들어볼 거예요. 제 프로젝트에서 통신하는 장비에 특정 명령이 들어가면 2초 정도 대기했다가 다음 명령을 보내야 해서 필요했거든요. 저는 react native 프로젝트를 진행 중이지만 react에서도 똑같이 적용됩니다. setTimeout setTimeout을 이용하면 특정 시간만큼 딜레이를 준 후에 코드를 실행할 수 있습니다. setTimeout(() => { console.log("Delayed for 1 second."); }, 1000) 위와 같이 첫 번째 인수 값으로 함수를 넣고, 두 번째 인수 값으로 delay값을 넣습니다. delay값은 milliseconds단위입니다. 그..

[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 === {}으로 비교한다면 안에 프로퍼티가 비어있다는 점은 동일하..