jitsi meet open source

12.20(수)
오늘부터 짓시 미트 분석 시작

• redux
• typescript
• class 컴포넌트
• constructor
• super
• bind
• this
• async await

이게뭔지..

export class AbstractApp<P extends IProps = IProps> extends BaseApp<P> {

/**
Navigates this {@code AbstractApp} to (i.e. Opens) a specific URL.

@param {Object|string} url - The URL to navigate this {@code AbstractApp}
to (i.e. The URL to open).
@protected
@returns {void}
*/

jsdoc주석인건 알겠는게
@param, @protected, @returns, @private, @abstract 이건 다 뭔지
/**

• Calculates the sum of two numbers.
• @param a {number} - The first number.
• @param b {number} - The second number.
• @returns {number} - The sum of the two numbers.
  */

function addNumbers(a, b) {
return a + b;
}
@protected : 자식 클래스에서만 접근 가능. 외부에서 직접 접근 불가.
@private : 해당클래스 내부에서만 접근 가능

@abstract : 상위 클래스에서 선언만 해주고, 하위 클래스에서 상속하며 정의를 해준다.
상위클래스에서 선언해줌으로써 하위클래스에서 반드시 상위클래스에서 선언한 추상 메서드를 정의해야함을 알 수 있고 안정된 코드를 만들 수 있게된다.(코드의 안정성과 일관성)

abstract class Animal {
    abstract makeSound(): void; // 하위클래스에서 이 추상메서드를 구체메서드로서 정의해줘야함. 여기선 그냥 선언만 한 상태.

    move(): void {
        console.log('Moving along...');
    }
}

class Dog extends Animal {
    makeSound() {
        console.log('Bark Bark!');
    }
}

class Cat extends Animal {
    makeSound() {
        console.log('Meow Meow!');
    }
}

const myDog = new Dog();
myDog.makeSound(); // 출력: Bark Bark!
myDog.move(); // 출력: Moving along...

const myCat = new Cat();
myCat.makeSound(); // 출력: Meow Meow!
myCat.move(); // 출력: Moving along...

@param : "함수"의 매개변수에 대한 정보를 제공하는 데 사용되는 JSDoc 태그.
@type : "클래스"의 속성(멤버 변수)에 대한 정보를 제공할 때 사용.

class Person {
/**

• @type {string}

• The name of the person.
  */
  name = "John Doe";

  /**

• Set the person's name.

• @param {string} newName - The new name for the person.
  */
  setName(newName) {
  this.name = newName;
  }

