❓ Xterm.js 란?
애플리케이션이 브라우저에서 사용자에게 모든 기능을 갖춘 터미널을 제공할 수 있도록 TypeScript로 작성된 프론트 엔드 구성 요소입니다. VS Code, Hyper 및 Theia와 같은 인기 있는 프로젝트에서 사용됩니다.
🌭 활용해야 하는 이유
- 많은 기업에서 채택해서 활용하고 있음.
- 레퍼런스가 많음.
- 우리의 예전 솔루션도 사용하고 있는 라이브러리
- 대체 라이브러리가 없음(오래된 라이브러리면서 최근까지 업데이트되는 라이브러리)
😞 직면한 문제 및 해결방안
첫번째
문제: 리액트에서 사용할 때는 에러가 나질 않았지만, next.js에선 에러가 뜨는 라이브러리 import 문제입니다.
Next.js가 페이지
window가 존재하지 않을 때 미리 렌더링하기로 결정했기 때문에 오류가 발생
해결방안
- next/dynamic 을 사용해서 ssr 을 비활성화합니다.
- https://github.com/vercel/next.js/discussions/22409
- https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#with-no-ssr
- 아니면 app router에선 “use client” 를 사용하니까 나오진 않습니다. (현재 저희는 page router라 사용하지 못한 해결책입니다.)
두번째 (Main Problem)
문제: 위 첫번째 문제를 해결한 뒤 xterm.js 라이브러리를 next.js에서 사용하려는 찰나에 라이브러리 내부에서 위와 같은 에러가 떴습니다.
해결 과정
-
xterm.js 코드 내부에서 에러가 떴습니다. 처음에는 xterm.js를 업데이트 했습니다. 이와 같은 깃헙 이슈가 있었고, 수정을 했다는 메인테이너의 글이 있었기 때문에 xterm.js beta 버전으로 업데이트 했습니다. 하지만 똑같은 에러가 발생했습니다. (실패)
-
xterm.js 코드를 직접 바꿔보자라고 생각했습니다. 포크 떠서 나오는 에러를 수정하려했는데 xterm.js 내부 코드에 깊은 이해도가 없기도 하고, 빠르게 기능을 개발하는 입장에서 비효율적이라고 판단해서 보류했습니다. {window, ? escape 처리를 시도했지만 동일하게 에러가 뜨긴 했습니다.} (실패)
-
next.js issue 목록에 있어서 확인했습니다. https://github.com/vercel/next.js/discussions/56241 이 문제에 댓글을 단 뒤 답변을 봤습니다.
신기한 답변이였는데 next/dynamic으로 import를 호출한 뒤 한번 더 비동기 처리하는 형식의 코드였습니다.
될 것 같은 마음에 현재 우리 프로젝트는 page router 지만 app router로 변경해서 처리하려고 마음 먹었습니다.
그전에 테스트 next 프로젝트를 파서 검증을 진행하는데, 똑같은 문제가 발생해 결국 실패했습니다.(실패)
해결방안:
- 포기하고 있던 찰나에 https://stackoverflow.com/questions/78116360/xtermjs-cannot-read-properties-of-undefined-reading-dimensions-v5-3-on-next 이 스택 오버플로우 답변을 찾게 됩니다.
- term.open 이라는 메서드에서 오류를 발생했다는 말을 듣고 위 코드를 참고해서 코드를 구현합니다.
1. 첫 useEffect 마운트 때 terminal이라는 생성자 객체를 useState term 객체에 넣습니다.
2. 다음 useEffect에서 term 객체가 있을 때 호출해 해당 참조된 객체를 기반으로 terminal.ref에 넣어주면서 해결했습니다.
에러원인:
가장 근접한 원인은 해당 객체가 완전히 렌더링되지 않을 때 useRef로 참조된 terminal을 열어버리는 것입니다.(참조되기전 렌더링을 진행) 그래서 전체 렌더링 크기를 계산하지 못하는데 터미널을 그 찰나에 만들 때 오류가 나는 것 같습니다.
해결된 이유도 전체 마운트 및 렌더링이 완료되고, 그때 다시 terminal 객체로 terminal을 명시하니까 되는 것입니다.
해결 원인이 명확하다고 판단되진 않습니다. 왜냐하면 이론적으론 맞지만 검증이 되진 않았고, xterm.js라는 라이브러리에 대한 이해도가 현저히 부족하기 때문입니다.
✏️ 결론
현재 시간상으로 위 문제 해결에 만족하고, 기능을 완성했습니다.
팀 내부 문제로 완성되지 않은(버그가 있는)기능 개발을 인수인계 받았는데 성공적으로 해결을 한 것 같아 뿌듯한 경험이였습니다.
글을 적으면서 잠시 흔적을 남기고 시간이 날 때 정확한 문제를 파악하여 Xterm.js에 코드를 정확히 파악해 기여할 예정입니다.
