미고렝 코딩

AI와 통화기능을 구현하기 위해 다음과 같은 스텝들이 필요했다.

1. 나의 목소리를 텍스트로 변환.

2. 변환된 텍스트를 AI프롬프트에 입력 후 스트림 형식의 텍스트 데이터 받기.

3. 스트림 형식의 텍스트 데이터를 음성으로 변환 후 스트림 형식으로 클라이언트로 전달.

4. audio/mpeg 형식의 파일을 응답받은 클라이언트는 플레이 가능 즉시 재생.

5. 유저로 하여금 심심하지 않게 모든 오디오에 대해 비주얼라이져를 통해 소리를 시각적으로 표현.

각 스텝마다 문제점들이 발생했는데 이 문제점들을 어떻게 해결했는지 정리해보겠다.

1. 나의 목소리를 텍스트로 변환.

이부분은 web api에서 제공하는 SpeechRecognition 객체를 이용하여 구현하였다. 처음에는 매우 동작이 잘 되어 안심을 했지만, 모바일에서는 잘 되지 않는 문제가 발생하였는데, 이것은 나중에 비주얼라이저와 같이 실행할 경우에 안되는것을 알아냈다. 또한 특정 모바일에서 인식 간격이 너무 짧아 말을 천천히하면 중간에 speechend 리스터가 호출되어 버려서 프롬프트가 짤리는 현상이 발생했다. 이 문제는 추후에 버튼을 추가해 버튼을 누르기 전까지는 계속 인식을 하도록 변경하는 방향으로 했다. 당장 AI를 손 볼 시간은 없기 때문에..

2. 변환된 텍스트를 AI프롬프트에 입력 후 스트림 형식의 텍스트 데이터 받기. / 3. 스트림 형식의 텍스트 데이터를 음성으로 변환 후 스트림 형식으로 클라이언트로 전달

스트림 형식의 텍스트 데이터는 기존에는 라이브러리를 사용해서 처리하고 있었다. 하지만 라이브러리에서 토큰 마다 이벤트 함수가 호출되기는 하는데, 이것을 바로 바로 음성으로 변환을 해버리면 단어가 짤리는 경우도 있고, 무엇보다 요청을 너무 많이 해버리게 된다. 따라서 이걸 문장 단위로 짤라서 음성 변환 요청을 하려고 시도를 했는데, 구조적으로 라이브러리에서 제공하는 토큰 콜백함수만으로 이를 구현하기가 매우 힘들었다. 왜냐면 비동기적으로 스트림형태의 데이터를 받고 있는데 이를 문장단위로 짜른 변수를 음성으로 변환하고, 또 음성으로 변환되는 스트림형태의 오디오 데이터를 클라이언트에게 순차적으로 보내주어야 했기 때문이다. 이를 해결하기 위해 결국 ReadableStream의 pipeThrough 메서드를 사용해야 한다는 것을 깨달았고, 결국 라이브러리를 분석하여 스트림형태의 데이터를 텍스트로 변환하는 부분만 추출하여 3개의 트랜스포머를 만들어서 순차적으로 텍스트 변환, 문장 생성, 문장 음성 변환 단계를 거친 후 클라이언트에게 성공적으로 데이터를 전달 해줄 수 있었다.

4. audio/mpeg 형식의 파일을 응답받은 클라이언트는 플레이 가능 즉시 재생. / 5. 유저로 하여금 심심하지 않게 모든 오디오에 대해 비주얼라이져를 통해 소리를 시각적으로 표현.

이부분은 자바스크립트 객체인 Audio객체를 통해 손쉽게 구현할 수 있었다. 해당 객체가 URL을 통해 audio 형식의 데이터를 받으면 자동으로 실시간 스트리밍 기능을 제공하기 때문에 큰 어려움은 없었다. 문제는 비주얼라이저였는데, 처음 사용했던 라이브러리는 나의 마이크로 입력되는 소리는 손쉽게 비주얼라이징 했지만, 서버로 부터 응답받은 오디오를 비주얼라이징 객체에 넘겨주려고했는데 Audio 객체의 play 메서드와 충돌이 일어났다. 결국 해결방법을 찾지 못한 채 다른 라이브러리인 audiomotion-analyzer를 사용해보았는데, 일단 데스크톱에서는 매우 잘 동작했다. 하지만 모바일에서는 SpeechRecognition과 비주얼라이저를 같이 사용하면 작동을 안하는 현상이 있어서, 모바일 기기에서는 마이크 입력할 때는 비주얼라이저를 꺼주었다. 아이폰에서는 잘 동작을 했지만 안드로이드에서만 이러한 현상이 나타났는데, 이는 라이브러리가 어떻게 동작하는지와 안드로이드 환경의 SpeechRecognition이 동작하는 원리를 알아야 할거 같아서 일단 미래의 내가 해결하기로 했다..

