나의 개발 환경 모음

시작하며

프론트엔드 개발을 하면서 생산성을 높이고 편리한 개발을 위해 사용하고 있는 도구들과 설정을 정리해보았습니다. Mac 환경을 기준으로 작성되었으며, 개발 환경 구성에 도움이 되길 바랍니다.

Rectangle

macOS에서 창을 빠르게 정렬할 수 있는 무료 창 배치 소프트웨어입니다.
아래와 같은 단축키를 통해 작업 공간을 효율적으로 구성할 수 있습니다.

• ⌃⌥ ← : 왼쪽 절반
• ⌃⌥ → : 오른쪽 절반
• ⌃⌥ ↵ : 전체 화면
• ⌃⌥⌘ ←/→ : 왼쪽/오른쪽 모니터로 이동

Spectacle의 후속으로, Spectacle은 더 이상 유지보수가 되지 않아 최신 macOS와 호환성에 문제가 있습니다.
Rectangle은 오픈소스로 지속적으로 업데이트되고 있으며, 사용자 설정도 지원합니다.

• 다운로드: https://rectangleapp.com
• Homebrew: brew install --cask rectangle

VS Code 설정 및 추천 플러그인

code 명령 활성화

터미널에서 code 명령으로 VS Code를 바로 실행할 수 있도록 설정합니다.

1. VS Code에서 ⌘ + ⇧ + P 입력 (Command Palette)
2. "Shell Command: Install 'code' command in PATH" 검색 후 실행
3. 터미널 재시작

이제 터미널에서 code .로 현재 디렉토리를 VS Code로 열 수 있습니다.

나의 VS Code 키보드 단축키 설정

1. VS Code에서 ⌘ + ⇧ + P 입력 (Command Palette)
2. "Preferences: Open Keyboard Shortcuts (JSON)" 검색 후 실행
3. 아래 코드 붙여넣기 후 저장

[
  {
    // 파일 생성
    "key": "cmd+n",
    "command": "explorer.newFile"
  },
 
  {
    // 디렉토리 생성
    "key": "cmd+shift+n",
    "command": "explorer.newFolder"
  },
  {
    // 탭 전환 1
    "key": "ctrl+tab",
    "command": "workbench.action.nextEditor"
  },
  {
    // 탭 전환 2
    "key": "ctrl+shift+tab",
    "command": "workbench.action.previousEditor"
  },
  {
    // 한국어 입력 모드에서도 터미널 열기 단축키 사용
    "key": "ctrl+`",
    "command": "workbench.action.terminal.toggleTerminal"
  }
]

추천 Extension

• Turbo Console Log - 변수를 빠르게 console.log로 감싸기

Node Version Manager - nvm

프론트엔드 개발을 하다 보면 프로젝트마다 다른 Node.js 버전이 필요한 상황을 자주 마주칩니다. 특히 레거시 프로젝트와 최신 프로젝트를 동시에 작업할 때, 또는 특정 패키지가 특정 Node 버전에서만 동작할 때 버전 관리가 필수적입니다.

프로젝트 A  →  Node 14.x
프로젝트 B  →  Node 18.x
프로젝트 C  →  Node 20.x

이렇게 여러 Node.js 버전을 쉽게 전환하며 사용할 수 있게 해주는 도구가 바로 nvm(Node Version Manager) 입니다.

설치는 공식 GitHub 저장소를 참고하세요.

기본 명령어

# Node.js 버전 설치
nvm install 18.17.0
nvm install --lts  # LTS 버전 설치
 
# 설치된 버전 목록 확인
nvm ls
 
# 특정 버전으로 전환
nvm use 18.17.0
nvm use --lts
 
# 현재 사용 중인 버전 확인
nvm current
 
# 기본 버전 설정
nvm alias default 18.17.0

프로젝트별 Node 버전 설정

각 프로젝트 루트에 .nvmrc 파일을 생성하여 필요한 Node 버전을 지정합니다:

# .nvmrc 파일 생성
echo "18.17.0" > .nvmrc
 
# 프로젝트 디렉토리 진입 시 자동으로 버전 전환
nvm use  # .nvmrc 파일의 버전으로 전환
 
# 해당 버전이 없다면 설치 후 사용
nvm install  # .nvmrc 파일의 버전 설치

이제 프로젝트를 전환할 때마다 nvm use 명령어 하나로 적절한 Node 버전을 사용할 수 있습니다. 터미널 설정에 자동 전환 스크립트를 추가하면 디렉토리 이동 시 자동으로 버전이 바뀌도록 할 수도 있습니다.