Vim

Vim 입문기

어쩌다 Vim을 쓰게 되었나요?

  • 생산성을 높이기 위해서 Vim을 쓴다는 얘기를 어디선가 듣게 되었습니다.
  • 개발하는 주변 친구들도 한 번씩은 써본 경험이 있고, 회사에 Vim을 쓰는 동료들도 있다고 들었습니다.
  • 개발 공부를 처음 시작할 때부터 VS Code로 시작해 항상 VS Code만 써왔는데, 혹시 Vim이 이를 월등히 뛰어넘는 좋은 대안이 될 수 있지 않을까 기대를 품고 정보를 찾기 시작했습니다.

입문하기 위해 파고들 때 미리 알았으면 좋았을 것

  • Vim은 단순 텍스트 편집기입니다.
  • neovim, 또는 nvim은 Vim 기반으로 다양한 플러그인을 통해 확장해 쓸 수 있는 프로그램입니다.
    • nvim는 내장 플러그인 netrw를 통해 파일 탐색기 기능을 제공합니다. 터미널에서 $ nvim .을 찍으면 현위치에서 netrw를 열어줍니다. 이를 통해 VS Code에서 폴더를 여는 것과 같은 상태가 됩니다.
    • 따라서 ‘Vim을 활용해 개발하고 싶다’면 nvim을 써야합니다. 이를 세팅하는 자세한 내용은 다음 포스팅에 작성하고자 합니다.

처음으로 찾은 정보

  • Vim 제대로 가르쳐 줌 🤓 (개발자라면 한번쯤 꼭 쓴다는 Vim)
    • 드림코딩 영상은 항상 무난히 잘 정리된 정보를 줍니다.
    • Vim이 마우스 사용 시간을 현저히 줄여주는 편집기라는 사실을 이때야 알았습니다.
    • 한평생 마우스와 살았고, 여러 단축키 조합으로 괜찮은 코드 작성 속도를 내고 있다고 생각했는데, 이를 떠나는 게 맞는 건가 생각해봤습니다.
    • Vim이 이런 거구나하고 알아보기엔 적당한 영상이라고 생각하지만, ‘그래서 이걸 왜 쓸까’라는 생각을 지우긴 쉽지 않았습니다.
    • 그래도 이를 활용하는 사람들이 있다면 분명 이유가 있을 거라 생각하며 더 파고들었습니다.

적응한 과정

  • VS Code에 Vim 플러그인 설치
    • VS Code를 똑같이 쓰지만, 편집 기능을 활용할 때 Vim과 유사한 느낌으로 코드를 작성할 수 있습니다.
    • 처음부터 터미널 속으로 들어가려면 그 전에 알아야 할 것들도 많고, 익숙하지도 않기 때문에 잠시나마 이를 통해 적응 기간을 가질 수 있어 좋았습니다.
    • 처음에는 굉장히 어색해서 500B짜리 문제 풀이 코드를 짜는 데 정말 많은 시간을 들였습니다. 아마 많은 분들이 Vim을 사용하려고 했다가 이런 끔찍한 뇌정지를 경험하고 관두게 될 것 같단 생각도 했습니다.
  • vimtutor
    • 가장 빠르게 중요한 기능을 둘러볼 수 있는 방법이라 생각합니다.
    • Vim을 설치할 때, 전체 파일에 대해 설치를 했다면 터미널을 열고 $ vimtutor라고 입력하는 것으로 Vim 튜토리얼을 진행할 수 있습니다.
    • 튜토리얼을 진행하면서 Vim의 기본 동작에 대해 이해할 수 있습니다.