이번 개발을 통해 stream형태의 데이터를 어떻게 다룰지 감을 잡은 거 같다.

ReadableStream은 fetch함수를 실행하여 얻은 response 객체의 body의 타입으로, fs 모듈에서 제공하는 클래스이며 파일을 읽고 쓰는데에 적합하다. Readable 클래스는 파일을 읽고 쓰는 필요가 없을 경우에 사용하며 메모리 위에서만 존재하고 stream 모듈에서 제공하는 클래스이다. 

nodejs 환경에서 다른 서버로 부터 받은 응답을 바로 나의 클라이언트에게 전달 해주는 메서드인 pipe를 활용하기 위해, ReadableStream객체의 getReader 메서드를 통해 데이터(버퍼)를 추출해내서 Readable객체에 push를 해줘야 했다.

fetch('https://example.com', {
	method: 'GET',
	headers: {
		'Content-Type': 'application/json',
	},
})
	.then((response) => {
		console.log('response: ', response);
		if (!response.ok) throw response.body;
		return response.body;
	})
	.then((body) => {
		if (!body) return null;
		const reader = body.getReader();
		const stream = new Readable({
			async read(this) {
				const { value, done } = await reader.read();
				if (done) {
					this.push(null);
				}
				this.push(value);
			},
		});
		//another way
		// while(true){
		// 	const {done, value} = await reader.read()
		// 	if(done){
		// 		stream.push(null)
		// 		break;
		// 	}
		// 	stream.push(value)
		// }
		stream.on('data', (chunk) => {
			console.log('on data chunk: ', chunk);
		});
		stream.pipe(res);
	})
	.catch((err) => {
		console.log('err: ', err);
	});

참고:
https://developer.mozilla.org/en-US/docs/Web/API/ReadableStreamBYOBReader/read

https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream/getReader

https://developer.mozilla.org/en-US/docs/Web/API/WritableStream/getWriter

https://stackoverflow.com/questions/67376362/what-is-the-difference-between-createreadstream-and-readable-class

https://web.dev/articles/streams

SSH 연결 중에 나타난 "no matching host key type found" 에러는 서버가 제공하는 호스트 키 유형과 클라이언트(여기서는 맥북)가 지원하는 키 유형이 일치하지 않을 때 발생합니다. 최근 SSH 프로토콜에서는 보안이 강화되면서 일부 구형 키 유형(예: `ssh-rsa`)이 기본적으로 지원되지 않을 수 있습니다.

이 문제를 해결하기 위해 SSH 클라이언트 설정에서 `ssh-rsa` 키 유형을 명시적으로 허용하는 방법을 시도할 수 있습니다. 맥북에서는 다음 단계를 따라 설정할 수 있습니다:

1. 터미널을 열고 SSH 설정 파일을 편집: Terminal을 열고 아래 명령어로 SSH 설정 파일을 편집합니다.

sudo nano /etc/ssh/ssh_config

2. 호스트 키 알고리즘 추가: 파일의 적당한 위치에 다음 두 줄을 추가합니다.

HostkeyAlgorithms +ssh-rsa
PubkeyAcceptedKeyTypes +ssh-rsa

이렇게 하면 `ssh-rsa` 키 유형을 사용할 수 있습니다.

3. **파일 저장 및 종료**: 변경 사항을 저장하고 nano 편집기를 종료합니다(`Ctrl+O`, `Enter`, `Ctrl+X`).

4. **SSH 다시 시도**: 이제 다시 SSH로 연결을 시도해보세요.

ssh dlghwns0314@dlghwns0314.gabia.io

이 설정 변경 후에도 문제가 지속된다면, 서버 관리자에게 서버의 SSH 설정을 업데이트하여 보다 현대적인 키 유형을 지원하도록 요청하는 것도 고려할 수 있습니다.

자바스크립트를 이용해 실수의 연산을 하다보면 소수점이 이상하게 나타나는 경우가 있다. 컴퓨터는 기본적으로 이진수를 이용하기 때문에 실수를 다루는 방식은 컴퓨팅 언어마다 다르다. Javascript는 모든 숫자를 IEEE 754 표준을 따르는 배정밀도 64 비트 부동 소수점 형식으로 표현하며, 이 형식은 실수를 근사치로 저장한다.

따라서 0.6 / 0.2 와 같은 연산을 실행 해보면 3이 아닌 2.999999999996 와 같은 예측에서 벗어난 값이 나온다. 이를 해결하기 위해 실수를 정수로 바꾼 후에 연산을 하고 다시 원래 실수로 돌려놓는 방법을 사용한다.

