전체 글

사직 아시아드 주경기장 파리 생제르맹 vs 전북 직관 후기

안녕하세요 행복한 알파카입니다. 오늘은 사직에서 이강인 선수가 있는 파리 생제르맹 경기가 있어서 축구를 보러 갔어요 축구를 직관하는 것은 처음이라 되게 설레는 하루였네요 처음 들어갈 때 엄청 긴 줄이 있어서 입장할 때 기다려야 하는 줄 알고 긴장했는데 알고 보니 유니폼을 사기 위해 기다리는 줄이었어요 ㅋㅋㅋ 저도 경기마치고 기념 티셔츠를 하나 구입했습니다~ 요새 날씨가 너무 더워서 기다리면서 조금 힘들었어요 다행히 들어가기 전에 얼음물을 사서 입장했는데 만약 안에 들어와서 물을 구입하려면 엄청나게 긴 줄을 서서 기다려야 했습니다. 사직 아시아드 주 경기장 화장실은 구간마다 존재해서 문제없이 이용했어요. 시작하기 30분 전 오늘의 선발 라인업이 전광판을 통해서 나옵니다. 먼저 전북부터 선발 라인업이 나오는..

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