반드시 익혀야 할 필수 조작법

  • h, j, k, l - 각각 좌하상우로 커서를 움직입니다.
  • i, I, o, O, a, A - 편집모드 진입하는 방법들입니다.
  • esc, ctrl + [ - 노말모드로 빠져나오는 escape 동작 키입니다.
  • :q, :w, :wq, :q!, :w! - 편집 중인 파일에 대한 종료(q), 저장(w) 그리고 강제 명령(!)입니다.
  • /{wordToFind}, ?{wordToFind} - wordToFind에 대한 하향식, 상향식 탐색을 수행할 수 있습니다.
  • c, d, y - 명령. 이후 vim motion을 통해 동작을 수행하여 내용을 바꾸거나(c, change) 지우거나(d, delete) 복사(y, yank)할 수 있습니다.
    • 이를 한 줄에 대해 수행하기 위해서 yy, dd 명령이 있습니다.
    • 이를 y2j나 d5k와 같은 식으로 응용하면 아래로 2j 위치에 있는 줄까지 복사하고, 위로 5k 위치에 있는 줄까지 지울 수 있습니다.
  • i, a - in과 관사 a를 뜻하며, daw, ci(와 같이 활용될 수 있습니다.
    • daw: 한 단어를 지운다.
    • ci(: 괄호 안에 있는 내용을 변경한다.
  • f, t - forward와 to로, 현재 위치부터 지정하는 문자의 위치까지 커서를 블록지정해줍니다.
    • dfz: 현위치에서 우측에 최초로 발견되는 z를 포함한 블록을 지운다.
    • yt(: 현위치에서 우측으로 최초로 발견되는 여는 괄호 전까지의 내용을 블록처리하고 복사한다.
  • v, V: 각각 visual 모드와 visual line 모드로 진입합니다.

필수 참고자료


그래서 Vim을 왜 쓰나요?

  • 이 시점에서 말할 수 있는 건 ‘재밌다’ 뿐입니다. 키보드로 커서를 조작하는 명령을 내리고, 이를 편집 명령과 조합하여 활용하는 과정 자체가 작은 게임을 하는 것 같습니다.
    • 다만, 그냥 익숙하게 기본 명령만을 활용해서 편집을 다 진행하고자 하면 당연히 불편할 수밖에 없습니다.
    • 훨씬 많은 키를 눌러야 하고, 그럴 바엔 차라리 마우스로 원하는 만큼 드래그를 한 뒤 복사나 붙여넣기를 하는 게 편할 것입니다.
    • 그러니 배운 명령들을 잘 활용하고 있는지 한 번씩 점검하며, 잊고 있던 단축키를 다시 확인하는 과정이 반드시 필요하다 생각합니다.

Vim에 대한 의견들과 그에 대한 생각

  • 다들 Vim에 대해서 다른 의견을 말합니다. 누구는 불편하고 구세대의 유산이며, 마우스로도 동일한 작업을 충분히 빨리 할 수 있는데 왜 써야 하는지 모르겠다는 의견도 많습니다.
  • 개인의 숙련도에 따라 다를 수밖에 없겠지만, 정말 Vim을 통해 빠른 개발이 가능한지는 좀 더 두고 볼 일인 듯합니다.
  • 또한, 새로운 것에 대한 모험을 할 필요성을 못 느낀다면 차라리 지금 쓰고 있는 툴을 마스터하는 게 더 도움이 될 것이라 생각합니다.

맺음말

  • 저는 현재는 nvim 세팅까지 한 상태입니다.
  • 한동안은 이 환경으로 개발하고 공부하는 과정을 진행해보고자 합니다.
  • 다음 Vim에 대한 포스팅은 nvim을 설정하는 과정에서 겪은 것들에 대해 작성해보고자 합니다.

블로그 시작하기

블로그 구현체 선택

  • 블로그는 크게 네 분류로 나눌 수 있습니다.

    1. 대형 포털사이트 블로그 서비스: 이제는 네이버 계정에 자동으로 생성되는 네이버 블로그만 남은 듯합니다. 대형 포털 자체가 접근성이 굉장히 좋기 때문에 아주 손쉽게 블로그를 시작할 수 있다는 점에서 좋다고 생각합니다.
    2. 블로그 전문 사이트: 티스토리, 브런치와 같은 국내 블로그 특화 서비스와 블로거, 미디엄과 같은 해외 블로그 특화 서비스가 있습니다.
    3. 개인 사이트: 도메인을 구매해서 직접 서버를 구축하고, 그 안에 블로그가 동작하도록 구현할 수 있습니다.
    4. 깃허브 페이지: Github 저장소(repository)를 기반으로 웹 페이지를 만들 수 있습니다.

  • 따로 알아볼 게 적고, 포스팅하기 쉬울수록 자유도는 떨어집니다. 또한, 제가 블로그 포스팅을 작성할 날이 다른 블로그 서비스들의 수명보다 길다고 생각하기 때문에, 만에 하나라도 함께 했던 서비스가 종료하게 되면 해당 내용을 옮기는 등의 큰 문제가 발생할 수 있다고 판단했습니다.

  • 이에 따라 깃허브 페이지(깃허브가 망하면 없어져버리겠지만 그러면 개발자라는 직업 자체가 없어진단 말이겠죠?)를 통해 블로그를 만들어보기로 했습니다.


깃허브 페이지 | 프레임워크 선택

  • 깃허브 페이지를 활용해 밑바닥부터 HTML을 짜고 포스팅을 만들 수 있겠습니다만, 작업량이 굉장히 많을 것으로 예상했습니다. 제 정적 포트폴리오를 클론코딩하는 데도 굉장한 수고가 들어갔기 때문에 거기에 게시판 기능을 추가하고, 게시글 작성하듯 포스팅을 하는 상상을 해보긴 했습니다만, 노력에 비해서 퀄리티가 나오지 않을 것이 분명했습니다.

  • 블로그와 같이 모든 사람에게 동일한 내용을 보여주는 사이트의 경우 정적 사이트 생성기(static site generator, SSG)를 통해 작업하는 것이 굉장히 수월하다는 정보를 얻었습니다.

  • 정적 사이트 생성기는 모던 웹 개발 트렌드 중 하나입니다. 이와 동일선 상에 있는 트렌드로는 서버사이드 렌더링과 싱글 페이지 어플리케이션이 있습니다. 해당 개념들에 대해선 다음 블로그 내용을 참고했습니다: 링크 - SPA와 SSG, 그리고 SSR.

  • 그래서 이 정적 사이트 생성기 중 어떤 것을 활용할 수 있을지 알아봤습니다. 이때 참고한 자료는 다음과 같습니다: 링크 - 정적 사이트 생성기로 나만의 블로그 시작하기.

  • WordPress는 종합적인 웹 사이트를 만들 때 적합하다고 합니다. 그만큼 기능도 많고 복잡합니다. Jekyll은 Github Pages에서 공식적으로 지원하는 점 역시 매력이라 생각합니다. Hexo는 예쁜 테마와 유용한 플러그인이 많다고 합니다. 그리고 npm 베이스라서 node.js를 활용했던 경험을 살려 작업할 수 있는 부분도 있으리라 기대했습니다. Gatsby는 React와 GraphQL을 알아야 사용이 편하다고 합니다. 이는 분명 제약사항으로 다가올 것이라 생각했습니다.

  • 고민 끝에 일단 Hexo를 선택했습니다. 아직 알고 있는 정보가 많지 않고, 일단은 써보면서 불편함이나 편리함을 직접 느껴보면 나중에 다른 프레임워크로 넘어갈 이유를 스스로 찾게 될 것이라 생각했습니다.


Hexo 튜토리얼

  • 한글 튜토리얼 쓰지 말자
    • 헥소 튜토리얼을 진행하는 과정에서 배운 점이 있다면, 앞으로는 절대 한글 튜토리얼을 참고하지 말아야겠다는 것이었습니다. 많은 사람들이 활용하는 영어가 가장 먼저 업데이트되는 것은 당연합니다. 심지어 한글로 제공된 튜토리얼 내용은 옛날 내용이라 이제는 필요 없는 작업을 추가로 요구하기도 했습니다. 특히, Travis CI에 대한 내용이 한글 튜토리얼에는 남아있는데, 영어 튜토리얼에선 없어져서 굉장히 당황했었습니다. 때문에 앞으로는 이런 점을 염두에 두고 불편하더라도 영어로 제공된 튜토리얼을 따라 작업을 진행하고자 합니다.
  • 영어 튜토리얼 내용: 다음 링크를 참고하면 크게 어렵지 않게 hexo를 초기화할 수 있습니다. 링크 - Getting Started | Hexo
  • 직접 쓰면서 느낀 헥소의 강점은 다음과 같습니다.
    • 마크다운 형식의포스팅을 지원한다: 오늘 공부한 내용을 작성할 때도 그렇고, README.md를 작성할 때도 항상 마크다운 형식으로 문서를 작성했었는데, 이를 예쁘게 다듬어서 포스트로 만들어주는 부분은 굉장한 매력입니다.
    • 깃허브 페이지와 연동해 저장소(repo)에 저장된 내용을 hexo deploy 명령만으로 갱신할 수 있다: 직접 해보니 포스팅을 작성하거나 블로그 테마를 업데이트 한 후에 git push origin main으로 깃허브에 밀어넣고, hexo clean과 hexo deploy로 해당 내용을 갱신하는 것으로 동작을 마칠 수 있었습니다.

맺음말

  • 물론 대형 포털사이트의 블로그를 작성하는 것보다 손이 많이 가는 건 당연합니다. 그럼에도 익숙해진다면 후에 더 예쁜 테마로 블로깅을 할 수 있을 거라 생각합니다. 또한, 이를 통해서 분명히 더 배우게 되는 것들도 있을 겁니다. 이같은 부가적인 효과도 기대하며 앞으로 포스팅을 진행하고자 합니다.
  • 블로그를 설정하면서 수행했던 설정들은 다음 포스팅에서 다루고자 합니다.

첫 포스팅입니다

개발자가 되고자 마음먹은 후, 지금까지 깃에다가 하루에 어떤 것들을 공부했는지 작성해왔습니다.
그러던 중에 공부했던 내용을 좀 더 공개적인 곳에 정리해서 올리는 게 좋겠단 생각이 들었고, 고민 끝에 블로그를 작성하기로 결정했습니다.

블로그 명은 다음 의미를 갖습니다:

  • 포터: 고등학교 친구들이 불러주는 별명입니다.
  • 꾸현일기: 꾸현이라는 단어는 꾸준히 하는 구현, 꾸역꾸역하는 구현이라는 의미로 지었습니다. 이를 하루하루 기록하는 일기라는 뜻입니다.

이 포스팅을 시작으로, 마주한 문제들과 이를 풀이한 과정에 대해서 포스트를 작성하고자 합니다.
그중 가장 먼저 블로그 플랫폼을 선택한 과정과 그 과정에서 겪은 시행착오, 배운 점을 작성해보려 합니다.