  /**

• Get the person's name.

• @returns {string}
  */
  getName() {
  return this.name;
  }
  }

jsdoc과 typescript를 같이 쓴다라..
jsdoc은 설명 + 변수타입 주석이고,
ts는 변수 타입 써주는건데
중복 되긴하네..

JSDoc types may be moved to TypeScript types.
.jsx에서는 JSDoc형식으로 주석을 사용하여 안에 @returns {void} 형식으로 타입을 지정하는게 맞다.

/**
 * A component generating all the global styles.
 *
 * @returns {void} ----- 이부분이 차이
 */
function GlobalStyles() {
    const { theme } = useStyles();

    return (
        <MUIGlobalStyles
            styles = {
                commonStyles(theme)
            } />
    );
}

export default GlobalStyles;

.tsx에서는 콜론으로 타입을 지정해준다.

/**
 * A component generating all the global styles.
 */
function GlobalStyles(): void { // ----- 이부분이 차이
    const { theme } = useStyles();

    return (
        <MUIGlobalStyles
            styles = {
                commonStyles(theme)
            } />
    );
}

export default GlobalStyles;

augment: 증강하다(상속하다)
@augments AbstractContainer
@augments 태그는 현재 클래스가 다른 클래스(AbstractContainer)를 상속.

@private
JSDoc 주석에서 사용되는 태그 중 하나
또는 클래스 멤버가 외부에서는 접근이 제한되어야 함을 나타냅니다.
모듈이나 클래스 내부에서만 사용되는 것을 명시하는 데 사용
외부에서 직접 접근해서는 안 된다는 것을 의미

@private는 외부에서의 접근을 "완전히 제한"
@protected는 외부에서는 제한하되, 상속 관계에서는 접근을 허용하는 데 사용됩니다.

reducer

connect

(_mapStateToProps)(JitsiThemeProvider);
connect 대신 해주는게 있는데..
useSelector, useDispatch로 connect를 대신할 수 있음.

• useSelector는 Redux 스토어의 특정 부분의 상태를 추출하는 데 사용되며
• useDispatch는 액션을 디스패치하는 데 사용됩니다.

combine (여러 reducer들을 합쳐줌)

import { combineReducers } from "redux";
import subscribersReducer from "./Subscribers/reducer";
import viewReducer from "./views/reducer";
import commnetsReducer from "./comments/reducer";

const rootReducer = combineReducers({
  views: viewReducer,
  subscribers: subscribersReducer,
  comments: commnetsReducer,
});

export default rootReducer;

interface

상속 가능.

reducer

this......!!!!

JSDoc types may be moved to TypeScript types.ts(80004)

open source에서는 audio,video를 가져올 때 navigator.webkitGetUserMedia를 사용,
야누스에선 navigator.mediaDevices.getUserMedia 사용.
webkitGetUserMedia : 웹킷 기반 버전. 웹킷은 사파리와 크롬 등의 브라우저에서 사용되는 렌더링 엔진. 웹킷 기반 브라우저에서만 작동하고 다른 브라우저에서는 작동하지 않음.
결론, 가능하면 getUserMedia API를 사용하는것이 좋음.브라우저 간 호환성을 최대화하고, 표준 웹 기술을 따르는 것이기 떄문.
(커뮤니티를 잘 활용해야겠구만.)

1.19(금)
내가 보고 있던 리액트, TS, redux 사용되고 있던 코드를 분석하고 있었는데
getUserMedia 같은게 없길래 어딨냐고 커뮤니티에 물어봤더니 다른 링크를 하나 주더이다.
그곳은 리액트는 일절 없고 getUserMedia가 있었고 즉슨, 라이브러리였다.
아마 audio, video 불러오는 라이브러리인것이다.
아래와 같은 답변을 들을 수 있었다.

jitsi-meet은 React를 사용하고 있는 프론트엔드 코드가 맞다.
redux, typescript 사용하고 있고 내가 시작하고 싶은 곳이 맞다. 이곳에서 UI를 다룬다.
lib-jitsi-meet은 라이브러리다. jitsi는 여기에 의존하고 있다. 미디어를 다루기 위해, jitsi 백엔드와 접촉하기 위해.
이러한 분리를 통해, UI로써 jitsi meet을 사용하지 않고도, jitsi 백엔드를 사용해서 화상회의 구축이 가능하다. 
jitsi meet 을 프론트엔드에서 로컬하게 build하고 싶다면, 이 링크를 참고해라 >> https://jitsi.github.io/handbook/docs/dev-guide/dev-guide-web-jitsi-meet/

만약 커스터마이징한 lib-jitsi-meet을 jitsi meet에서 사용하고 싶다면 이 링크에 답이 있다 >> https://community.jitsi.org/t/how-to-how-to-build-jitsi-meet-from-source-a-developers-guide/75422

Jitsi는 프론트엔드보다 더 많은 것을 다루고 있음을 명심하세요. 
전체 솔루션은 백엔드에서 다양한 구성 요소를 필요로 합니다.
이 링크를 참고하세요 >> https://jitsi.github.io/handbook/docs/architecture/
당신만의 백엔드를 deploy하라거면 이 링클르 참고하세요 >> https://jitsi.github.io/handbook/docs/devops-guide/devops-guide-quickstart/
행운을 빕니다.

package.json을 보면 "lib-jitsi-meet": "https://github.com/jitsi/lib-jitsi-meet/releases/download/v1727.0.0+bd98ecd0/lib-jitsi-meet.tgz",

이게 있음.