IT 이야기

심심해서 그냥 끄적이는 나의 개발환경

트리맨스 2022. 10. 6. 01:11
반응형


나는 주로 NodeJS 기반의 서버를 개발하는 사람이다. qt, flask, serverless 등의 프레임워크를 사용했지만, 지금 주로 사용하는 것은 NestJS다. 이에 맞게 나의 개발환경은 주로 Typescript를 사용하는 것에 초점이 맞춰져 있다. 여기에 하드웨어는 맥북을 사용하고 있다. 역시 개발은 맥북으로 해야 퍼포먼스가 나는 것 같다. 사실 스타벅스 출입증이 생겨서 카페갈 때 자신감이 생긴다.

이 정도는 해야 간지가 난다.


여튼 영세한 일반 개발자인 나는, 개발환경 이라도 잘 구축해야 그나마 생산성이 난다고 생각해서 이것저것 주워들은걸로 개발환경을 좀 꾸며놨다. 그래서 그런지 나한테는 그럭저럭 개발할 만한 환경이 되어 있다.

MAC 환경


맥북을 개발도구로 쓴다는 것은 좋은 선택임과 동시에, 한글 작업에 강제 억제기를 다는 불행한 선택임에 틀림없다. 맥북을 쓰게 되면 한글 프로그램을 매우 경멸하게 된다. 본인은 아직 대학생이여서 한글을 종종 쓸 때가 있다. 그럴 때마다 WOL로 집에있는 컴퓨터 키고... RDP로 원격 데스크톱 열고...한글 파일 수정하고 아주 그냥 고생이다. 여튼 맥은 서버 개발자 및 웹 개발자 입장에서는 상당히 좋은 도구이다. 하지만 당연하게만 되는 줄 알았던 기능이 맥에서는 안되는 경우가 참 많았다. 그래서 커스텀할 항목들이 꽤 많았다. 하나씩 둘러보자.

일단 트랙패드는 포인트 및 클릭 - 탭하여 클릭하기를 하고 있다. 트랙패드가 아무리 진동 피드백이 좋다 한들, 꾹 눌러서 클릭하는 것은 장기적으로는 손목에 무리를 준 경험이 있다.

미션 컨트롤은 네 손가락으로 쓸어올리기, 세 손가락은 드래그로 사용하고 있다. 세 손가락 드래그는 손쉬운 사용 - 포인터 제어기 - 마우스와 트랙패드 - 드래그 활성화 - 세 손가락으로 드래그하기를 클릭하면 된다.

생산성의 향상!


맥북 메인 화면을 볼 때 가장 빨리 보이는 것은 하단의 독(dock) 이다. 근데 이거 14인치 이하의 맥북에서는 걸리적거린다. 이거 빨리 없애주자. Dock 설정 - 자동으로 Dock 가리기와 보기를 설정한다.
이러면 독이 숨겨지지만, 독이 올라오는 속도가 너무 느리다. 사탄 들린 속도이다.

회개 합시다. (넷플릭스)

독이 올라오는 속도를 빠르게 하자.

defaults write com.apple.dock autohide-time-modifier -float 0.2;killall Dock

-float 다음에 오는 숫자가 독이 올라오는 속도인데, 0에 가까울수록 빠르다. 0은 딜레이가 없다.

모니터 해상도 같은 경우에는 해상도 조절 - 추가 공간으로 항상 설정한다. 이렇게 하면 글자가 더럽게 작아진다. 하지만 걱정마라. 애플리케이션 단에서 크기를 조절할 수 있다. command + '+' 버튼을 누르면 애플리케이션 단에서 글자가 커진다. 이런 설정이 나름 나쁘지는 않은 것 같다. 물론 이건 각자 눈 건강에 따라서 알아서 커스텀 해야 한다.

맥을 쓰면서 기본 유틸리티로는 부족한 것들이 꽤 있다. 이러한 아쉬운 점을 가려주는(내가 사용중인) 유틸리티들이다.

1. AlDente
https://github.com/davidwernhart/AlDente

GitHub - davidwernhart/AlDente: macOS tool to limit maximum charging percentage

macOS tool to limit maximum charging percentage. Contribute to davidwernhart/AlDente development by creating an account on GitHub.

github.com

배터리는 원래 100% 충전하면 수명이 닳는다 카드라. 그래서 충전을 항상 80%에 맞춰주는 앱이 있다. 이걸 쓰면 유저가 설정한 배터리 한도까지만 충전이 되게 해준다. 이걸 계속 쓰다보면 배터리가 정신 못차릴때가 종종 있는데, 그냥 시원하게 100% 충전해주면 된다.

2. Scroll Reverser
https://pilotmoon.com/scrollreverser/

Scroll Reverser

Per-device scrolling preferences for MacOS.

pilotmoon.com

