<div id="readability-page-1" class="page"><div>
    
    <article>
        <ul id="markdown-toc">
  <li><a href="#일러두기" id="markdown-toc-일러두기">일러두기</a></li>
  <li><a href="#나의-위키" id="markdown-toc-나의-위키">나의 위키</a></li>
  <li><a href="#왜-lsp를-만들기로-결정했나" id="markdown-toc-왜-lsp를-만들기로-결정했나">왜 LSP를 만들기로 결정했나?</a>    <ul>
      <li><a href="#wiki-편집에서-가장-중요한-기능은-다른-문서-링크" id="markdown-toc-wiki-편집에서-가장-중요한-기능은-다른-문서-링크">Wiki 편집에서 가장 중요한 기능은 다른 문서 링크</a></li>
      <li><a href="#해결책-fzfvim-과-셸-스크립트를-사용한-문서-파일명-완성" id="markdown-toc-해결책-fzfvim-과-셸-스크립트를-사용한-문서-파일명-완성">해결책: fzf.vim 과 셸 스크립트를 사용한 문서 파일명 완성</a></li>
      <li><a href="#vimwiki용-lsp를-만들어-보자" id="markdown-toc-vimwiki용-lsp를-만들어-보자">Vimwiki용 LSP를 만들어 보자</a></li>
    </ul>
  </li>
  <li><a href="#완성된-vimwiki-lsp의-기능들" id="markdown-toc-완성된-vimwiki-lsp의-기능들">완성된 Vimwiki LSP의 기능들</a>    <ul>
      <li><a href="#링크할-문서파일의-이름-자동완성" id="markdown-toc-링크할-문서파일의-이름-자동완성">링크할 문서파일의 이름 자동완성</a></li>
      <li><a href="#링크할-리소스-파일의-경로-자동완성" id="markdown-toc-링크할-리소스-파일의-경로-자동완성">링크할 리소스 파일의 경로 자동완성</a></li>
      <li><a href="#링크된-문서의-제목을-호버링으로-보여주기" id="markdown-toc-링크된-문서의-제목을-호버링으로-보여주기">링크된 문서의 제목을 호버링으로 보여주기</a></li>
      <li><a href="#문서-파일명-rename" id="markdown-toc-문서-파일명-rename">문서 파일명 rename</a></li>
      <li><a href="#선택한-문서를-링크하는-다른-문서들의-목록-보여주기" id="markdown-toc-선택한-문서를-링크하는-다른-문서들의-목록-보여주기">선택한 문서를 링크하는 다른 문서들의 목록 보여주기</a></li>
    </ul>
  </li>
  <li><a href="#주석" id="markdown-toc-주석">주석</a></li>
</ul>

<h2 id="일러두기">일러두기</h2>

<p>이 글은 내가 <a href="https://event-us.kr/vim/event/74978">VimEnter 2023 모임</a>에서 발표할 자료이다.</p>

<h2 id="나의-위키">나의 위키</h2>

<p>나는 2017년부터 개인용 위키 <a href="https://johngrib.github.io/">johngrib.github.io</a>를 운영하고 있으며, 이를 위해 다음과 같은 기술들을 선택해 사용하고 있다.<sup id="fnref:wiki-2017" role="doc-noteref"><a href="#fn:wiki-2017" rel="footnote">1</a></sup></p>

<ul>
  <li>Vim, NeoVim
    <ul>
      <li>첫 3년은 Vim, 그 이후부터는 NeoVim을 사용하고 있다.</li>
    </ul>
  </li>
  <li><a href="https://github.com/johngrib/vimwiki">Forked Vimwiki</a>
    <ul>
      <li>2022년 2월부터 포크하여 관리중.</li>
    </ul>
  </li>
  <li><a href="https://docs.github.com/ko/pages">GitHub Pages</a>, <a href="https://jekyllrb-ko.github.io/">Jekyll</a>
    <ul>
      <li>GitHub에서 무료로, 기본으로 제공한다.</li>
    </ul>
  </li>
  <li>[[/ctags]]{ctags}, <a href="https://github.com/preservim/tagbar">tagbar</a>
    <ul>
      <li>유서깊은 프로그래밍 도구이며, 이것으로 Vimwiki용 TOC를 만들고 사용하고 있다.</li>
    </ul>
  </li>
  <li><a href="https://github.com/johngrib/johngrib-wiki-lsp">johngrib-wiki-lsp</a>
    <ul>
      <li>2023년부터 직접 만들어 사용하고 있는 Vimwiki용 LSP. 이 문서의 주제.</li>
    </ul>
  </li>
