Xterm.js 를 이용하여 웹 사이트에 fake terminal 을 구현합니다.
데모를 확인해보세요. DEMO
한글 입력이 가능한 terminal 데모도 확인해보세요.DEMO
먼저, 모듈을 설치해야 합니다. npm을 통해서만 제공 되므로 다음을 실행하여 xterm.js를 해당 모듈을 종속성으로 추가해야 합니다.
npm install xterm루트에 index.html 파일을 만들고 다음과 같이 코딩합니다.
/index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="node_modules/xterm/css/xterm.css" />
<script src="node_modules/xterm/lib/xterm.js"></script>
</head>
<body>
<div id="terminal"></div>
<script>
var term = new Terminal();
term.open(document.getElementById("terminal"));
term.write("Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ");
</script>
</body>
</html>브라우저를 통해 index.html 파일을 실행하면 다음과 같은 결과를 확인할 수 있습니다.
아직까지는 아무런 동작을 하지 않습니다. 키보드 이벤트를 추가하고 제어 코드를 작성해야 합니다.
xterm 의 공식 문서에서 사용가능한 Method 를 확인하고 원하는 기능을 구현합니다.
기본적으로 모든 키보드와 출력 메시지를 javascript 로 하나 하나 구현하여 xterm 모듈을 통해 출력하도록 처리하면 됩니다.
본 프로젝트에서 사용한 method의 목록은 다음과 같습니다.
open: 원하는 html 객체에 터미널을 생성합니다.write: 텍스트를 출력합니다.writeln: 텍스트를 라인단위로 출력합니다.onKey: 키보드 입력 이벤트를 처리합니다.focus: 터미널 커서를 포인트 합니다.dispose: 터미널을 dispose 합니다.
ANSI Escape 코드를 이용하여 글자색, 전경색 등을 스타일링 할 수 있습니다. ANSI 이스케이프 코드 는 터미널을 제어하는데 사용되는 표준입니다.
**16진수 값으로 \x1B 또는 8진수 값으로 \033 인 Escape문자로 시작**하고 아래의 코드표를 참고하면 됩니다.
| color code | 기능 |
|---|---|
| [0m | 모든 색과 스타일 초기화 |
| [1m | 굵게(bold) / 밝게 |
| [3m | 이탤릭체(italic) |
| [4m | 밑줄(underline) |
| [7m | 반전(글자색/배경색을 거꾸로) |
| [9m | 가로줄 치기 |
| [22m | 굵게(bold) 제거 |
| [23m | 이탤릭체(italic)제거 |
| [24m | 밑줄(underline)제거 |
| [27m | 반전 제거 |
| [29m | 가로줄 제거 |
| [30m | 글자색: 검정 |
| [31m | 글자색: 빨강 |
| [32m | 글자색: 초록 |
| [33m | 글자색: 노랑 |
| [34m | 글자색: 파랑 |
| [35m | 글자색: 마젠트(분홍) |
| [36m | 글자색: 시안(청록) |
| [37m | 글자색: 백색 |
| [39m | 글자색으로 기본값으로 |
| [40m | 바탕색: 흑색 |
| [41m | 바탕색: 적색 |
| [42m | 바탕색: 녹색 |
| [43m | 바탕색: 황색 |
| [44m | 바탕색: 청색 |
| [45m | 바탕색: 분홍색 |
| [46m | 바탕색: 청록색 |
| [47m | 바탕색: 흰색 |
| [49m | 바탕색을 기본값으로 |
