개발/개념

WebRTC란 무엇이며 어떤 과정을 갖는가?

WebRTC라는 개념이 있다. WebRTC는 무엇을 위한 기술이며 어떤 과정을 거치게 될까? WebRTC란? Web Real-Time Communication. 웹 애플리케이션과 사이트가 중간자 없이 브라우저 간에 오디오나 영상 미디어를 포착하고 마음대로 스트림할 뿐 아니라, 임의의 데이터도 교환할 수 있도록 하는 기술 WebRTC를 구성하는 일련의 표준들은 플라그인이나 제 3자 소프트웨어 설치 없이 종단 간 데이터 공유와 화상 회의를 가능하게 한다. 쉽게 생각해서 P2P 실시간 커뮤니케이션이 가능하게 해주는 기술이다. WebRTC를 사용하면 카메라, 마이크를 넘어 고급 영상 통화 애플리케이션 및 화면 공유 등에도 활용 가능하다. WebRTC의 과정 WebRTC를 사용하기 위해서는 어떤 과정이 필요할까?..

Vite는 왜 빠를까?

일반적으로 Webpack보다 Vite가 더 빠르다는 글을 볼 수 있다. 왜 Vite가 Webpack보다 빠르다는 것일까? 모듈 개발을 하는 과정에서 어플리케이션의 크기가 커지면 언젠가 파일을 분리해야 할 것이다. 이때 분리되는 파일 각각을 '모듈(module)'이라 부른다. 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된다. 하지만 JS의 모듈 시스템인 ESM은 2015년 ES6가 도입되며 공직적으로 추가되었다. ESM을 사용하면 import와 export 문법을 사용하여 서로 다른 모듈에서 변수나 함수 등을 쉽게 불러오거나 내보낼 수 있다. 브라우저에서 ESM을 지원하기 전까지는 JS의 모듈화를 네이티브 레벨에서 진행할 수 없었다. 여기서 "네이티브 레벨"이라는 것은 외부의 다른..

[객체지향] SOLID 예제(5) - 인터페이스 분리의 원칙(ISP)

interface IPerson { wakeUp(): void; bathroomActivity(): void; } class Person implements IPerson { private bathroom: IBathroom; constructor(bathroom: IBathroom) { this.bathroom = bathroom; } wakeUp() { console.log('아침에 일어난다.'); } bathroomActivity() { this.bathroom.goToBathroom(); this.bathroom.washFace(); this.bathroom.brushTeeth(); this.bathroom.washHair(); this.bathroom.dryOff(); this.bathroom...

[객체지향] SOLID 예제(4) - 리스코프 치환의 원칙(LSP)

interface IPerson { wakeUp(): void; bathroomActivity(): void; } class Person implements IPerson { private bathroom: IBathroom; constructor(bathroom: IBathroom) { this.bathroom = bathroom; } wakeUp() { console.log('아침에 일어난다.'); } bathroomActivity() { this.bathroom.goToBathroom(); this.bathroom.washFace(); this.bathroom.brushTeeth(); this.bathroom.washHair(); this.bathroom.dryOff(); this.bathroom...