</ul>

<p>나는 로컬 컴퓨터에서 Vimwiki 플러그인을 설치한 Vim을 사용해 문서를 편집하고, 이를 GitHub repository에 푸시하여 전체 문서를 웹 사이트 형태로 발행하고 있다. 내 관점에서 나의 위키를 위한 기술 선택은 크게 두 가지로 분류할 수 있다.</p>

<ul>
  <li>로컬 컴퓨터에서의 편집을 위해 선택한 기술</li>
  <li>웹 사이트로 보여주기 위해 선택한 기술</li>
</ul>

<p>이 문서는 '로컬 컴퓨터에서의 편집을 위해 선택한 기술'들 중 가장 최근의 결정인 Vimwiki용 LSP에 대한 내용을 다룬다.</p>



<h3 id="wiki-편집에서-가장-중요한-기능은-다른-문서-링크">Wiki 편집에서 가장 중요한 기능은 다른 문서 링크</h3>

<p>위키를 편집할 때 가장 중요하고 빈번히 사용하는 기능은 다른 문서를 링크하는 것이다.
Vimwiki에서 문서를 편집할 때 '다른 문서'를 링크하는 것은 간단하다.
'다른 문서'의 파일명을 입력하고, <code>Enter</code>를 누르면 링크가 만들어진다.</p>

<p>문제는 링크하고자 하는 '다른 문서'의 파일명이 떠오르지 않거나, 정확히 기억나지 않을 때이다.</p>

<p>[[/vim/perldo]] 문서를 편집하고 있는 도중에 [[/regex/pcre]] 문서를 링크하고자 한다고 가정하자.</p>

<p>컨텍스트는 다음과 같다.</p>

<ul>
  <li>내가 편집중인 문서: <code>~/johngrib.github.io/_wiki/vim/perldo.md</code></li>
  <li>내가 링크하려는 문서: <code>~/johngrib.github.io/_wiki/regex/pcre.md</code></li>
  <li>PWD: <code>~/johngrib.github.io/</code></li>
</ul>

<p>문서가 위치하는 경로와 PWD, 목표하는 문서 사이의 경로가 조금씩 다르기 때문에 처리가 꽤나 귀찮다.</p>

<h3 id="해결책-fzfvim-과-셸-스크립트를-사용한-문서-파일명-완성">해결책: fzf.vim 과 셸 스크립트를 사용한 문서 파일명 완성</h3>

<p><a href="https://github.com/junegunn/fzf.vim">fzf.vim</a>이나 <a href="https://github.com/nvim-telescope/telescope.nvim">telescope.nvim</a>을 사용하면 문서를 편리하고 빠르게 찾을 수 있다.
이 두 플러그인을 잘 응용하면 자동완성 기능으로도 사용할 수 있다.</p>

<p>물론 Vim에서는 디스크의 파일 이름을 완성해주는 <code>&lt;C-x&gt;&lt;C-f&gt;</code>가 있으므로, <a href="https://github.com/junegunn/fzf.vim">fzf.vim</a>의 함수를 응용해서 다음과 같은 Vimscript를 사용할 수도 있다.</p>

<div><pre><code>inoremap <span>&lt;</span>expr<span>&gt;</span> <span>&lt;</span><span>c</span><span>-</span><span>x</span><span>&gt;&lt;</span><span>c</span><span>-</span><span>k</span><span>&gt;</span> fzf#<span>vim</span>#<span>complete</span><span>(</span><span>'find ./_wiki -name "*.md"'</span><span>)</span>
</code></pre></div>

<p>이를 좀 더 다듬어서 <code>wiki-docs</code>라는 이름의 셸 스크립트를 만든 다음…</p>

<div><pre><code><span>#!/usr/bin/env bash</span>

find ~/johngrib.github.io/_wiki <span>-name</span> <span>'*.md'</span> <span>\</span>
    | <span>sed</span> <span>-E</span> <span>'s#^.*/_wiki(/.*).md$#\1#'</span>
</code></pre></div>

