노트북, Visual Studio Code 스타일
2021년 11월 8일 by Tanha Kabir, @_tanhakabir
노트북은 풍부한 Markdown, 실행 가능한 코드 조각 및 관련 풍부한 출력을 혼합하여 포함하는 문서입니다. 이 모든 것은 별도의 셀로 분리되며 어떤 순서로든interleave될 수 있습니다.
노트북이 익숙하지 않다면 REPL(read-eval-print loop)에 익숙할 수 있습니다. REPL은 몇 줄의 코드를 작성하고 즉시 실행하여 출력을 볼 수 있는 대화형 애플리케이션입니다. 노트북은 REPL의 정점이며, 코드를 반복하고 작은 덩어리로 작업할 수 있는 환경을 빠르게 만들 수 있습니다.
노트북은 훌륭한 REPL일 뿐만 아니라 훌륭한 스토리텔링 장치이기도 합니다. 이미지, 수학 공식 및 설명 텍스트와 같은 Markdown 요소를 코드로interleave할 수 있습니다. 노트북은 아이디어를 동료 또는 대중 커뮤니티와 공유하고 설명하는 완벽한 방법이 될 수 있습니다.
오늘날 가장 인기 있는 노트북 형태는 Jupyter Notebook이며, 풍부한 Python 지원으로 데이터 과학 커뮤니케이션에서 광범위하게 사용됩니다. Jupyter Notebook은 Jupyter 커널(노트북에서 코드를 실행하기 위한 특정 프로토콜을 따르는 실행 파일)을 통해 Julia 또는 R과 같은 다른 언어도 지원합니다. Visual Studio Code는 몇 년 동안 Jupyter Notebook을 지원해 왔지만 최근 VS Code 핵심에 네이티브 노트북 지원을 추가했습니다.
VS Code의 노트북 지원
맞습니다. 노트북이 이제 VS Code의 핵심 기능의 일부가 되었습니다! 이는 확장 작성자가 자신의 노트북 경험을 만들 수 있도록 VS Code에서 Notebook API를 사용할 수 있음을 의미합니다. 누구나 사용자 지정 언어와 풍부한 출력을 지원하는 VS Code 노트북 확장을 만들 수 있으며, 노트북을 만드는 것은 다른 확장을 만드는 것과 다르지 않습니다.
Notebook API 이전에 VS Code의 Jupyter Notebook 지원은 Jupyter 확장에서만 제공되었습니다. 이 확장은 VS Code 내의 독립적인 웹 페이지와 유사한 격리된 웹뷰 내에서 노트북 경험을 생성했으며, 설치된 다른 확장과 통신할 수 없었습니다.
하지만 이제 핵심 Notebook API를 통해 노트북 지원은 VS Code에서 제공되며 격리된 웹뷰에 있지 않습니다. 이는 노트북 확장이 VS Code의 나머지 부분 및 다른 확장과 상호 작용할 수 있음을 의미합니다. 예를 들어, Rainbow Indent와 같은 편집기 확장은 노트북의 코드 셀에서 작동합니다.
Notebook API는 Jupyter Notebook에만 국한되지 않습니다. 코드를 반복하고 설명하는 데 도움이 되는 도구를 통해 이점을 얻을 수 있는 다른 많은 영역이 있다고 믿기 때문입니다. 사용자 지정 노트북을 만들기 위해 모든 확장 작성자가 사용할 수 있도록 새로운 Notebook API를 공개했습니다.
노트북 확장 생태계의 시작
다음 섹션에서는 Notebook API를 검토하는 동안 개발한 두 가지 사용자 지정 노트북에 대해 설명합니다.
GitHub Issues Notebook
VS Code 팀이 만든 첫 번째 노트북 경험은 GitHub Issues Notebook입니다. GitHub에 있는 수천 개의 이슈를 분류하고 구성하는 데 도움이 되는 노트북입니다. 이 노트북을 사용하면 쿼리를 사용하여 여러 리포지토리를 한 번에 검사하여 "bug 레이블이 지정되고 나에게 할당된 모든 이슈 찾기"와 같은 이슈를 찾을 수 있습니다. VS Code 팀은 팀이 작업하는 많은 리포지토리에서 이슈를 처리하기 위해 매일 이 노트북을 사용합니다.
분류에 사용하는 특정 노트북은 VS Code 리포지토리의 .vscode/notebooks 아래에서 찾을 수 있습니다. 새로 들어온 이슈를 적절한 영역 및 담당자에게 분류하기 위한 inbox.github-issues라는 것이 있습니다.
GitHub Issues Notebook은 VS Code Marketplace에서 사용할 수 있습니다. 확장을 설치하고 .github-issues 파일 확장자를 가진 노트북 파일(예: my-notebook.github-issues)을 만든 다음 다음과 같은 쿼리를 만들어서 사용해 볼 수 있습니다.
$repo=repo:microsoft/vscode-github-issue-notebooks
$repo is:open no:assignee
쿼리를 만드는 데 사용되는 노트북 언어인 github-issues는 GitHub.com에서 사용되는 구문과 거의 동일합니다. GitHub Issues Notebook 언어의 한 가지 추가 사항은 변수를 만들고 다른 셀에서 사용할 수 있다는 것입니다.
GitHub Issues Notebook의 소스 코드는 GitHub.com에서 볼 수 있습니다.
REST Book
GitHub Issues Notebook의 쿼리 경험에서 영감을 받아 VS Code 팀에 처음 합류했을 때 학습 연습으로 REST Book을 만들었습니다. REST Book을 사용하면 노트북에서 HTTP 호출을 수행할 수 있습니다. 서버와 함께 프로젝트를 반복하는 데 REST Book이 유용하다고 생각했는데, 시간이 지남에 따라 여러 호출을 수행하고 결과를 한 페이지에서 쉽게 비교할 수 있었습니다. 또한 REST Book 노트북을 사용하여 설명이 테스트 케이스와interleave된 프로젝트의 수동 테스트를 설정했습니다.
이 REST Book 확장은 현재 Marketplace에서도 사용할 수 있습니다. REST Book 확장을 설치하고 .restbook 접미사가 있는 파일을 만든 다음 GET github.com과 같은 HTTP 쿼리를 수행할 수 있습니다.
REST Book을 개발하는 것은 처음에는 복잡하게 느껴졌지만, 사용 가능한 VS Code API가 많아서 예상보다 훨씬 쉽게 프로그래밍하고 REST Book을 만들 수 있었습니다. 특히 사용자 지정 REST 쿼리 언어의 구문 강조 및 자동 완성 기능을 위해 언어 API를 많이 사용했습니다. 그런 다음 Notebook API를 사용하여 사용자가 쿼리를 실행하려고 할 때 수행되어야 하는 부분만 채우면 되었습니다.
REST Book의 소스 코드는 여기서 볼 수 있습니다.
이 두 노트북 모두 REPL과 같은 경험을 만들기 위해 VS Code Notebook UI를 사용할 수 있어 좋았습니다. 자체 UI를 만들고 유지 관리하는 것에 대해 걱정할 필요 없이 기능에만 집중할 수 있습니다.
자신만의 사용자 지정 노트북 확장 만들기
코딩 튜토리얼 시청
VS Code 팀은 몇 달 전에 사용자 지정 노트북에 대한 라이브 스트림을 녹화했으며, 여기서 사용자 지정 노트북 확장을 만드는 것이 어떤 것인지 라이브 코딩 데모로 선보였습니다. YouTube에서 시청할 수 있습니다: VS Code Notebooks: A Deep Dive. 비디오가 게시된 이후 일부 Notebook API가 변경되었지만 원칙은 동일합니다.
자신만의 노트북 확장을 구축할 준비가 되었을 때 가장 최신의 자세한 정보를 얻으려면 Notebook 확장 작성자 가이드를 참조하세요.
커뮤니티와 아이디어 공유
자신만의 노트북 확장을 만드는 데 관심이 없지만 유용한 애플리케이션에 대한 아이디어가 있다면 VS Code 트위터 계정 @code로 노트북 아이디어를 트윗하거나 VS Code GitHub 저장소에 이슈를 만드는 것을 권장합니다. 이렇게 하면 VS Code 커뮤니티에서 노트북 아이디어를 읽고 토론할 수 있으며, 사람들이 여러분의 노트북을 현실로 만들도록 영감을 줄 수 있기를 바랍니다!
이 블로그에서 다룬 몇 가지 사용자 지정 노트북은 시작일 뿐입니다! 여러분이 영감을 주고 만들게 될 사용자 지정 노트북 경험을 보게 되어 기대됩니다!
행복한 코딩 되세요!
Tanha Kabir (@_tanhakabir), 그리고 VS Code 팀 (@code)