똑같은 삽질은 2번 하지 말자

보호되어 있는 글입니다.

개요ElevenLabs를 사용해 텍스트를 AI음성으로 변환하는 코드를 적어보았다. ElevenLabs란?AI를 활용하여 텍스트를 실제 사람의 목소리처럼 들리게 변환하는 TTS(Text To Speech) 소프트웨어를 제공한다.이를 통해 오디오북, 비디오 내레이션, 팟캐스트등 다양한 콘텐츠에서 고품질의 음성 출력을 생성할 수 있으며 또한 사용자는 자신의 목소리를 업로드하여 AI가 이를 학습하고 유사한 음성을 생성할 수 있는 음성 복제 기능도 제공한다.(참고로 무료로 10000자의 음성변환을 제공하니 간단하게 가입해서 테스트를 해볼 수 있다.) 이하의 가이드를 보면 이용할 수 있는 API나 모델, 음성 옵션등에 대한 문서가 잘 작성되어있어 참고가 되었다.https://elevenlabs.io/docs/pro..

개요성능문제 빠져서 디버그를 하면서 어느부분이 문제였는지를 파헤쳤던 경험을 적어보고자 한다. groupedFilterItems에서 같은 아이템들을 그룹으로 묶어서 묶인 아이템들은 filterItem의 items안에 보관updateSelectItem에서 새로운 filterItem를 생성할 때 filterItem안에 items가 들어간다.다시 groupedFilterItems가 실행되며 filterItems의 items의 하나의 item에도 items가 들어가 버린다. 이러면 filterItem을 추가할 때마다 필요없는 중첩된 데이트가 제곱수로 늘어나게 되어서 화면의 성능이 상당히 나빠졌었다. 해결 뒤 코드 결론복잡한 데이터를 다룰 때 필요없는 데이터를 양산하고 있지 않는지를 체크해보자

개요React로 개발을 하면서 예상치 못한 랜더링으로 인해 고생을 했던 케이스들을 모아보았다.  자식 컴포넌트에서 부모 컴포넌트에서 받은 상태를 변경하는 콜백 함수를 useEffect의 의존성으로 등록하고 실행할 때 밑의 코드를 보면 Parent의 handleUpdate가 실행되면 setNumber에 의해 부모 컴포넌트가 리렌더링되고 그로 인해 handleUpdate도 새롭게 재할당된다. 이 재할당으로 인해 자식 컴포넌트에서 onUpdate가 변경됨을 감지 다시 handleUpdate가 실행된다.import { useEffect, useState } from "react";type ChildProps = { onUpdate: () => void;};function Child({ onUpdate }: ..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

개요d.ts의 파일에 대해 문득 왜 굳이 .ts를 사용하지 않고 d.ts를 사용해서 타입을 정의하는거지? 라는 의문이 들어서 다양한 검색을 해보면서 학습했던 지식을 정리한다.*.ts를 안쓰고 *.d.ts를 사용하는 이유이미 자바스크립트로 코드를 타입스크립트를 쓰고 있는 프로젝트에서 사용해야 할때 *.d.ts는 타입 선언 전용으로 자바스크립트로 쓰여진 코드에 d.ts파일에 타입을 정의해두면 타입스크립트 환경에서 이를 인식해 자동완성과 타입체킹을 할 수 있게 된다.실행 환경에 이미 존재하는 객체나 전역 타입을 정의할 때브라우저의 window나 document등은 이미 존재하는 전역 객체이다. 이 객체들에 대한 타입만 정의하고 실제 코드를 추가할 필요가 없기 때문에 .d.ts 파일을 사용해 타입 정보만 정의한..

개요이하의 책을 읽으면서 얻은 지식을 정리하고자 한다. 디자인 패턴 소개패턴이란?검증끝: 과거부터 이어져온 소프트웨어의 개발의 특정 문제를 해결하기 위해 오랜 시간 동안 검증된 효과적인 방법재사용성: 사용자의 요구에 맞춰 적용할 수 있으므로 재사용성이 뛰어나다가독성: 패턴은 정해진 구조와 공통표현을 사용하므로 알아보기 쉽다.패턴의 이점사소한 실수로 인한 큰 문제를 방지반복을 피할 수 있다.공통된 어휘를 사용함으로 의사소통이 원활해진다.리액트에서의 패턴의 예공급자 패턴(Provider Pattern)도 하나의 디자인 패턴인데 리액트에서는 Context API가 이에 해당된다. 페이지 컴포넌트에서 아주 작은 컴포넌트까지 데이터를 전달할 때 중간에 거쳐야 할 컴포넌트가 많아지면 Props Drilling을 해..

보호되어 있는 글입니다.

개요이번건은 React와는 거의 관련이 없고 NextJS에서 env를 다룰때 생긴 문제에 대해 기록하고자 한다. 문제process.env[변수이름]과 같이 env의 요소에 동적으로 접근하려할 때 서버사이드의 동작에서는 문제가 없지만 클라이언트 사이드에서는 접근이 안되는 현상 예를 들면 const key = 'NEXT_PUBLIC_SAMPLE';console.log(process.env.NEXT_PUBLIC_SAMPLE);console.log(process.env['NEXT_PUBLIC_SAMPLE']);console.log(process.env[key]);console.log(process.env);// Server Side Outputsomevaluesomevaluesomevalue{ ... } // ..