IT

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

[Axios] signal(AbortController)를 이용해 응답오지않는 요청 취소시키기

API 요청 취소시키는 방법 일반적으로는 아래와 같이 axios config에 timout만 넣어주면 설정해둔 시간을 초과하면 자동으로 취소시킬 수 있습니다. const testApi = async (jsonData) => { try { const res = axios.get('/api/data', { timeout: 5000 }) status = res.status; } catch (error) { console.error("데이터 불러오기 에러 - ", err); status = 500; } return status; }; 또 api 요청을 취소시키는 방법으로 CancelToken을 많이 이용해왔습니다. const testApi = async (jsonData) => { try { const canc..

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

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

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

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

[Notion/노션] 노션 소개 및 꿀팁 대방출

노션이란? 노션은 단순한 메모부터 협업 툴, 데이터베이스, 웹페이지 등 다양하게 활용할 수 있는 애플리케이션입니다. 데스크톱 애플리케이션뿐 아니라 휴대용 디바이스 어플, 웹앱으로도 제공되어 언제 어디서든 원하는 방법으로 사용할 수 있습니다. 예전에는 에버노트라는 프로그램이 많이 활용되었는데 유료화 정책 이후로 많은 사람들이 노션을 사용하기 시작했습니다. 노션도 물론 유료 정책들이 있지만 무료로도 충분히 활용할 수 있습니다. 에버노트는 연결가능한 기기의 제한이 있는 것이 너무 불편했는데 노션은 그런 부분 없이 사용가능한 것이 장점입니다. 또 메모장으로써의 역할도 훌륭하지만 그 외에 다양한 활용 방법이 있고 현재 그 기능이 점점 확장되어가고 있습니다. 특히 IT회사에서 협업 툴로 사용하는 곳이 점점 늘어나는..

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

[코딩테스트/프로그래머스] 완주하지못한 선수(해시, level1) - javascript

(출처: 프로그래머스) 문제 설명 수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다. 마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들의 이름이 담긴 배열 completion이 주어질 때, 완주하지 못한 선수의 이름을 return 하도록 solution 함수를 작성해 주세요. 제한사항 마라톤 경기에 참여한 선수의 수는 1명 이상 100,000명 이하입니다. completion의 길이는 participant의 길이보다 1 작습니다. 참가자의 이름은 1개 이상 20개 이하의 알파벳 소문자로 이루어져 있습니다. 참가자 중에는 동명이인이 있을 수 있습니다. 입출력 예 participan..