먼저 실수들 중에서 가장 소수점 자리가 큰 실수를 알아낸다.

실수를 정수로 바꾸기 위해 지수를 구한다.

이렇게 정수로 바꾼다음 연산을 진행한 뒤 지수를 다시 나눠주면 원하는 값을 구할 수 있다.

바벨(babel)이란?

바벨은 입력과 출력이 모두 자바스크립트 코드인 컴파일러다. 이는 보통의 컴파일러가 고수준의 언어를 저수준의 언어로 변환하는 것과 비교된다.

초기의 바벨은 ES6 코드를 ES5코드로 변환해주는 컴파일러였다. 현재는 바벨을 이용해서 리액트의 JSX문법, 타입스크립트와 같은 정적 타입 언어, 코드 압축, 제안(proposal)단계에 있는 문법 등을 사용할 수 있다.

폴리필(polyfill)이란?

폴리필이란 브라우저가 지원하지 않는 자바스크립트 코드를 지원 가능하도록 변환한 코드를 뜻한다. 하위 브라우저가 지원하는 자바스크립트 코드를 사용해 자바스크립트의 최신 기능을 똑같이 구현하는 방식이다.

바벨과 폴리필

자바스크립트의 최신 기능을 모두 사용하면서 오래된 브라우저를 지원하려면 바벨로 코드 문법을 변환하는 동시에 폴리필도 사용해야 한다. 폴리필은 런타임에 기능을 주입하는 것을 말한다. 런타임에 기능이 존재하는지 검사해서 기능이 없는 경우에만 주입한다. 바벨을 사용하면 최신 자바스크립트 표준에 추가된 모든 기능을 사용할 수 있다고 오해하기 쉽다. 바벨을 사용하더라도 폴리필에 대한 설정은 별도로 해야한다.

한가지 예로 ES8에 추가된 String.padStart 메서드는 폴리필을 이용해서 추가할 수 있다. 반면에 async await는 폴리필로 추가할 수 없으며, 컴파일 타임에 코드 변환을 해야한다.

core-js 모듈의 폴리필 사용하기

core-js는 바벨에서 폴리필을 위해 공식적으로 지원하는 패키지다. 가장 간단한 사용법은 core-js모듈을 자바스크립트 코드로 불러오는 것이다.

import 'core-js';
//core-js 모듈을 가져오면 해당 모듈의 모든 폴리필이 포함된다. 
//따라서 낮은 버전의 브라우저에서도 프로미스, Object.values, 배열의 includes메서드를 사용할 수 있다.
const p = Promise.resolve(10);
const obj = {
    a: 10,
    b: 20,
    c: 30,
}
const arr=  Object.values(obj);
const exist = arr.includes(20);

import 'core-js/features/promise';
import 'core-js/features/object/values';
import 'core-js/features/array/includes';
//core-js로 부터 직접 필요한 폴리필만 가져오면 번들 파일의 크기를 줄일 수 있다.
const p = Promise.resolve(10);
const obj = {
     a: 10,
     b: 20,
     c: 30,
};
const arr= Object.values(obj);
const exist = arr.includes(20);

@babel/preset-env 프리셋 이용하기

@babel/preset-env 프리셋은 실행환경에 대한 정보를 설정해 주면 자동으로 필요한 기능을 주입해준다. 예를 들어, babel, config.js 파일에 다음 내용을 입력하면 특정 버전의 브라우저를 위한 플러그인 만 포함된다.

const presets= [
   [
      '@babel/preset-env',
      {
         targets: '> 0.25%, not dead',
         //targets 속성으로 지원하는 브라우저 정보를 입력한다.
         //여기서는 시장 점유율이 0.25% 이상이고 업데이트가 종료되지 않은 브라우저를 입력했다.
         //브라우저는 browserlist라는 패키지의 문법을 사용한다.
      },
   ]
];

module.exports= {presets};

클로저는 자바스크립트의 고유한 개념이 아니라, 여러 함수형 프로그래밍 언어에서 공통적으로 발견되는 특성이다. 

한마디로 정리하자면 자신이 선언될 당시의 환경을 기억하는 함수이다.

// 클로저를 만드는 형태 1. - 중첩함수
function outerFn() {
  let x = 10;
  return function innerFn(y) { // innerFn 함수는 클로저다.
    return x = x + y;
  }
}
let a = outerFn(); // 외부함수 호출은 한번만. 이제 a 변수는 innerFn 함수를 참조한다.
a(5); // 15;
a(5); // 20;
a(5); // 25;

// 클로저를 만드는 형태 2. - 전역에 선언한 변수를 박스 안에서 함수로 정의하고 전역에서 호출
let globalFunc;
{
  let x = 10;
  globalFunc = function(y) { // globalFunc 함수는 클로저다.
    return x = x + y;
  }
}
globalFunc(5); // 15;
globalFunc(5); // 20;
globalFunc(5); // 25;