<p>아래와 같이 <code>fzf#vim#complete</code> 함수에 넘겨주면, 간단하게 문서의 파일명을 자동완성할 수 있다.</p>

<div><pre><code>inoremap <span>&lt;</span>expr<span>&gt;</span> <span>&lt;</span><span>c</span><span>-</span><span>x</span><span>&gt;&lt;</span><span>c</span><span>-</span><span>k</span><span>&gt;</span> fzf#<span>vim</span>#<span>complete</span><span>(</span><span>"wiki-docs"</span><span>)</span>
</code></pre></div>

<p>아래의 영상은 위의 Shell/Vim script를 사용해 이 문서(<code>/article/vimwiki-lsp</code>)를 링크하는 과정을 보여준다.</p>

<video controls="" autoplay="" loop=""><source src=" /resource/CE/26FDCD-4282-4257-A2AE-F17EF0A47884/fzf-xk.mp4 " type="video/mp4"></video>

<p>이 기능은 잘 작동했고 적어도 몇일 동안은 충분하다고 느꼈다.</p>

<p>문제는 쓰다 보니 욕심이 생겼다는 건데, <code>&lt;C-x&gt;&lt;C-x&gt;</code> 같은 키 입력을 하고 싶지 않았다.
물론 <code>imap</code>을 사용하므로 INSERT 모드에서의 <code>&lt;F3&gt;</code> 같은 키를 정의할 수도 있다.</p>

<p>그러나 내가 정말로 바라는 것은 더 seamless한 경험이었다.
나는 그냥 <code>/</code>를 입력하면 관련 문서들에 대한 추천 목록이 나타나길 바랐다.</p>

<h3 id="vimwiki용-lsp를-만들어-보자">Vimwiki용 LSP를 만들어 보자</h3>

<p>사실 처음부터 Vimwiki용 LSP를 만들려고 한 것은 아니다.</p>

<p>문제는 이미 거의 해결했다. 미세하게 불편할 뿐 문서 편집은 쾌적했고 충분하다고 느꼈다.</p>

<p>계기는 의외로 ChatGPT를 사용하게 되면서부터였다.</p>

<p>ChatGPT를 통해 잡다한 도움을 받다가 문득 이 대단한 도구를 통해 LSP를 만들어 본다면 꽤나 재미있지 않을까 하는 생각이 들었다.</p>

<p>그래서 먼저 LSP의 기본을 설명하는 문서와 간단한 튜토리얼 문서를 참고해서 기본적인 LSP를 만들어 보았다.</p>

<p>내가 참고한 문서는 다음의 두 가지다.</p>

<ul>
  <li><a href="https://www.toptal.com/javascript/language-server-protocol-tutorial">Language Server Protocol Tutorial: From VSCode to Vim (topal.com)</a></li>
  <li><a href="https://microsoft.github.io/language-server-protocol/overviews/lsp/overview/">What is the Language Server Protocol? (microsoft.github.io)</a></li>
</ul>

<p>간단하게 만든 LSP는 <code>foo</code>, <code>bar</code>, <code>baz</code> 같은 단어를 검사하는 기본적인 기능만을 제공한다.</p>

<p>나는 이 LSP를 Vimwiki용으로 개조하기 위해 ChatGPT와 대화하기 시작했다.</p>

<p><img src="https://johngrib.github.io/resource/CE/26FDCD-4282-4257-A2AE-F17EF0A47884/question-0.jpg" alt=""></p>

<p><img src="https://johngrib.github.io/resource/CE/26FDCD-4282-4257-A2AE-F17EF0A47884/question-1.jpg" alt=""></p>

<p>ChatGPT가 모든 문제를 해결해준 것은 아니었지만 기본적인 틀을 갖추는 데에는 큰 도움이 되었다.</p>

<h2 id="완성된-vimwiki-lsp의-기능들">완성된 Vimwiki LSP의 기능들</h2>

<p>거의 며칠만에 ChatGPT의 도움을 받아 만든 나의 Vimwiki LSP는 다음과 같은 기능을 제공할 수 있었다.</p>

<ul>
  <li>링크할 문서파일의 이름 자동완성</li>
  <li>링크할 리소스 파일의 경로 자동완성</li>
  <li>링크에 커서를 올려두면 해당 문서의 제목을 호버링으로 보여줌</li>
  <li>문서 파일명 rename 기능</li>
  <li>문서 링크 위에 커서를 올려놓고 해당 문서를 링크하고 있는 다른 문서들의 목록을 보여주기</li>
