JavaScript
-
[TypeScript] reduce 사용하기 (array to object)JavaScript 2023. 7. 6. 22:49
// before [ { name: "A", age: 16 }, { name: "B", age: 22 } ] // after { "A": 16 "B": 22 } const result = data.reduce((acc, cur) => { acc[cur.name] = cur.age return acc }, {}) 위와 같은 배열을 아래와 같이 객체로 변환하기 위해 reduce 메서드를 사용하게 되었다. 타입스크립트 쪽에서 다음과 같은 오류 메시지가 나타났다. Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{}'. No index signature with a paramet..
-
[JavaScript] Web Audio API 이해하기 위해 쓰는 글JavaScript 2023. 6. 27. 17:47
언젠가 미래에 Audio API로 재밌는 프로젝트를 한 번 만들어 보고 싶다는 생각이 들었다. 하지만 오디오 관련 지식이나 개념이 부족했고... mdn 문서를 쭉 살펴보니 모르는 용어가 많이 나와서 혼란스러웠다. mdn 문서 기준으로 하여 내가 최대한 이해하기 쉽게 정리해보려고 쓰는 글이다. Web Audio API를 사용한 대략적인 작업 흐름의 과정 오디오 컨텍스트 생성 오디오 관련 작업을 하기 위해서는 먼저 오디오 컨텍스트(AudioContext)를 생성해야 한다. const audioCtx = new AudioContext() 오디오 컨텍스트에서 모든 작업이 일어나기 때문이다. 그럼 오디오 컨텍스트를 가지고 어떻게 작업을 해야할까? 오디오 소스 생성 오디오를 가지고 작업을 하려면 당연히 작업할 오디..
-
[JavaScript] 조합 알고리즘 코드 이해하기JavaScript 2023. 5. 17. 19:10
const getCombinations = (arr, selectNumber) => { const results = [] if (selectNumber === 1) return arr.map((value) => [value]) arr.forEach((fixed, index, origin) => { const rest = origin.slice(index + 1) const combinations = getCombinations(rest, selectNumber - 1) const attached = combinations.map((combination) => [fixed, ...combination]) results.push(...attached) }); return results } const resu..
-
[JavaScript] 여러 request 처리하기 with RTK QueryJavaScript 2023. 5. 8. 21:15
한 컴포넌트에 여러 개의 요청을 하는 상황이 있었다. RTK Query를 사용하여 아래와 같이 여러개의 쿼리를 각각의 data와 loading으로 관리하게 되었다. 하지만 코드가 보기에 복잡해보였고 굳이 각각의 쿼리로 관리할 필요 없이 하나의 쿼리로 관리를 하고 싶었다. const { data: firstData, isLoading: isFirstLoading } = useFirstQuery(); const { data: secondData, isLoading: isSecondLoading } = useSecondQuery(); const { data: thirdData, isLoading: isThirdLoading } = useThirdQuery(); RTK Query의 문서를 살펴보니 쿼리를 커스텀..
-
[JavaScript] Number + (undefined, null, false)와 NaNJavaScript 2023. 4. 25. 21:07
reduce를 쓰다가 특정 조건이면 falsy한 값이 되도록 falsy 한 값들을 더해보았는데 false와 null을 더하니 자바스크립트에서 임의로 0으로 평가되어 1이 나오고 undefined는 NaN이 나왔다. 아 그래서 undefined를 더하면 되겠다. 하고서 나온 결과값으로 if문을 사용하였는데 뭔가 찝찝해서 NaN에 대해서 살펴보니 NaN === false와 NaN === true가 false이고 타입은 숫자형이었다. 찾아보니 NaN은 isNaN() 메소드를 사용하여야 했다. 뭔가 알수록 굉장히 혼란스러웠다. 이렇게 사용하는 방식은 혼란을 줄 수 있어 앞으로는 NaN이 나오는 결과값에 대해서는 피하는 게 좋다고 생각하였다.
-
[Javascipt] Clipboard API 사용JavaScript 2023. 3. 4. 17:50
갈틱폰 사이트를 보면 방 입장시 브라우저 표시줄의 주소가 깔끔하다는 것을 볼 수 있다. 로비에서 초대 버튼을 누르면 아래와 같이 쿼리스트링을 통해 채널번호를 명시해둔 걸 볼 수 있다. 초대 링크를 붙여넣기 하면 /lobby로 이동하게 된다. (생각해보니 방송 스트리밍 시 주소창을 보고 방의 링크를 알 수 있는 상황이 생길 수 있는 듯) // 초대 링크 https://garticphone.com/ko/?c=채널번호 // 입장시 https://garticphone.com/ko/lobby 나는 Next.js를 사용하였기에 useRouter의 push와 replace 메소드 두번째 인수인 as를 통해 브라우저 URL 표시줄에 표시할 경로를 명시할 수 있어 /room에 입장하면 useEffect를 통해 표시줄에는..
-
[JavaScript] 배열 숫자 채우기JavaScript 2023. 2. 10. 15:06
0 to N const array = Array.from(Array(N).keys()); const array = [...Array(10).keys()] 1 to N const array = [ ...Array(N).keys() ].map( i => i+1); const array = Array.from(Array(N), (_, i) => i+1); const array = Array.from({ length: N }, (_, i) => i+1);