맥과 윈도우의 스크롤 매커니즘은 조금 다른가 보다. 트랙패드하고 마우스의 스크롤 방향이 체감상 바뀌었다는 기분이 많이 든다. 근데 이거를 마우스와 트랙패드 따로 분리할 수 있는 기본 설정이 없다. 그래서 이걸로 마우스와 트랙패드 방향을 일치(하는 기분이)하게 할 수 있다.

3. Karabiner
https://karabiner-elements.pqrs.org/

Karabiner-Elements

A powerful and stable keyboard customizer for macOS.

karabiner-elements.pqrs.org

맥북은 윈도우와 다르게 한영키가 따로 없다. 기본값이 아마 caps나 command + space 였던거 같은데, 이거 상당히 불편하다. 그래서 오른쪽 commnad키를 한영 키로 따로 지정할 수 있다. 이 동작을 하기 위해서는 키를 샤로 매핑햐야 하는데, 이를 도와주는 앱 karabiner이다. 간단히 설명하면, 오른쪽 command를 f17같이 안쓰는 키로 지정하고, 언어 변환 키를 f17키로 지정하면 된다.

4. Rectangle
https://rectangleapp.com/

Rectangle

Donate Sponsor on GitHub Github Silver Sponsors @Crow-EH, @haffmaestro, @svelle, @chris-short, @rgmz, @alexblackie, @andymoe, @ilovept, @dysolution, @Saziba, @aldegoeij, @PeetMcK

rectangleapp.com

윈도우는 창을 오른쪽이나 왼쪽으로 끌면 양쪽으로 알아서 정렬이 된다. 하지만 맥은 그딴거 없다. 그래서 이러한 설정을 하기 위해 Rectangle이란 앱을 사용한다. 머시기 저시기 이런저런 앱들이 많은데, 유료+기능미달로 후보에서 다 떨어졌다. 이거는 그냥 설치하고 control + option + 방향키 누르면 오른쪽 왼쪽 위 아래 알아서 정렬이 된다. 추가 기능도 꽤 있다. 갠적으로매우 편했다.

5. runcat
https://kyome.io/runcat/index.html?lang=en

Title

kyome.io

mac도 작업관리자가 있긴 하지만, 기왕이면 편한거 쓰자. runcat은 사용자 컴퓨터의 cpu 사용률에 따라서 인디케이터가 빨라진다. 그냥 작업관리자 봐도 되는데, 이걸 왜 쓰냐? 첫번째로 편하다. 두번째로 귀엽다.

실사



터미널 환경


사실 터미널 환경은 진짜 별 거 없다. 국룰 패키지 관리자 homebrew와 터미널 커스텀을 위한 powerlevel10k, 마지막으로 vim을 약간 커스텀했다. iTerm이라는 터미널 프로그램도 있지만, React Native 디버거와 충돌하는 이슈가 있어서 그냥 기본 터미널을 쓴다.

간지나는 근-본 vim
결과물은 나쁘지 않다. 간지나는 사과를 그려주는 이 프로그램은 neofetch이다.



homebrew는 맥 사용자라면 필수인 패키지 설치 및 관리자이다. 리눅스의 apt, apk, yum과 비교하면 될 듯 함. 설치는 아래 페이지에서 하면 된다.
https://brew.sh/

Homebrew

The Missing Package Manager for macOS (or Linux).

brew.sh



powerlevel10k 설치는 간단히 구글링하면 나온다. 다른분이 알아서 잘 설명해 주시리라 믿는다.
https://velog.io/@t1won/Ubuntu-powerlevel10k-%EC%84%A4%EC%B9%98

[Ubuntu] powerlevel10k 설치

터미널을 위와 같은 모습으로 꾸밀려면 powerlevel10k 테마를 설치해야 한다. 1. zsh 설치 기본 셸을 zsh로 바꿔준다 2. oh my zsh 설치 oh my zsh 3. powerlevel10k 클론 및 폰트 설치 p10k 저장소를 clone

velog.io


vim 설정은 솔직히 기억조차 잘 안나고, 아마도 한국인 개발자가 만든 vin-plug를 사용했던 것으로 기억한다. neovim이라는 고오-급 vim도 있지만, vscode와 충돌이 있어서 지금은 안 쓴다. 여하튼 그냥 나의 .vimrc 파일만 공유만 한다.

set nu

" Plugins will be downloaded under the specified directory.
call plug#begin(has('nvim') ? stdpath('data') . '/plugged' : '~/.vim/plugged')

" Declare the list of plugins.
Plug 'tpope/vim-sensible'
Plug 'junegunn/seoul256.vim'
Plug 'honza/vim-snippets'
Plug 'tpope/vim-fugitive'
Plug 'bling/vim-airline'
Plug 'kien/ctrlp.vim'

" List ends here. Plugins become visible to Vim after this call.
call plug#end()



