JavaScript 2

Javascript - sort 함수를 이용한 데이터 정렬

자바스크립트에서 배열을 정렬하기 위해서는 보통 sort() 메소드를 사용한다. 배열.sort([비교 함수]) 비교 함수는 ((이전 값, 현재 값) => { 정렬 가중치 함수 }) 형태로 이루어짐 정렬 가중치 함수는 특정 조건에 따라서 1, 0, -1 처럼 정렬의 기준이 되는 값을 리턴하거나 혹은 숫자 배열의 경우에는 가중치 자체가 되는 값을 리턴한다. sort() 메소드는 원본 배열을 변경하는 함수이며, 동시에 변경된 배열을 리턴하기 때문에 특정 변수에 sort된 배열 값을 저장할 수 있다. 그리고 비교 함수를 인자로 전달할 수 있다. 비교 함수는 다음과 같은 형태를 갖는다. // 조건에 따라 0보다 큰 수(1), 0, 0보다 작은 수(-1) 중 하나의 값을 반환한다. (prev, cur) => { //..

Language/Javascript 2022.05.10

Javascript - 애니메이션 구현 setInterval vs requestAnimationFrame

보통 자바스크립트로 애니메이션을 구현해야 할 경우, setInterval과 requestAnimationFrame을 이용한 방식이 가장 많이 사용된다. 나는 setInterval을 주로 사용했었는데, setInterval로 만든 애니메이션의 경우에는 같은 애니메이션을 동시에 여러 번 호출하는 경우 애니메이션이 꼬이면서 버벅임이 발생할 수 있다는 단점이 있다. (애니메이션 함수가 종료되기 전에 이벤트를 실행하는 경우에는 중첩돼서 이벤트가 실행되기 때문에 clearInterval로 기존 이벤트를 지워줘야 함) 그래서 이번에 requestAnimationFrame으로 코드를 리팩토링하면서 알게 된 setInterval과 requestAnimationFrame의 차이점을 간략히 정리했다. setInterval ..

Language/Javascript 2021.12.12