해피해킹과 neovim을 같이 쓰면 물리적 생산성을 기가막히게 높일 수 있다(손가락의 이동 거리와 타이핑 횟수를 기가막히게 줄일 수 있다)는 친구의 말을 듣고 vim editor를 시도한 적이 있었다. 하지만 업무시간에 쓰기에는 손에 익지 않은 툴을 이용하면서 생기는 일시적인 생산성 저하가 심각해서 잠깐 깔짝거리다가 다시 vscode로 돌아갔었다. 결국 일이 아닌 놀이코딩(?)을 하는 백수가 되어서야 '언젠가 배워야지' 목록에 넣어놨던 neovim을 꺼내어 가지고놀며 슬금슬금 재미를 붙이게 되었다. 직접 환경설정을 하면서, 또 몇개의 키 조합을 익히면서 조금씩 개발하기에 편한 환경을 만들어 적응하고 있는데, 환경설정 과정이 프로그램을 사용하는 것이면서도 동시에 코딩이고 디버깅이라 재미있었다. 아직은 뇌와 손가락 사이에서 메모리 충돌이 생기기도 하고, 적절한 vim 명령어가 기억이 나지 않아 단축키 정리한 스크린샷을 열었다 닫았다 하고 있지만, 적응되면 편할 듯 하다.(nvim 기반 개발환경에서 프로젝트 하나 완료하면 좀 적응될 듯) 어쨌든 이 재미있고 약간 고통스러우며 신기했던 경험을 기록으로 남긴다.

시작하기 전에,

1) 열심히 찾아다니면서 조각조각 정보를 그러모아 세팅하고 난 후에 https://kodingwarrior.github.io/wiki/appendix/excelcon-2nd/ 이런 게시글을 발견했다. Astrovim? Ecovim? 편하게 쓸 수 있는게 있다고? 지금까지 쓸 데 없는 삽질을 한 것 같아 약간 불행한 느낌이 든다... 보니까 모르는 걸 질문할 수 있는 한국어 커뮤니티도 있었다. 새롭게 배우시는 분들은 이쪽을 참고하면 도움을 많이 받을 수 있을 듯 하다. 한편으로는 또 행복하고 든든하다. 앞으로도 모르는 게 계속 나올테니 디스코드 들어가서 물어봐야지.

2) 나는 mac에서 iterm2 + omyzsh 을 사용하고 있다. 이 글을 참고해서 설정했다.

이제 시작!

Neovim Editor

사실 vim이 아주 낯설진 않았다. 학교다닐때 terminal을 통해 linux 서버에 접속해서 vi Editor를 이용해서 과제를 한 적이 있어서. Linux 수업 때 ppt 장표에 들어갈 만큼의 명령어만, 아주 단순한 것들만 배웠기 때문에 기억속의 vi Editor는 마우스 스크롤도 안되는 귀찮은 편집기였을 뿐이다. 처음 컴퓨터를 배웠을 때부터 마우스가 있었던, 오히려 키보드보다 마우스가 더 편했던 나에게 vi Editor는 오히려 마우스 클릭 한번이면 되는 것을 hjkl을 무한 타이핑해서 커서를 옮겨야 하는 훨씬 비효율적인 편집기였다. 어쩔 수 없이 급하게 코딩을 해야 할 때(동시에 Visual studio를 설치할 수 없거나, 설치될 때까지 기다릴 시간이 없거나 할 때) 겨우 몇번 사용하고 치웠던 것 같다.

그럼에도 불구하고 그때 배워둬서 지금까지도 편하게 나오는 명령어는 아래와 같다.

• hjkl 상하좌우 이동
• i 현재 커서부터 편집모드 진입
• a 커서 다음부터 편집모드 진입
• x 현재 커서 위치의 문자 삭제
• dd 현재 커서가 있는 라인 삭제
• p dd로 지웠던 라인 붙여넣기
• u 실행취소
• [esc] 편집모드 취소
• :wq 저장 후 종료
• :q! 저장하지 않고 종료

