텍스트 에디터와 브라우저만으로도 기본적인 웹사이트를 만들 수 있지만, React나 Vue 같은 자바스크립트 프레임워크와 Git 같은 유용한 도구를 작업 흐름에 추가하면 한 단계 더 발전할 수 있습니다.
하지만 잠깐! 아직 맥이 준비되지 않았습니다. 본격적으로 시작하기 전에 몇 가지 항목을 미리 설치해 두어야 나중에 혼란스러운 오류를 피할 수 있습니다.
이 글에서는 맥에서 자바스크립트 기반 웹 개발을 시작하는 데 필요한 최소한의 설정 방법을 단계별로 안내합니다. 그럼 시작해 볼까요?
1. 맥 업데이트
새로운 소프트웨어를 설치하기 전에, Apple의 공식 안내에 따라 macOS와 기존 소프트웨어를 최신 버전으로 업그레이드하세요.
2. 터미널 앱 선택
이 글에서는 명령줄(커맨드 라인)을 통해 맥과 상호작용하므로 터미널 앱이 필요합니다. 다음 중 어느 것이든 좋은 선택입니다.
- Hyper
- iTerm2
- Visual Studio Code의 통합 터미널
- Terminal (맥에 기본 탑재된 앱)
무엇을 고를지 모르겠다면 Hyper를 추천합니다.
3. 커맨드 라인 개발자 도구(Command Line Developer Tools)
명령줄에서 가장 먼저 설치해야 할 것은 맥의 커맨드 라인 개발자 도구입니다. 지금 미리 설치해 두면 나중에 이상한 오류를 예방할 수 있습니다.
도구가 이미 설치되어 있는지 확인하려면 터미널 앱에 다음 명령어를 입력하고 엔터를 누르세요.
xcode-select --version버전 번호가 출력되지 않으면 다음 명령어로 도구를 설치합니다.
xcode-select --install도구 설치 여부를 묻는 대화상자가 나타납니다. 설치(Install)를 클릭하면 패키지가 자동으로 다운로드되고 설치됩니다.
설치가 완료되면 첫 번째 명령어를 다시 실행해 도구가 정상적으로 설치되었는지 확인하세요.
xcode-select --version이제 버전 번호가 출력되어야 합니다.
4. Homebrew
다음 도구들을 설치할 때 각 도구의 웹사이트를 찾아가고, 다운로드 페이지를 열고, 링크를 클릭하고, 압축을 풀고, 설치 프로그램을 직접 실행하는 대신 Homebrew를 사용할 것입니다.
Homebrew는 명령줄에서 맥에 소프트웨어를 설치, 업데이트, 삭제할 수 있게 해주는 패키지 관리 도구입니다. 수동 방식보다 빠르고 안전하며, 전반적인 개발 경험을 한결 편안하게 만들어 줍니다.
먼저 Homebrew가 이미 설치되어 있는지 확인합니다.
brew --version버전 번호가 보이지 않으면 다음 명령어로 Homebrew를 설치합니다.
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"걱정하지 마세요. 이것이 이 글에서 가장 복잡해 보이는 명령어이자 유일한 명령어입니다! Homebrew 덕분에 나머지 과정은 아주 간단합니다.
계속 진행하기 전에 Homebrew가 제대로 설치되었는지 다시 확인합니다.
brew --version5. Node와 npm
Node.js는 웹 브라우저 밖에서 자바스크립트 코드를 실행할 수 있게 해주는 도구입니다. 맥에서 React나 Vue 같은 자바스크립트 프레임워크를 사용하려면 Node가 반드시 설치되어 있어야 합니다.
또한 Node에는 npm(Node Package Manager)이 함께 포함되어 있어, 프로젝트에서 다운로드해 활용할 수 있는 방대한 무료 코드 라이브러리에 접근할 수 있습니다.
먼저 Node가 이미 설치되어 있는지 확인합니다.
node --version설치되어 있지 않다면 Homebrew로 설치합니다.
brew install node마지막으로 Node와 npm이 모두 정상적으로 설치되었는지 확인합니다.
node --versionnpm --version6. Git으로 버전 관리하기
Git은 코드 변경 사항을 추적하고 다른 개발자들과 공유 프로젝트에서 협업할 수 있도록 도와주는 버전 관리 도구입니다.
모든 프로젝트에서 Git을 사용하는 것은 좋은 습관이며, 향후 Git이 필수인 프로젝트를 위한 준비이기도 합니다. 일부 도구(GatsbyJS 등)는 맥에 Git이 설치되어 있어야 동작하므로, 작업 흐름에 넣을 계획이 없더라도 미리 설치해 두는 것이 좋습니다.
역시 Git이 이미 설치되어 있는지부터 확인합니다.
git --version설치되어 있지 않다면 설치합니다.
brew install git그리고 설치가 제대로 되었는지 확인합니다.
git --version가끔씩 다음 명령어를 실행하면 Homebrew로 설치한 모든 패키지가 자동으로 최신 상태로 업데이트됩니다.
brew update && brew upgrade && brew cleanup && brew doctor이 한 줄의 명령어만으로 시스템을 최신 상태로 유지할 수 있습니다.
저는 주로 새 프로젝트를 시작할 때 이 명령어를 실행하지만, 원하는 시점에 언제든 실행해도 됩니다. (실행 후 Homebrew가 추가 명령어 실행을 제안하면 그대로 따라 하세요. sudo로 시작하는 명령어에서 비밀번호를 요구하면 맥의 관리자 비밀번호를 입력하면 됩니다.)
이것으로 명령줄 작업은 끝입니다!
7. 코드 에디터
어떤 텍스트 에디터로도 코드를 작성할 수 있지만, 문법 강조와 코드 유효성 검사 기능을 갖춘 에디터를 사용하면 훨씬 수월합니다.
다음 중 하나를 선택하면 좋습니다.
- Visual Studio Code
- Atom
- Sublime Text
처음 시작한다면 Visual Studio Code를 추천합니다.
8. 브라우저
코딩 중에는 만들고 있는 앱이나 웹사이트를 브라우저에서 직접 확인하며 동작 여부를 검증하는 것이 좋습니다. 어떤 브라우저든 사용할 수 있지만, 일부 브라우저에는 코드의 세부 정보와 개선 방향을 보여주는 개발자 도구가 내장되어 있어 더욱 유용합니다.
다음 중 하나를 선택하면 좋습니다.
- Chrome
- Firefox
처음 시작한다면 Chrome을 추천합니다.
9. Finder 활용 팁
간단한 팁 하나를 소개합니다. 맥이 기본적으로 숨겨 놓은 파일을 표시하도록 설정해 두세요. (예를 들어 Git 파일은 자동으로 숨겨지지만, 때로는 이를 직접 수정해야 할 때가 있습니다.)
숨겨진 파일을 표시하는 가장 쉬운 방법은 키보드 단축키 ⌘⇧.(Command + Shift + 마침표)입니다. 이 단축키를 누를 때마다 숨김/표시 상태가 전환되므로, 필요할 때 언제든 해당 파일에 접근할 수 있습니다.
마무리
모두 준비되었습니다!
이것으로 맥에서 자바스크립트 기반 프론트엔드 개발을 시작하는 데 필요한 모든 것이 갖춰졌습니다.
혼란을 피하기 위해 꼭 필요한 항목만 소개했습니다. 웹 개발을 위해 맥을 더욱 세부적으로 커스터마이징하는 선택적 방법들을 알아보고 싶다면 아래 링크를 확인해 보세요.
더 읽을 거리
- Tania Rascia — Setting up a Brand New Mac for Development
- Ben Honeywill — Setting up a MacBook for Front-End Development
- WebDevStudios — Leaving Homestead: Finding the Best All-Around Local Development Environment (PHP 환경도 함께 구축하고 싶다면)
원문은 michaeluloth.com에 처음 게재되었습니다.