</ul>

<h3 id="링크할-문서파일의-이름-자동완성">링크할 문서파일의 이름 자동완성</h3>

<p><a href="https://github.com/johngrib/johngrib-wiki-lsp/blob/77269fb6077c80b33abf4195c58333f8f3ab36fa/index.js#L111">connection.onCompletion</a></p>

<p><code>_wiki</code> 경로 하위에 있는 마크다운 문서들의 경로와 이름을 자동완성해준다.</p>

<p><img src="https://johngrib.github.io/resource/CE/26FDCD-4282-4257-A2AE-F17EF0A47884/feature-completion-filename.jpg" alt=""></p>

<video controls="" autoplay="" loop=""><source src=" /resource/CE/26FDCD-4282-4257-A2AE-F17EF0A47884/lsp-filename-completion.mp4 " type="video/mp4"></video>

<h3 id="링크할-리소스-파일의-경로-자동완성">링크할 리소스 파일의 경로 자동완성</h3>

<p><a href="https://github.com/johngrib/johngrib-wiki-lsp/blob/77269fb6077c80b33abf4195c58333f8f3ab36fa/index.js#L112">connection.onCompletion</a></p>

<p>UUID를 살짝 변형한 각 문서의 고유 ID를 이름으로 갖는 디렉토리의 리소스 파일의 경로를 자동완성해준다.</p>

<p>주로 이미지, pdf 파일들이 이에 해당한다.</p>

<video controls="" autoplay="" loop=""><source src=" /resource/CE/26FDCD-4282-4257-A2AE-F17EF0A47884/resource-complation.mp4 " type="video/mp4"></video>

<h3 id="링크된-문서의-제목을-호버링으로-보여주기">링크된 문서의 제목을 호버링으로 보여주기</h3>

<p><a href="https://github.com/johngrib/johngrib-wiki-lsp/blob/77269fb6077c80b33abf4195c58333f8f3ab36fa/index.js#L66C1-L66C29">documents.onDidChangeContent</a></p>

<p>문서 링크 위에 커서를 올려두면 해당 문서의 제목을 보여준다.</p>

<p><img src="https://johngrib.github.io/resource/CE/26FDCD-4282-4257-A2AE-F17EF0A47884/document-name-view.jpg" alt=""></p>

<h3 id="문서-파일명-rename">문서 파일명 rename</h3>

<p><a href="https://github.com/johngrib/johngrib-wiki-lsp/blob/77269fb6077c80b33abf4195c58333f8f3ab36fa/index.js#L125">connection.onRenameRequest</a></p>

<p>문서의 파일명을 변경한다. 사실 여기에서는 구현이 귀찮아서 셸 스크립트를 만들어 작동하는 것을 확인한 다음, LSP에서 해당 셸 스크립트를 호출하게 하는 방식을 선택했다.</p>

<p><a href="https://github.com/johngrib/johngrib.github.io/blob/3d7115b1f3e7f55d3574c4f0987c99a3e38bc209/tool/mv-document.sh">셸 스크립트 - mv-document.sh</a></p>

<video controls="" autoplay="" loop=""><source src=" /resource/CE/26FDCD-4282-4257-A2AE-F17EF0A47884/renamer.mp4 " type="video/mp4"></video>

<h3 id="선택한-문서를-링크하는-다른-문서들의-목록-보여주기">선택한 문서를 링크하는 다른 문서들의 목록 보여주기</h3>

<p><a href="https://github.com/johngrib/johngrib-wiki-lsp/blob/77269fb6077c80b33abf4195c58333f8f3ab36fa/index.js#L148">connection.onReferences</a></p>

<p>일반적인 IDE의 <code>Show Usage</code> 같은 기능이라 할 수 있다.</p>

<video controls="" autoplay="" loop=""><source src=" /resource/CE/26FDCD-4282-4257-A2AE-F17EF0A47884/show-usage.mp4 " type="video/mp4"></video>

<h2 id="주석">주석</h2>



    </article>


    
    
    



</div></div>

기계인간 John Grib

JohnGrib

아직 발표 안 한 발표자료. 발표 예정일은 2023-12-23.

Vimwiki에서 사용하기 위한 나만의 LSP를 만들자

댓글