전체 글
-
[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() 오디오 컨텍스트에서 모든 작업이 일어나기 때문이다. 그럼 오디오 컨텍스트를 가지고 어떻게 작업을 해야할까? 오디오 소스 생성 오디오를 가지고 작업을 하려면 당연히 작업할 오디..
-
[Chrome Extension] 크롬 확장 프로그램 Text HighlighterProject 2023. 6. 9. 16:39
만들게 된 계기 트위터 API 이슈로 특정 서비스가 중단되자 어느 사용자분이 대체제로 크롬 확장 프로그램으로 만든 것을 보고서 크롬 확장 프로그램은 어떻게 만들지? 라는 생각이 들어 찾아보게 되었다. 나도 한 번 만들어 보고 싶은 마음에 무엇을 만들까 생각을 하다가 내가 자주 사용할 것 같은 형광펜 기능을 만들게 되었다. 크롬 확장 프로그램을 개발하기 위해서는 어떤 구조와 흐름으로 구성되어 있는지 알아야 했다. Service Worker, Backgournd scripts - 브라우저가 백그라운드에서 실행하는 이벤트 기반의 스크립트이다. - ex) 처음 설치되거나 새 탭, 새 책갈피가 추가되고, 아이콘이 클릭 되는 등의 경우 이벤트를 수신하고 대응할 수 있다. Content scripts - 페이지에 코..
-
npm 에러 해결etc. 2023. 6. 5. 17:58
설치한 플러그인 중 하나가 의존성에 문제가 생겨 원래 프레임워크 버전을 업그레이드하여 해결을 하려 했다. 그런데 그 버전은 node 18.0.0 이상만 가능해서 배포 중 에러가 나고 node 버전을 또 다운받고 이것저것 해결해보는 과정 중에 버전을 또 다운그레이드했다가 이런 상황들이 반복되다 보니 npm 쪽에서 꼬이는 문제 상황이 발생하였다. 다양한 npm 에러만 하루종일 보고있으니 멘탈이 살짝식 깎이는 느낌... 아무튼 차분히 문제 상황에 대해 검색을 해보고 상황을 해결하였다. npm cache clean --force package-lock.json 삭제 node_modules 삭제 다시 npm install 하니까 정상적으로 작동이 되었다.
-
[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이 나오는 결과값에 대해서는 피하는 게 좋다고 생각하였다.
-
github actions으로 GCP app engine 배포하기etc. 2023. 4. 17. 18:09
github actions을 사용하여 GCP App Engine에 서버 배포를 자동화하려 한다. jobs: deploy: runs-on: ubuntu-latest steps: - name: Checkout Repository uses: actions/checkout@v3 with: submodules: "recursive" - name: Auth to GCP uses: "google-github-actions/auth@v1" with: credentials_json: ${{ secrets.GCE_SA_KEY }} - name: Deploy to App Engine uses: google-github-actions/deploy-appengine@v1 with: working_directory: server..