전체 글

오디오 시각화란 오디오 데이터를 시각화 하는 것 마이크를 사용했을 때 생기는 오디오 소스로부터 주파수나, 파형, 기타 데이터들을 활용해서 데이터 시각화를 하는 것이다. 오디오 시각화가 필요했던 이유 유저가 마이크를 사용할 때 자신의 목소리가 잘 녹음되고 있는지 인지시켜야함. 현 회사에서는 영어 교육 서비스를 제공하고 있는데, 유저가 스피킹 시험을 볼 때 마이크를 사용한다. 유저의 목소리가 작으면 녹음 퀄리티 저하로 이어지게 되는데, 문제는 마이크 녹음할 때 유저는 자신의 목소리가 작은지 인지하지 못한다. 그래서 마이크를 사용할 때 목소리 크기를 시각적으로 확인하는 장치가 필요했다. 즉 오디오 스트림 데이터를 시각화하여 유저는 목소리의 크기를 실시간으로 인지하면서 녹음할 수 있다. 이로써 녹음 품질을 개선..

동작원리 Next/image 컴포넌트는 최초 이미지 요청이 왔을 때, 이미지를 최적화한 후 캐싱합니다. 다시 말해 런타임 때 처음 요청이 들어오면 최적화된 이미지를 만들고 캐싱해두었다가 재사용합니다. 이미지 최적화 전후로 .next(dist)폴더의 변화 과정을 확인해 보았습니다. 예시 .next 폴더의 이미지 최적화 전후 비교 사진입니다. cache폴더 아래 images 폴더의 유무를 주목해야합니다. 왼쪽은 이미지 요청이 한번도 발생하지 않아, images폴더도 없고 최적화된 이미지도 없는 상태입니다. 오른쪽은 이미지 요청이 1회이상 발생해서 Next.JS가 이미지를 캐싱해둔 상태입니다. 이후 요청부터는 Next.JS는 images 폴더에 캐싱해둔 이미지를 재사용합니다. 로컬에서도 확인하는 방법은 아래와..

문제 Safari에서는 비동기 함수안에서 window.open 호출 시 팝업이 차단될 수 있다. 약간의 trick을 이용해 팝업을 열 수 있다. 예시 팝업 X // 비동기함수를 통해 URL을 받아와서 팝업을 열때 차단된다. const url = await fetchUrl(); window.open(url, 'popupName', "width=500, height=600") 팝업 X // 빈 url은 비동기 호출 전에 만들어야한다. const url = await fetchUrl(); const popup = window.open(undefined, 'popupName', "width=500, height=600") popup.location.href = url 팝업 O // 빈 url 생성 후 url 변..

문제 https://www.acmicpc.net/problem/15988 풀이 n의 경우의 수를 구하기 위해 n보다 작은 값들의 경우를 저장해놓고 n의 경우의 수를 구할 수 있다. -> dp 문제 1. 반복되는 패턴에서 점화식을 세운다. 2. 점화식을 구현 5까지 경우의 수를 나열해보면 반복되는 패턴을 찾았고 dp[n] = dp[n-1] + dp[n-2] + dp[n-3] 점화식을 찾을 수 있다. const input = require('fs').readFileSync('dev/stdin').toString().trim().split('\n').map(Number); const T = input.shift(); const dp = new Array(T+1); dp[1] = 1; dp[2] = 2; dp[..