console.log 안에서 React 앱을 렌더하는 Text.js 공개, 전체 리페인트 0.163ms
- console.log 안에서 React 19 앱을 렌더하는 Text.js는 100×32 대시보드 기준 전체 리페인트 0.163ms, 한 줄 수정 0.011ms, 변화 없는 프레임은 0 calls로 끝나며 3,200개 셀을 149개 %c span으로 인코딩함
- 매 프레임 clear() 후 log()를 호출하는 방식은 화면의 70.6%가 비지만, 프레임을 덧붙이는 Turbolog 엔진은 빈 비율을 1.0%로 줄이고 프레임 간격을 최소 66ms로 유지함
- app/ 폴더가 라우트와 레이아웃이 되는 App Router, runtime = 'server' 서버 렌더링, 미들웨어, revalidate 캐싱을 지원하고 서버 라우트에서는 브라우저가 21kB gzip 프레임 플레이어만 받음
- Yoga가 셀 단위로 레이아웃을 잡고 키 입력과 IME 조합은 숨겨진 textarea 하나로 전달되며, 콘솔뿐 아니라 터미널과 에이전트 환경에서도 실행됨
- 제작은 OpenCode를 만든 anomalyco이고 저자는 마케팅 사이트가 전부 satire라며 그냥 재미로 만들었다고 밝혔으며, textjs.org/doom에 둠 포팅까지 올라와 있음
Hacker News opinions
이거 터미널 앱 만들 때도 그냥 쓸 수 있나? stdout도 결국 console.log니까 될 것 같은데.
솔직히 어디에 써야 할지 모르겠음. 만든 사람은 좋겠지만 누가 쓰는 물건인지 감이 안 잡힌다.
재미로 만든 거라고 저자가 직접 댓글에 답글 달았더라. 그 정도 이유면 충분하다고 본다.
진짜 값어치는 페이지 아래에 숨어 있음. 터미널에서도 렌더돼서 사실상 React로 TUI 만드는 거고 OpenCode도 이걸로 만들었다던데, 왜 console.log를 전면에 내세우는지 모르겠다.
브라우저 안에 브라우저나 한번 만들어봐.
textjs.org/doom 가보면 둠도 이미 포팅돼 있음.
쓸모는 없는데 재미는 있다. 요즘같이 AI가 코드 다 짜주는 시기에 재미로 뭔가 만드는 건 좀 다르게 와닿더라.
유즈케이스라면 사이트 콘솔에 채용 공고 띄우는 정도? 개발자들이 콘솔은 꼭 열어보니까.
OpenCode 만든 anomalyco 작품이고 마케팅 사이트는 전부 satire라고 저자가 밝혔음. 프레임워크 자체는 실제로 동작한다.
ink-web이나 webatui랑 비교하면 어떤지 궁금하네.
Claude Code도 비슷한 방식인데 오픈으로 풀린 사례라 반갑다.
못이 하나 필요한데 망치부터 찾고 있는 느낌. 왜 다들 이렇게 복잡하게 가는지 모르겠음.