string | number 같은 union type 에는 일반적으로 조작을 못하게 막아놔서 에러가 발생합니다. function narrFunction(x: number | string){ return x + 1; // error } 이를 해결할 수 있는 방법에 대해 알아보겠습니다. 📌 Narrowing Narrowing은 실제로 선언된 타입들에 대해 더 구체적인 타입에 대해 처리하는 것으로, 각 타입에 대한 처리를 분명하게 해서 에러가 나지 않는 안전한 코드를 만드는 것입니다. function narrFunction(x: number | string){ if(typeof x === 'number'){ return x + 1; }else if(typeof x === 'string&#..
업무 진행을 하다가 차트 내에 날짜를 입력하는 부분이 있었다. 입력하는 날짜 형식이 배열로 지정되어 있어서 오늘 날짜로 부터 며칠 전까지의 날짜를 구하고 그 사이 기간을 배열로 만드는 작업을 하였다. 📌 오늘 날짜로부터 며칠 전 날짜 구하기 function getFewDays(fewdays){ let agoDate; let date = new Date(); //오늘 날짜 가져오기 date.setDate(date.getDate() - fewdays); // let month = (date.getMonth()+1); month = month < 10 ? '0' + month : month; let day = date.getDate(); day = day < 10 ? '0' + day : day; agoDat..
📋 script를 이용해 지정된 범위 내 랜덤으로 숫자를 추출하는 방법입니다. ✔ Math.floor() Math.floor() 함수는 주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수를 반환합니다. ✔ Math.random() Math.random() 함수는 0 이상 1 미만의 구간에서 근사적으로 균일한 부동소숫점 의사 난수를 반환하며, 이 값은 사용자가 원하는 범위로 변형할 수 있습니다. [CODE] Math.random() 함수는 0 이상~1 미만의 난수를 생성합니다. Math.random(); Math.floor() 함수는 해당 숫자와 같거나 해당 숫자 보다 더 작은 정수를 반환 합니다. Math.floor(3.5) //결과 3 Math.floor(-3.5) //결과 -4 Math.random(..
📋 addEventListener DOM 객체로부터 이벤트가 발생할 때 해당 이벤트 처리 핸들러를 추가할 수 있는 오브젝트입니다. 특정 DOM에 script 이벤트가 발생할 때 특정 함수를 호출합니다. ✔ 사용 방법 초기 적용 시 DOM객체.addEventListener(이벤트 명, 실행할 함수 명, 옵션) 사용 후 제거 시 DOM객체.removeEventListener(이벤트 명, 실행할 함수 명, 옵션) ✔ 자주 사용하는 이벤트 종류 click : 클릭할 때 이벤트 발생 mouseover : 마우스를 요소 위에 올리면 발생 mouseout : 마우스가 요소 밖으로 벗어날 때 발생 mousedown : 마우스 클릭 버튼을 누르고 떼기 전인 순간 발생(드래그할 때 사용) mouseup : 마우스 클릭을 ..
📋 Swiper swiper는 slick과 같은 슬라이드 라이브러리이지만 jQuery가 아닌 JavaScript를 사용하며 다양한 옵션을 지원해서 사용하기 편합니다. 그리고 하위 브라우저(IE9)에서도 동작하기 때문에 크로스 브라우징 측면에서도 뛰어납니다. 1. 설치 방법 swiper를 사용하려면 여러가지 방법이 있습니다. 원하는 방식으로 사용하시면 됩니다. CDN으로 사용하는 방식 swiper 파일을 직접 다운받아 사용하는 방식 npm으로 설치하여 사용하는 방식 CDN 2. 기본 사용법(구조) 사용법은 매우 간단합니다. 슬라이더를 사용하기위해 만들어 놓은 html문서 안에 swiper의 기본 구조에 맞는 class를 넣어주면 됩니다. 주의할 점은 swiper에서 정해 놓은 class명을 지정해줘야 합니..
📋 마우스 커서 모양 바꾸기 커서 모양을 바꾸는 원리는 간단합니다. html에 비어있는 태그를 만들어준 후에 css로 사용할 커서 모양을 커스텀 해준 후에 script로 마우스를 따라다니게 하는 원리입니다. 아래 태그를 살펴보겠습니다. html에 커서로 사용할 빈 태그를 만들어 줍니다. css로 커서로 사용할 모양을 커스텀 해줍니다. position: absolute 로 만들어진 div 태그를 띄워줍니다. body에 cursor: none 으로 기존 커서를 없애줍니다. body{cursor: none;} .cursor{ width: 20px; height: 20px; background-color: #000; border-radius: 10px; position: absol..
📋 script 태그 위치? script 태그는 보통 html 문서의 /*스크립트 파일 3*/ script 파일1 document.body.prepend('script_1.js'); console.log('script_1.js'); script 파일2 document.body.prepend('script_2.js'); console.log('script_2.js'); script 파일3 document.body.prepend('script_3.js'); console.log('script_3.js'); script파일 1과 2는 /*스크립트 파일 3*/ script태그에 defer 속성을 사용하게 되면 브라우저가 html문서를 읽을 때 script 태그를 만나더라도 DOM생성을 멈추지 않고 계속해서 ht..
📋 slick-slider slick-slider 는 반응형 웹을 지원하는 jQuery 슬라이더 라이브러리입니다. 기본 사용법과 반응형 작업방법을 설명 드리겠습니다. 1. slick 다운로드 및 css,js 파일 로드 slick 메인 홈페이지 오른쪽 상단에 get it now를 클릭한 후 다운로드를 진행하거나 그 아래의 CDN주소를 복사해서 태그안에 넣어서 사용하면 됩니다. 그리고 slick-slider는 jQuery 기반으로 만들어졌기 때문에 jQuery가 필요합니다. CSS JS 2. 기본 사용법 slick-slider의 기본 구성은 아래 코드 처럼 div형태로 구성되어 있는 html문서를 슬라이더 형태로 변경해줍니다. 1 2 3 4 5 $(function(..
