계발하는 개발자

Array.from() 문자열 등 이터러블 객체나 NodeList 유사 배열 객체를 각 배열 요소로 쪼개는 기능을 하는 메서드 MDN에 보면 Array.from 메서드의 다양한 활용에 대한 설명도 많이 있다. Array.from() - JavaScript | MDN Array.from() 정적 메서드는 순회 가능 또는 유사 배열 객체에서 얕게 복사된 새로운 Array 인스턴스를 생성합니다. developer.mozilla.org 기본 구조 표시된 것은 optional 이며, 필요할 때 선택해서 사용하면 된다. Array.from(iterable, mapFn, thisArg); iterable : 변환할 iterable 객체가 들어온다. mapFn: 각 요소를 변환하는 함수로, 인자로 element, in..

reduce 메서드 reduce 메서드는 배열 각 요소의 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환한다. 참고로! reduce 라는 이름은 배열들을 하나의 값으로 줄이는데 쓰이기 때문에 붙혀졌다. 배열에 들어있는 숫자를 모두 더하거나 평균을 내는 것은 배열을 하나의 값으로 줄이기 위한 동작들이다. 기본 형태 arr.reduce() 인수로 함수를 받음 (누적 계산값, 현재값) => { return 계산값 }; const arr = [1, 2, 3, 4]; const result = arr.reduce((prev, cur) => { return prev + cur; }, 0); console.log(result); // 10 위 예에서 매개변수 prev에는 현재까지 누적된 계산값이 들어간..

findIndex() 메서드란? 주어진 판별 조건을 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환하는 메서드로, 만족하는 요소가 없는 경우 -1을 반환한다. 아래 공식문서에서도 설명이 자세하게 나와있다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex 이번에 next.js로 뮤직플레이어 기능을 구현하면서 findIndex 메서드를 요긴하게 활용한 것 같다. 해당 프로젝트에 대한 회고 겸 findIndex 메서드 정리차 글로도 남겨본다. 플레이리스트 선택시 해당 음원 가사로 변경 플레이리스트에 담긴 li 클릭시 해당 음원의 가사로 변경되도록 해야했다. 내가 클릭한 플레이리스트 타이틀..

이번에 next.js로 뮤직플레이어 기능 구현했던 것을 정리로 남겨본다. 먼저 전체적인 코드는 아래와 같다! HTML, CSS .progress { width: 182px; height: 3.2px; border-radius: 3px; background: rgba(255,255,255,0.4); } .pin { position: absolute; top: -5px; width: 16px; left: 96.5%; height: 16px; border-radius: 50%; background: #fff; pointer-events: all; box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3); } .bar { position: relative; background: #fff; ..