이 열개로 모든 편집을 해야 했으니 vi가 귀찮고 짜증날 수밖에. (5줄로 이루어진 코드 구문을 통째로 두줄 아래로 옮기는 경우, dd jj p kk dd jj p... 이런식으로 무한반복을 하는 것이다. 그러다가 틀렸다? u를 몇번 눌러보다가 파일이 망가지면 저장하지 않고 종료한 후 처음부터 다시 한다. 마치 커터칼로 종이도 자르고 고기도 썰고 가지치기도 하고 통나무도 써는 느낌이었다. 지금 생각해보니 멍청하기 그지없는 방법이다.

그러나 친구의 얘기에 의하면, 또 vim을 사랑하는 수많은 사람들의 이야기에 따르면 얘는 그렇게 쓰는 게 아니라고 하더라. 숫자와 move, operation 등을 조합하여 적은 타이핑으로 효과적인 편집을 할 수 있고, 심지어 매크로까지 간편하게 실행할 수 있는 훌륭한 편집기라고. 그래서 이참에 새롭게 다시 배워보기로 했다. 추후에 IDE로 활용하는 것까지 생각하고 있으니 Neovim을 새롭게 설치했다.

그리고 nvim 명령어를 실행해봤다.

처음부터 새롭게 배우기 위해 :help nvim 을 눌러 도움을 청하러 들어왔다.

30분 튜토리얼? 당연히 해야지. :Tutor 를 입력하니 마치 게임같은 무언가가 나왔다.

순서대로 따라가면서 빨간 x를 초록 v로 바꾸는 과제를 수행했다. 실습을 하면서 손에 익히도록 만들어줬는데, rust 처음 배울 때 했던 rustlings 가 생각나서 재미있었다. 이제 dd jj p kk.. 를 다섯번 반복하는 대신 5dd jj p 로 깔끔하게 5줄짜리 코드를 복사해서 두줄 아래로 옮길 수 있게 되었다! 조합이 무궁무진하니 머리만 잘 쓰면 진짜 편해질 수 있겠다, 이걸 좋아하는 사람들이 지금도 꽤 많은 이유가 있구나 싶었다.

이 tutorial을 마치면 맨 마지막에 이런 안내가 나온다.

# CONCLUSION
  
  This was intended to give a brief overview of the Neovim editor, just enough to
  allow you to use it fairly easily. It is far from complete as Neovim has
  many many more commands. Consult the help often.
  There are also countless great tutorials and videos to be found online.
  Here's a bunch of them:
  
  - Learn Vim Progressively:
     https://yannesposito.com/Scratch/en/blog/Learn-Vim-Progressively/
  - Learning Vim in 2014:
    https://benmccormick.org/learning-vim-in-2014/
  - Vimcasts:
    http://vimcasts.org/
  - Vim Video-Tutorials by Derek Wyatt:
    http://derekwyatt.org/vim/tutorials/
  - Learn Vimscript the Hard Way:
    https://learnvimscriptthehardway.stevelosh.com/
  - 7 Habits of Effective Text Editing:
    https://www.moolenaar.net/habits.html
  - vim-galore:
    https://github.com/mhinz/vim-galore
    
If you prefer a book, Practical Vim by Drew Neil is recommended often
  (the sequel, Modern Vim, includes material specific to Neovim).

이렇게 링크를 추천해준다. 나는 Learn Vim Progressively 아직 이거 하나 읽었는데 새롭게 배우는 게 많았다. 앞으로 남은 글들도 공식 tutor에서 안내해주는 만큼 가치가 있으리라 생각하고 읽어보려고 한다.
https://yannesposito.com/Scratch/en/blog/Learn-Vim-Progressively/
https://benmccormick.org/learning-vim-in-2014/
http://vimcasts.org/
http://derekwyatt.org/vim/tutorials/
https://learnvimscriptthehardway.stevelosh.com/
https://www.moolenaar.net/habits.html
https://github.com/mhinz/vim-galore

어쨌건 이러한 과정을 통해 새롭게 활용할 수 있는 도구(명령어)를 많이 얻었는데, 아직 다 외우지는 못해서 일단 많이 쓸 것 같은 단축키를 따로 정리한 뒤 스크린샷으로 찍어 바탕화면에 저장해놨다. 프린트해서 옆에 붙여두면 더 좋겠는데 집에 프린터가 없어서...

Neovim IDE

이제와서 이렇게 열심히 vim 명령어를 익히는 이유는 Neovim이 단순 편집기를 넘어 개발환경처럼 써보고 싶었기 때문이다. Vscode보다 훨씬 빠르고 가볍다, code assistant도 copilot도 다 된다는 얘기를 들었을 때부터. 터미널 안에서 그런 것들이 동작하는 걸 한번도 써 본 적이 없어서 궁금하기도 하고 재미있어 보여서 편집기가 조금 익숙해지자마자 플러그인을 설치하여 개발환경을 만드는 방법을 찾아봤다.

처음엔 어디에선가 설정 프리셋을 가져와서 그대로 쓰면 되겠지? 라고 생각했지만 역시나 그렇게는 어려웠다. (이 글을 그때 봤었더라면 아마 AstroVim, Ecovim 이런거 가져다 썼을텐데 그때는 못찾아서..) 이런 저런 게시글과 stackoverflow, reddit의 글을 읽어봤는데 뭔지 모르는 설정이 잔뜩 있어서, 아무거나 다 복붙했다가 안되면 되돌리지도 못하겠다 싶어 결국 하나씩 뭔지 알아보면서 설치하기로 했다. 백수가 남는게 시간이지.

설정의 뼈대를 잡는 데에, 개념을 이해하는 데에 아래 게시글을 참고했다.
https://velog.io/@mythos/Linux-neovim-설정-CoC-Vim-Plug-treesitter-NERDTree
https://iiibreakeriii.github.io/Post15(Neovim_Configuration)
https://github.com/krapjost/nvim-lua-guide-kr
처음 설정파일의 구조를 잡은 후에는 각 플러그인(lualine, NERDTree, lsp, coc 등)의 공식 문서나 repository의 readme를 참고하여 조금씩 내가 쓰기 좋은 환경으로 맞췄다.

결과적으로 설정 파일이 아래와 같이 구성되었다. 아래 사진은 이 설정파일을 neovim으로 편집하는 모습이다. 테마도 맘에드는 것으로 골랐더니 어쩐지 좀 더 정이 간다.

Trouble shooting

설정을 적용하는 과정 자체가 프로그램의 사용이지만 동시에 코딩이기도 해서, 문제가 생겼을 때 대응하는 과정이 마치 디버깅과 비슷했다.

플러그인 설치를 해야 동작한다

설정파일을 작성한 후 vim editor에서 :PlugInstall 을 해서 플러그인을 설치해야 한다. 설치하지 않으면 설정 파일을 작성한 것만으로는 아무 일도 일어나지 않는다.(지금 보니 너무나 당연하지만 어이없게도 처음엔 '파일 다 썼는데 왜 안되지..?' 할 수도 있다.)

잘못된 lsp 설정 확인하기

편집하려고 특정 파일을 열었을 때, 해당 확장자에 해당하는 lsp에 설정에 문제가 있는 경우 에러가 뜬다. 나에게 문제가 생겼던 상황을 아래 나열했다.

오타

말 그대로. https://github.com/neovim/nvim-lspconfig/blob/master/doc/configs.md 여기에 없는 옵션은 쓸 수 없다.

install을 하지 않음

설정 페이지에 보면 npm install이 필요한 애들이 가끔 있는데, 그런 경우 설치 없이 그냥 쓰려고 하면 에러가 발생한다.

*.lua 와 *.vim

사용하다 보면 특정한 요구사항이 생기는데, 그 요구사항을 인터넷에 검색하면 사람들이 만들어 둔 여러 설정 코드가 나온다. 그런 설정코드를 내 설정파일에 적절하게 끼워넣으려면 설정파일(언어) 의 형태가 여러개라는 사실을 알아야 한다. vim의 설정은 *.vim, *.lua 코드가 대체로 많이 쓰이는데(그 외에도 몇개 더 있는 것 같은데, 이 두가지가 가장 레퍼런스 찾기에 좋았다) vim 파일이 같은 코드를 써도 좀 길고 복잡하게 써야 하는 반면 lua는 좀 더 간편하게 코드를 작성할 수 있다. 대신 lua에서는 vim 형식의 코드를 사용할 수 없지만, vim 에서는 아래와 같이 특정 구문으로 감싸 lua 코드를 사용할 수 있다. 아래 코드는 init.vim 에서 lua 코드를 사용하는 예시이다.

lua << EOF
-- https://www.mitchellhanberg.com/modern-format-on-save-in-neovim/
vim.api.nvim_create_autocmd("LspAttach", {
	group = vim.api.nvim_create_augroup("lsp", { clear = true }),
	callback = function(args)
		vim.api.nvim_create_autocmd("BufWritePre", {
			buffer = args.buf,
			callback = function()
				vim.lsp.buf.format { async = false, id = args.data.client_id }
			end,
		})
	end
})
EOF

그런데 막상 써봤더니 구문 init.vim 내부 lua코드의 highlight가 이상하게 동작하는 문제가 있었다. 그래서 결국 별도 lua 파일로 빼서 사용하고 있다. (뭐가 문제인지는 아직 잘 모르겠다. *.vim 을 해석하는 lsp 설정 문제일까? 구문 highlight도 lsp를 사용할 것 같은데. lua 파일에 작성했더니 이번에는 global에 정의되지 않은 vim을 사용한다며 에러를 띄운다. 동작은 잘 해서 그냥 두고 있긴 한데, 무언가 다른 설정이 더 필요한가 싶다.)

Tab indent 간격이 너무 넓다면

nvim의 기본 설정은

1. tab을 눌렀을 때 tab문자 삽입
2. tab문자가 space 8개 만큼의 너비로 보이도록 지정

이라서 평소 space 2개 간격의 indent를 사용하던 프론트엔드 개발자인 나에게는 화면이 굉장히 불편하게 보였다. 그래서 tab indent 간격을 변경하고 싶은데, rust 개발도 할 거라(rust에서는 4 space가 일반적이라고 하더라), 프론트엔드 개발(.ts, .js, .tsx, .jsx 등) 을 할 때만 2개의 space 문자가 tab을 대체했으면 했다. tab의 간격 관련 설정은 https://neovim.io/doc/user/options.html#'tabstop' 여기를 참고했다. 나는 3번 옵션을 따라가기로 했다.

(*.vim 에서 주석은 " 로 쓴다)

" tab 입력 시 tab 문자 대신 space가 입력되도록 설정. 반대의 경우 noexpandtab 을 사용한다.
set expandtab

" tab 문자 하나가 space 몇개 만큼의 너비로 보이도록 지정할 것인지 설정. 
set tabstop=4
set shiftwidth=4

" 프론트엔드 코드 편집 시 2 space 간격을 사용한다.
autocmd FileType typescript,typescriptreact,javascript,javascriptreact,html,xml,svg,css setlocal shiftwidth=2 tabstop=2 

autocmd 관련 문서

Reindent on save (format on save)

https://www.mitchellhanberg.com/modern-format-on-save-in-neovim/
이 게시글을 참고해서 lsp.lua 에 코드를 추가해주었다.

아직 해결하지 못한 것

vscode를 쓸 때 code snippet을 아주 편리하게 사용했는데, vim에도 분명 그런 게 있을 것 같은데 아직 찾아보지 못했다. 그거까지 되면 진짜로 vscode보다 더 편리해질 수도 있겠다.

배운 것과 느낌 점

1. GUI의 위대함을 새삼 느꼈다. 만약 vscode같은 애들이 없었다면 이 지난한 과정을 견딜 수 있는 사람만 개발을 했을 테니 지금보다 개발자의 숫자가 압도적으로 적었을 것이다. iTerm2 + Neovim + 각종 플러그인 조합으로 사용했을 때 터미널 내부에서 마우스의 드래그나 클릭이 먹히는 걸 보면 CUI에서 GUI의 중요성을 많이 받아들여 확장했다는 느낌이 들었다(터미널에서 클릭 되는거 너무 신기했다!).

2. 생산성이 향상되었는지는 아직 잘 모르겠다. 오히려 프로젝트를 할 때, 뭐 하나 할 때마다 자꾸 딴길(nvim)로 새서 생산성이 떨어지는 느낌이다. 뭘 구현하더라도 기승전nvim개선 으로 빠지게 되어서 아직까지는 프로젝트를 진행하는 데에 방해가 되는 느낌이다. 결과물을 빠르게 만들 목적으로 하나에 집중하는게 아니라, 게임으로 치면 스탯을 나눠 찍는 꼴이다. 그래도 nvim 개발환경이 점점 안정화됨에 따라 프로젝트에 좀 더 집중할 수 있게 되고, 종래에는 효율적으로 명령어를 활용하며 빠르게 개발을 할 수 있지 않을까 하는 희망이 보여서 왠만하면 vscode로 돌아가지 않고 nvim에 붙어있는 중이다.

3. 아주 재미있다. 이전에는 게임 접속해서 그냥 플레이만 하던 유저였는데, 이제는 게임 접속해서 플레이하면서 게임 동작 매커니즘을 이해하고 그 게임을 커스터마이즈하면서 즐기는 유저가 된 느낌다. 난이도가 높아진 만큼 재미있어졌다.

4. 대충 뭉뚱그려서 어떤 한개의 기능 이라고 생각했던 것들의 세부 동작을 들여다보고 이해하게 된다. '코드 잘못된 부분 밑줄그어 주는 기능'을 language server protocol 이라는 플러그인을 직접 설치하고 설정하는 과정을 거치면서 해당 기능의 동작 과정을 생각해보고 찾아보며 이전보다 깊게 이해하게 되는 것이다. 자동차의 설명서만 읽은 경우에는 문제가 생기면 단순히 가이드에 쓰여있는 대응만 할 수 있겠지만, 자동차의 내부 구조를 이해하고 있는 사람은 문제가 생기면 해결에 가까운 무언가를 할 수 있을 것이다. IDE를 잘 이해하고 있는 사람은 vim 뿐만 아니라 vscode를 사용하다가 문제가 생기더라도 해결에 더 가까워질 수 있지 않을까 생각한다.

5. 그럼에도 불구하고 확실히 복잡하고 어렵다. 만약 친구한테 추천한다면 생산성이 매우 높아지니 해보라는 얘기보다(그런날이 언제 올지 몰라서..), 재미있으니까 한번 해보라고 추천해줄 것 같다. 재미를 붙여 계속 가지고 놀다보면 언젠가 vim 덕에 생산성이 높아지는 날이 올지도?

---

이 과정을 통해 만들어진 vim config는 여기에 올려두었다. 필요하신 분은 참고하시길!

---