vscode


나는 개발환경으로 vscode를 쓴다. 이유는...우리회사에서 이걸 쓰기 때문이다. IDE같은 경우에는 나 혼자 개발하면 어떤 것이든 써도 상관 없는데, 팀으로 일할 때는 해당 팀에서 쓰는 IDE를 쓰는게 정신건강에 좋다. 내가 꼭 특별한 IDE를 써야만 하는 경우가 아니면, 팀에서 쓰는 거 쓰면 된다. 보통 웹/Node 개발자들은 vscode 쓰고, 자바 계열 개발자들은 인텔리제이 쪽 IDE를 쓰는 것 같았다.
여하튼, 내가 사용하는 대표적인 확장 프로그램만 몇개 추려 볼까 한다.

1. Auto Rename Tag
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

Auto Rename Tag - Visual Studio Marketplace

Extension for Visual Studio Code - Auto rename paired HTML/XML tag

marketplace.visualstudio.com

HTML 태그의 짝을 알아서 맞춰준다.

2. ESLint
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

ESLint - Visual Studio Marketplace

Extension for Visual Studio Code - Integrates ESLint JavaScript into VS Code.

marketplace.visualstudio.com

prettier와 더불어 JS의 린팅을 담당하는 2대장 중 하나.

3. Github Copilot
https://marketplace.visualstudio.com/items?itemName=GitHub.copilot

GitHub Copilot - Visual Studio Marketplace

Extension for Visual Studio Code - Your AI pair programmer

marketplace.visualstudio.com

AI가 코드를 추천해준다. 사용해보니 코어 로직은 내가 작성하는 게 맞고, 노가다 작업들 (if 분기문, enum 리스트 등등)에 대해서는 문맥 해석이 꽤 잘되는 것 같아 보였다. 신기한건 주석을 적으면 주석의 내용을 해석해서 코드를 추천한다는 점이였다. 실용적이기보다는 신기한 정도? 현재 GPT-3 모델이라는데, GPT-4가 되면 어떤 퍼포먼스를 보일지 기대가 되기보다는 좀 무섭다.

4. GitLens
https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

GitLens — Git supercharged - Visual Studio Marketplace

Extension for Visual Studio Code - Supercharge Git within VS Code — Visualize code authorship at a glance via Git blame annotations and CodeLens, seamlessly navigate and explore Git repositories, gain valuable insights via rich visualizations and powerfu

marketplace.visualstudio.com

이거는 이전 커밋과 현재 커밋을 비교할 때 매우 유용하다. 커밋 파도타기도 가능하다.

5. indent-rainbow
https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

indent-rainbow - Visual Studio Marketplace

Extension for Visual Studio Code - Makes indentation easier to read

marketplace.visualstudio.com

들여쓰기된 정도를 무지개색으로 보여준다. 들여쓰기 많은 언어에서 잘 먹힐듯. 이게 만약 Dart에 사용되었다면 모니터에 무지개동산이 펼쳐지지 않았을까 싶다.

이것도 무지개는 맞는데... (에펨코리아)

6. intelliCode
https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode

IntelliCode - Visual Studio Marketplace

Extension for Visual Studio Code - AI-assisted development

marketplace.visualstudio.com

vscode에서 기본적으로 권장하는 확장 프로그램 중 하나. 코드를 추천하는 점에서 코파일럿이랑 비슷하지만, 요놈은 만들어진 파일 내에서 추측한다.

7. Prettier
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Prettier - Code formatter - Visual Studio Marketplace

Extension for Visual Studio Code - Code formatter using prettier

marketplace.visualstudio.com

JS 린팅 2대장 중 하나.

8. Remote-SSH
https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh

Remote - SSH - Visual Studio Marketplace

Extension for Visual Studio Code - Open any folder on a remote machine using SSH and take advantage of VS Code's full feature set.

marketplace.visualstudio.com

EC2에 있는 코드를 수정해야 하는데, vim만으로는 조금 아쉬울 때 사용한다. ssh를 사용해서 원격 환경을 불러온다.

9. Vim
https://marketplace.visualstudio.com/items?itemName=vscodevim.vim

Vim - Visual Studio Marketplace

Extension for Visual Studio Code - Vim emulation for Visual Studio Code

marketplace.visualstudio.com

vim 기능이 그리울 때 종종 사용한다. vscode 에디터에서 vim의 단축키를 사용할 수 있게 한다. 단점은 설치만 해놓고 잘 안씀.

기타등등


아직까지는 딱히 없는 것 같다. 다들 무엇을 개발하는지도 다르고, 내 기준에서만 말하기에는 내 생각을 강요하는 느낌도 피하기 힘들다. 블로그에 올릴만한 기능들은 나중에 추가적으로 업데이트 할 예정이다.

반응형