xterm.js 라이브러리란?

https://xtermjs.org/docs/

Documentation

위 문서는 xterm js 문서 페이지이긴 한데 읽기 너무 불편하게 만들어져 있다.

그래서 쪼금 정리하고자 한다. (다음에 볼 때 기억에 남을 수 있도록)

 

xterm.js란?

브라우저에서 터미널(콘솔)을 그대로 구현할 수 있게 해주는 JavaScript 라이브러리
"웹에서 진짜 터미널처럼 보이고 동작하는 UI를 만들어 주는 라이브러리"

이런 터미널 UI 화면을 웹에서 만들 수 있게 해주는 것

 

Why Use?

<input> 이나 <textarea>로는 절대 못만드는 것

커서 이동
줄 단위 렌더링
ANSI 색상 처리
실시간 출력 스트림
터미널 버퍼 관리

 

따라서 터미널 Emulator가 필요함! ( 컴퓨터나 전자기기에서 다른 기기(게스트)의 하드웨어 및 소프트웨어 동작을 모방하여, 원래 기기용 프로그램이나 게임을 현재의 다른 환경(호스트)에서 실행할 수 있게 해주는 프로그램 또는 장치 )

 

핵심 흐름

1. 화면에 터미널 생성

import { Terminal } from 'xterm';

const term = new Terminal();
term.open(document.getElementById('terminal'));

 

2. 서버에서 받은 데이터를 출력

term.write('Hello World\r\n');

 

3. 사용자가 입력한 키 받음

term.onData((data) => {
  console.log(data);
});

 

4. 전체 흐름

[사용자 키 입력]
        ↓
[xterm.js가 이벤트 감지]
        ↓
[onData 콜백 실행]
        ↓
[서버로 전송 (WebSocket)]
        ↓
[서버에서 명령어 처리]
        ↓
[결과 반환]
        ↓
[xterm.write()로 출력]

 

이 흐름을 더 자세히 이해하기 위해서는 아래 참조

https://gyumingomin.tistory.com/64

WebSocket과 xterm.js - 프로젝트로 이해

 

내부 구조 (조금 더 상세하게)

1. 입력 처리

• 키보드 이벤트 캡처
• ANSI escape 처리
  •  터미널(터미널 에뮬레이터)에서 텍스트의 색상, 글꼴 스타일(굵게, 밑줄), 커서 위치 등을 제어하기 위해 ESC 문자(ASCII 27)로 시작하는 특수 코드(시퀀스)를 삽입하여 출력 화면을 꾸미는 방식
• 버퍼에 반영

2. 출력 처리

• 문자열 -> 파싱
• ANSI 코드 해석 (색상, 커서 이동)
• 화면 버퍼 업데이트

3. 렌더링

• canvas 기반 렌더링 ( for 성능 최적화 )
• DOM이 아니라 내부 grid 사용

주요 기능들

1. ANSI 색상 지원 ( 터미널 색상 표현 가능 )

term.write('\x1b[31mRed Text\x1b[0m');

 

2. 커서 제어

• 이동
• 숨김/표시
• 위치 제어

3. 스크롤 버퍼

 

• 이전 출력 유지
• history 관리

4. Addon 시스템

import { FitAddon } from 'xterm-addon-fit';

 

대표 addon
FitAddon → 화면 크기 자동 맞춤
WebLinksAddon → URL 클릭
SearchAddon → 검색

<애드온 이름 주요 기능>

addon-fit	터미널 부모 요소의 크기에 맞춰 터미널 해상도(줄/칸)를 자동으로 조절
addon-webgl	Canvas 대신 WebGL을 사용하여 고성능 렌더링을 지원 (수천 줄의 텍스트도 매끄럽게 처리)
addon-search	터미널 내 텍스트 검색 기능을 추가
addon-serialize	현재 터미널의 화면 상태를 문자열이나 HTML로 저장(직렬화)
addon-unicode11	유니코드 11 표준에 맞게 문자 너비를 처리하여 이모지나 특수 문자가 깨지지 않게 도움

 

장단점⁉️

장점	단점
진짜 터미널 UX 제공	백엔드 필수
실시간 스트리밍	Learning Curve 존재
React와 잘 붙음	보안 고려 필요 (명령 실행)

 

정리

xterm.js는 "브라우저에서 터미널 UI를 구현하고, 입력과 출력을 서버와 연결해주는 터미널 에뮬레이터 라이브러리"