1. 클로저는 내부함수가 외부함수의 맥락(context)에 접근 할 수 있는 것을 가리킨다.

2. 외부로 전달이 항상  return을 의미하는 것은 아니다.

3. 클로저는 특정 상황에서 발생하는 "현상"이고 함수는 이 현상이 나타나기 위한 "조건"에 해당한다.

장점

1. 데이터를 보전할 수 있다.

클로저 함수는 외부 함수의 실행이 끝나더라도 외부 함수 내 변수를 사용 할 수 있다.

클로저는 이처럼 특정 데이터를 스코프 안에 가두어둔 채로 계속 사용할 수 있게 하는 폐쇄성을 갖는다.

2. 정보의 접근 제한 (캡슐화)

'클로저 모듈 패턴'을 사용해 객체에 담아 여러개의 함수를 리턴하도록 만든다.

이러한 정보의 접근을 제한하는 것을 캡슐화라고 한다.

3. 모듈화에 유리하다.

클로저 함수를 각각의 변수에 할당하면 각자 독립적으로 값을 사용하고 보존할 수 있다.

이와 같이 함수의 재사용성을 극대화, 함수 하나를 독립적인 부품의 형태로 분리하는 것을 모듈화라고 한다.

클로저를 통해 데이터와 메소드를 묶어다닐 수 있기에 클로저는 모듈화에 유리하다.

1. 변수 선언 방식

var는 한번 선언한 변수일지라도 중복해서 선언을 할 수 있는 특징이 있다.

var a = 1;
console.log(a)//1
var a = 2;
console.log(a)//2

위와 같이 한번 선언을 한 a 변수 일지라도 var태그를 사용하여 선언 하면 다시 선언을 할 수 있다. 이는 간단한 테스트에는 편리할 수 있으나 코드량이 많아진다면 어디에서 사용했었는지 파악하기가 어렵고 기존의 값이 바뀌어 버그가 발생할 수 있다.

이와 달리 let과 const는 재선언이 불가능하다. 하지만 이 둘에도 차이점이 있는데, 그것은 immutable여부이다.

let은 변수에 재할당이 가능하고, const는 불가능하다.

2. 호이스팅

호이스팅(Hoisting)이란, var 선언문이나 function 선언문 등을 해당 스코프의 선두로 옮긴 것처럼 동작하는 특성을 말한다.

자바스크립트는 ES6에서 도입된 let, const를 포함하여 모든 선언(var, let, const function function*, class)을 호이스팅한다.

하지만, var 로 선언된 변수와 달리 let로 선언된 변수를 선언문 이전에 참조하면 참조 에러(ReferenceError)가 발생한다.

console.log(foo);//undefined
var foo;

console.log(bar); //Error: Uncaught ReferenceError: bar is not defined
let bar;

이는 let 로 선언된 변수는 스코프의 시작에서 변수의 선언까지 일시적 사각지대(Temporal Dead Zone; TDZ)에 빠지기 때문이다.

참고로 변수는 선언 단계 > 초기화 단계 > 할당 단계에 걸쳐 생성되는데,

var 으로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어진다. 하지만 let으로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행된다.

//스코프의 선두에서 선언 단계와 초기화 단계가 실행된다.
//따라서 변수 선언문 이전에 변수를 참조할 수 있다.

console.log(foo);

var foo;
console.log(foo);
foo = 1; //할당문에서 할당 단계가 실행된다.
console.log(foo); //1

//스코프의 선두에서 선언단계가 실행된다.
//아직 변수가 초기화(메모리 공간 확보와 undefined로 초기화)되지 않았다.
//따라서 변수 선언문 이전에 변수를 참조할 수 없다.

console.log(foo); //ReferenceError: foo is not defined

let foo; //변수 선언문에서 초기화 단계가 실행된다
console.log(foo); //undefined

foo = 1; //할당문에서 할당 단계가 실행된다.
console.log(foo); //1

3. 정리

변수 선언에는 기본적으로 const를 사용하고, 재할당이 필요한 경우에 한정해 let을 사용하는것이 좋다.

그리고 객체를 재할당하는 경우는 생각보다 흔하지 않다. const를 사용하면 의도치 않은 재할당을 방지해 주기 때문에 보다 안전하다.

npm i 를 통해 기본적으로 깔아야 하는 것들을 깔아준다.

@babel/core: 바벨의 기본적인 것들

@babel/preset-env: 브라우저 환경에 맞게 예전 문법을 지원

@babel/preset-react: jsx 지원

babel-loader: 바벨과 웹팩을 연결