JavaScript
-
[JavaScript] reduce, mapJavaScript 2022. 9. 3. 21:31
JavaScript에서 Array 관련 함수 중 성질이 유사한 2가지 함수를 소개하고자 한다. reduce, map 이란 함수들이 있는데, 각각 사용법이 조금씩 다르다. 1. reduce : 선언된 Array를 이용해 Array내부의 이전값과 현재값을 이용한 연산에 활용하기에 좋다. array.reduce(이전값, 현재값, 인덱스, 대상Array) 형태로 사용할 수 있으며, 대표적으로 쓰이기 좋은 곳은 이전값과 현재값을 더하거나 빼는 등의 연산이 필요한 경우에 사용하기 좋다. 2.map은 기존의 Array를 이용해 새로운 Array를 만들어야 할 떄 유용하다.
-
[Javascript] async await으로 순서 조작하기 (동시실행, 순차실행)JavaScript 2022. 8. 14. 10:11
Promise를 반환하는 function을 선언하고 .then() 을 통해서 순서를 조작할 수 있기는 하지만, 실제 사용에 있어 코드가 길어지고 읽기 난해해지는 부분이 있는데 이때 javascript에서 제공하는 function의 async await 옵션을 활용하면 좀 더 해석하기 편하게 순서를 조작할 수 있다. 아래 두 함수가 있다. func1()은 2초의 딜레이를 두고 다음동작을 수행하는 Promise function이고, func2()는 1초의 딜레이를 두고 다음동작을 수행하는 Promise function이다. 이와 같은 상황에서 순서를 조작하는 방식은 대략 2가지로 나눌수가 있다. - 동시에 두 Promise를 실행시키지만 종료시점을 컨트롤하는 방식 - 순차적으로 Promise를 컨트롤하는 방..
-
[JavaScript]마우스커서 커스터마이징 하기JavaScript 2022. 8. 6. 11:46
마우스커서를 원하는 모양으로 바꾸는 방법을 배웠다. 1. 에 커서 이미지를 적용시킬 div 하나를 선언한다. 2.선언한 div에 스타일을 입힌다. (style.css) 3.css를 화면에 붙이기 방금 입힌 css로 인해 화면 좌상단에 동그라미 모양이 생성되었다. (circularCursor의 스타일) 이제 이 동그라미를 마우스커서 위치에 이동시키는 이벤트를 추가하면 이 동그라미가 새로운 마우스 커서가 된다. 버튼이나 체크박스 위에서 기존 마우스 커서가 보이는 것은 따로 설정이 필요한 것으로 보이지만 어찌됐건 커서가 동그라미로 바뀌는 것을 확인할 수 있었다.
-
[Javascript] sort , filter 간단예제JavaScript 2022. 7. 20. 23:25
javascript를 사용하다보면 종종 array의 값을 정렬하거나, 솎아내야 하는 경우가 있는데, 이때 sort()나 filter()를 사용하면 편리하게 원하는 값을 얻을 수 있다. 예시 let array = [2, 4, 10, 9]; // 오름차순 array.sort(function(a, b){ return a - b; //앞값 - 뒷값 .. 결과가 0보다 크냐 같냐 작냐로 위치를 결정함 }); console.log("sorted arr: "+array); // sorted arr: 2,4,9,10 //내림차순 정렬 array.sort(function(a, b){ return b - a; //뒷값 - 앞값 .. 결과가 0보다 크냐 같냐 작냐로 위치를 결정함 }) console.log("desc sor..