프론트엔드/React

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

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

들어가면서 리액트를 사용하다 보면 이미지를 public 폴더 안에 둘지, src 폴더에 두어야 할지 고민이 되었다. 각각 방식이 어떤 차이가 있는지 알아보고 나의 상황에 알맞게 관리하고 사용해야겠단 생각이 들었다. public 폴더에 이미지 파일 관리 public 폴더에 이미지를 두게 되면 아래와 같은 특징이 있다. 이미지가 경량화 되거나 후처리 되지 않는다. 즉 빌드 시 웹팩에 의해 처리되지 않고 원본 그대로 빌드폴더에 추가된다. 아래 case1처럼 PUBLIC_URL 환경변수를 통해 접근해야한다. 라고 공식문서에는 나와있지만 case2,3 도 된다. return ; // case1 return ; // case2 return ; // case3 이미지가 잘못된 경우 컴파일 에러가 발생하지 않고 404..

들어가면서 "클린 코드란 무엇일까" 이 주제는 개발자라면 한번쯤은 해봤을 고민이라고 생각합니다. 갑자기 이 고민을 하게 된 이유는 실무에서 분명 보기엔 깔끔한 코드인데, 수정하기에는 어려운 코드들을 몇 차례 경험하면서입니다. 이때부터 '클린 코드가 뭘까?'라는 고민을 다시 하게 되었습니다. 동시에 '그동안 생각해온 클린 코드의 기준이 뭐였을까?' 되돌아보게 되었습니다. 그저 교과서 개념처럼 '다른 사람이 읽기 쉬운 코드'라고 생각해왔던 거 같습니다. 이는 클린 코드의 수많은 조건 중 하나일 뿐 전부가 아니었다는 걸 깨달았습니다. 클린 코드란 무엇인지 정답을 알고 싶었지만 정답은 존재하지 않았고 사람마다, 팀마다 기준이 조금씩 다를 수 있다는 걸 배웠습니다. 개인적으로는 토스에서 발표한 '실무에서 바로 쓰..