주정뱅이 개발자

Save screen as PDF

1. 서론단순하게 화면을 PDF 파일로 저장하는 코드이다.다만 너무 여러 글들에서 제대로 사이즈를 체크하지 않은채 화면을 PDF로 저장하게 해서, 화면이 잘리거나 중복으로 겹치는 부분들이 있어서 수정한 코드를 올리기로 했다. 준비물1. html2canvas2. jspdf 2. 코드먼저 의존성 추가를 해준다.npm i html2canvasnpm i jspdf  다음으로 각자 화면마다 달라지는 메소드 일 것이다.화면의 CSS가 화면을 가져오는데 방해가되는 경우가 있다.그럴경우 먼저 방해가 되는 부분을 제거하고 다시 복구해주는 메소드이다.const prepareModalForCapture = (modalElement : any) => { modalElement.parentNode.classList..

WebRDP

1. 서론전에 Linux 서버에 WebTerminal로 원격 작업을 할 수 있게 개발을 했는데,서버 종류에 Window 서버가 추가되었다.그래서 Window 서버를 GUI를 사용하여 원격으로 작업할 수 있는 방법을 찾아보다 RDP(Remot Desktop Protocol)을 알게되어, 이를 구현하게 되었다. 점진적으로 TypeScript로 바꿀 예정이라, 차후에 변환이 완료되면 본글을 수정하도록 하겠다. [개발 환경]Front : NextJS, TypeScriptBackEnd : NestJS, TypeScript+ RDP로 접속할 Window 서버 하나 2. Front-end먼저 서버와 통신하기 위해 socket.io-client를 설치한다.npm i socket.io-client 그리고 프론트 코드의 ..

Web Terminal Ssh

1. 서론저번 글에서 프로토 타입으로 대략 어떻게 웹터미널을 개발할지 구상이 끝나서 실제 운영 서버에 적용하게 되었다.이번 글의 코드는 저번 프로토 타입에서 신경쓰지 않은 부분까지 보완해서 작성하였다.실제 운영서버라 개발 환경이 다르다는 점만 유의하면 될 것 같다. + linux의 복붙기능+ 브라우저 드래그시 화면 맞춤 (흰색 바탕이 노출되는 현상 해결)+ 브라우저 크기에 맞게 ssh의 크기 조정 (글을 길게 쓰면 위로 덮어 씌워지는 현상 해결)+ 문자 깨짐 현상으로 인코딩 변경 [개발 환경]Front : NextJS, TypeScriptBackend : NestJS, TypeScript+ SSH 로 연결할 서버 하나 [디렉토리 구조]src |- app |     |- web-ssh |          ..

Set Global Variable When Server Started

1. NestJS Lifecycle?NestJS의 Lifecycle을 먼저 확인해 보도록 하겠다. Lifecycle에 나온 메소드들을 살펴보자. (공식 문서의 내용)Lifecycle hook methodLifecycle event triggering the hook method callonModuleInit()Called once the host module's dependencies have been resolved.호스트 모듈의 종속성이 해결되면 호출됩니다. onApplicationBootstrap()Called once all modules have been initialized, but before listening for connections.모든 모듈이 초기화되면 연결을 수신 대기하기 전에 호..

Self is not defined (NextJS & Xterm)

1. Error : Self is not definedReact에서 테스트할 때는 문제가 없었지만, NextJS에서는 에러가 발생하였다.NextJS가 아직 그려지지 않은 페이지에 컴포넌트를 랜더링하려 하기에 발생한다.하여 dynamic import 구문으로 Xterm에 지연 로드를 사용하면 해결할 수 있다. 2. Dynamic Import?지연 로드.모듈을 빌드타임이 아닌 런타임에 불러오도록 한다.번들 파일을 분리하고 퍼포먼스 향상을 기대할 수 있다. 3. Solution Code코드 수정을 한 파일은 총 두개이다. page.tsximport dynamic from "next/dynamic";const WebTerminal = dynamic( async() => (await import("@/con..

WebTerminal - Prototype

1. Web Terminal 이란?보통 Putty 혹은 MovaXTerm으로 SSH 연결을 할 것이다.특정 상황에서는 웹에서 SSH 연결이 된 것 처럼 보여줘야 할 때,웹상에서 터미널을 사용하게 해주는 것을 의미한다.라이브러리들이 잘 되어있어서 간단하다. 추가적으로 리눅스 환경과 똑같이 드래그시 복사가 되고, 우클릭시 붙여넣기가 되게 추가하였다. 이번 포스팅에서는 웹터미널이 어떻게 작동하는지 정도만 확인하는 용도여서 동시에 여러사람이 붙거나 이런 경우에는 제대로 동작하지 않을것이다.다음 포스팅을 작성하게되면 그때 실제로 서버에 적용한 코드를 포스팅하도록 하겠다. [개발 환경]Front : React, TypeScriptBackend : NodeJS, Express, TypeScript+ SSH 로 연결할..

WebRTC - SFU, Mediasoup

1. 설명일단 WebRTC에 대해 알지 못한다면 아래 글을 참조하도록 하자.  WebRTC1.WebRTC 란?Web Real-Time Communications웹 기반의 실시간 음성, 영상 통신 기술.별도의 플러그인이나 소프트웨어 없이 통신할 수 있도록 설계된 API.브라우저 간 실시간 미디어 통신에 최적화된 기술.  2pinokio5600.tistory.com 이전까지 포스팅했던 SocketIO의 경우 지연 이슈로 포기하게 되었다.이에 WebRTC의 SFU 방식으로 구현하는 방법을 다시 분석하기로 하였다. 2. 왜 SFU 인가?WebRTC의 세가지 방법 중에 화면공유와 시청자들의 공동 작업이 메인 기능인 프로젝트에서 Mesh 방법은 클라이언트가 많아질수록 클라이언트들의 부담이 커지는 이슈로 소규모 통신..

4. Screen Sharing - Advancement

1. 설명전 글까지 해서 필요한 기능들은 구현이 끝났다. 이전 글을 안봤다면 아래 링크 참조.  1. Screen Sharing - SocketIO Setting1. 설명화면 공유 기술이 필요했다.처음에는 WebRTC를 사용하려 했지만, UDP를 사용하는 WebRTC의 특성상 TURN Server가 필요했다.이 프로젝트에서는 TURN Server를 제공할 여유가 없었다.그래서 TURN Server가pinokio5600.tistory.com 2.Screen Sharing - Sharing1. 설명전 글에서 기본적인 Socket 통신이 완료되었다면, 이제 화면을 공유해보자.혹시 Socket 통신을 아직 구성하지 않았다면 아래 글을 참조하면 된다.  1. Screen Sharing - SocketIO Sett..

3.Screen Sharing - Mouse Event

1. 설명저번 글까지 화면 공유 기능을 완료했다.이번 글에서는 현재 탭을 공유하는 기능과 시청자의 마우스 이벤트를 공유자의 화면에서 발생시킬 수 있도록 개발하겠다.참고로 mouseMove 이벤트의 경우 많은 트래픽을 발생시키고, click 이벤트의 경우 좌표 조정이 필요하지만.아직 테스트 단계라 두 가지 이슈가 있다는 정도만 파악하고 기능 구현을 먼저 했다. 현재 시청자의 화면 속도가 느리고 이런 저런 이슈들이 있을 것이다.그 문제는 다음 글에서 해결할 것이니 너무 걱정하지 말자.1, 2, 3번 글은 단순히 `이런 기능이 이렇게 구현이 가능하다` 를 설명하는 글일 뿐이다. 2. 공유자는 화면을 공유하고 마우스 이벤트를 받을 준비remoteCusor라는 div를 만들어서 시청자의 마우스 커서를 표현해줄 것..

2.Screen Sharing - Sharing

1. 설명전 글에서 기본적인 Socket 통신이 완료되었다면, 이제 화면을 공유해보자.혹시 Socket 통신을 아직 구성하지 않았다면 아래 글을 참조하면 된다.  1. Screen Sharing - SocketIO Setting1. 설명화면 공유 기술이 필요했다.처음에는 WebRTC를 사용하려 했지만, UDP를 사용하는 WebRTC의 특성상 TURN Server가 필요했다.이 프로젝트에서는 TURN Server를 제공할 여유가 없었다.그래서 TURN Server가pinokio5600.tistory.com 먼저 개발을 진행하면서 있던던 이슈들을 먼저 다루어 보겠다.이슈 1. 화면을 공유하는 방식화면을 공유하는 방법은 두가지 정도로 크게 분류가 되었다.스크린샷을 찍어 계속 보낸다.비디오를 찍어 보낸다.필자는..

1. Screen Sharing - SocketIO Setting

1. 설명화면 공유 기술이 필요했다.처음에는 WebRTC를 사용하려 했지만, UDP를 사용하는 WebRTC의 특성상 TURN Server가 필요했다.이 프로젝트에서는 TURN Server를 제공할 여유가 없었다.그래서 TURN Server가 필요없는 TCP 통신으로 구현을 구상하였다.TCP 통신을 사용하는 Websocket과 Socket.io를 고민하다가 Socket.io로 개발하기로 했다.이에 이 글에서는 WebRTC 없이 화면을 공유하는 방법에 대해 포스팅하려 한다.이 글은 단순히 Socket 통신만을 구현한 코드이고, 다음 글에서 화면 공유기능이 추가된 코드를 포스팅하겠다.이제 테스트까지 끝마친 코드를 기준으로 설명한다. 서버는 NestJS를 사용했다. 2. Socket.io Setting먼저 가장..

WebRTC

1.WebRTC 란?Web Real-Time Communications웹 기반의 실시간 음성, 영상 통신 기술.별도의 플러그인이나 소프트웨어 없이 통신할 수 있도록 설계된 API.브라우저 간 실시간 미디어 통신에 최적화된 기술.  2.WebRTC 종류  1. MeshP2P 방식 : 서버 없이 브라우저 간의 직접적인 연결을 가능하게 해준다.중앙 서버의 부하가 적고, 지연 시간이 가장 적다.참여자가 많아질수록 클라이언트의 부담이 커진다.UDP ( User Datagram Protocol )로 동작하기 때문에 NAT ( Network Address Translation )을 거치게 된다면, 상대방의 주소를 정확히 알 수 없다. 이에따라 STUN & TURN Sever가 필요하다.(모든 클라이언트가 직접 연결되..