웹 개발을 위해 Mac을 설정하는 방법

텍스트 편집기와 브라우저만 있으면 기본 웹사이트를 구축할 수 있지만 React 또는 Vue와 같은 JavaScript 프레임워크와 Git과 같은 유용한 도구를 워크플로에 추가하여 게임을 향상시킬 수 있습니다.

하지만 기다려! Mac이 준비되지 않았습니다. 다이빙을 시작하기 전에 나중에 혼란스러운 오류를 방지하기 위해 몇 가지 항목을 설치해야 합니다. ?

이 문서는 Mac에서 JavaScript 기반 웹 개발을 시작하고 실행하는 데 필요한 최소 설정을 안내합니다.

가자!

Mac 업데이트

새 소프트웨어를 설치하기 전에 Apple의 다음 지침에 따라 macOS 및 현재 소프트웨어를 최신 버전으로 업그레이드하십시오.

터미널 앱 선택

이 문서의 명령줄을 사용하여 Mac과 상호 작용할 것이므로 터미널 앱이 필요합니다.

다음 중 하나가 좋은 옵션입니다.

• 하이퍼
• iTerm2
• Visual Studio Code의 통합 터미널
• 터미널(Mac과 함께 제공되는 기본 앱)

어떤 것을 선택해야 할지 잘 모르겠다면 Hyper를 선택하세요.

명령줄 개발자 도구

명령줄에서 가장 먼저 설치해야 하는 것은 Mac의 명령줄 개발자 도구입니다. . 지금 설치하면 나중에 이상한 오류를 방지할 수 있습니다.

도구가 이미 설치되어 있는지 확인하려면 터미널 앱에 다음 명령을 입력하고 리턴 키를 누르십시오.

xcode-select --version

결과가 버전 번호가 아닌 경우 다음 명령을 사용하여 도구를 설치하십시오.

xcode-select --install

도구를 설치할 것인지 묻는 대화 상자가 나타납니다. 설치를 클릭합니다. 패키지가 자동으로 다운로드되어 설치됩니다.

설치가 완료되면 첫 번째 명령을 다시 실행하여 도구가 이제 설치되었는지 확인합니다.

xcode-select --version

결과는 이제 버전 번호여야 합니다.

홈브류

각 도구의 웹사이트로 이동하여 다운로드 페이지를 찾은 다음 다운로드 링크를 클릭하고 파일의 압축을 풀고 설치 프로그램을 수동으로 실행하여 다음 몇 가지 도구를 설치하는 대신 Homebrew를 사용합니다.

자제 명령줄에서 Mac의 소프트웨어를 설치, 업데이트 및 제거할 수 있는 도구입니다. 이는 수동 접근 방식보다 빠르고 안전하며 일반적으로 개발 작업을 더 쉽게 만듭니다.

먼저 Homebrew가 이미 설치되어 있는지 확인합니다.

brew --version

버전 번호가 표시되지 않으면 다음 명령으로 Homebrew를 설치하세요.

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

이 기사에서 볼 수 있는 가장 이상한 명령입니다! ? Homebrew 덕분에 나머지는 간단합니다.

계속하기 전에 Homebrew가 설치되었는지 확인하십시오.

brew --version

노드 및 npm

Node.js는 Mac이 웹 브라우저 외부에서 JavaScript 코드를 실행할 수 있게 해주는 도구입니다. Mac에서 React 또는 Vue와 같은 JavaScript 프레임워크를 실행하려면 Node가 설치되어 있어야 합니다.

Node에는 프로젝트에서 다운로드하여 사용할 수 있는 방대한 무료 코드 라이브러리에 액세스할 수 있는 npm(노드 패키지 관리자)도 포함되어 있습니다.

먼저 Node가 이미 설치되어 있는지 확인하십시오.

node --version

그렇지 않은 경우 Homebrew로 설치하십시오.

brew install node

마지막으로 Node 및 npm이 이제 설치되었는지 확인합니다.

node --version

npm --version

Git으로 버전 관리

Git은 코드 변경 사항을 추적하고 공유 프로젝트에서 다른 개발자와 작업하는 데 도움이 되는 도구입니다.

모든 프로젝트에서 Git을 사용하는 것은 개발하기에 좋은 습관이며 Git이 필요할 수 있는 향후 프로젝트를 준비할 수 있습니다. GatsbyJS와 같은 일부 도구는 Mac에 설치된 Git에 의존하기 때문에 워크플로에 추가할 계획이 없더라도 필요합니다.

다시 한 번 Git이 이미 설치되어 있는지 확인하여 시작합니다.

git --version

그렇지 않은 경우 설치:

brew install git

그리고 설치가 제대로 되었는지 확인하십시오:

git --version

가끔 다음 명령을 실행하면 Homebrew로 설치한 모든 것이 자동으로 업데이트됩니다.

brew update && brew upgrade && brew cleanup && brew doctor

이 명령 하나만으로 시스템을 최신 상태로 유지할 수 있습니다. ?

보통 새 프로젝트를 시작할 때 실행하지만 원할 때마다 실행해도 됩니다. (이 명령을 실행할 때 Homebrew가 실행할 추가 명령을 제안하면 계속 실행하십시오. 명령이 sudo으로 시작하는 경우 암호를 묻는 메시지가 나타나면 Mac의 관리자 암호를 사용하십시오.)

이것이 명령줄에 대한 것입니다!

코드 편집기

모든 텍스트 편집기에서 코드를 작성할 수 있지만 코드를 강조 표시하고 유효성을 검사하는 편집기를 사용하면 작업이 훨씬 쉬워집니다.

다음 중 하나가 좋은 옵션입니다.

• 비주얼 스튜디오 코드
• 아톰
• 숭고한 텍스트

이제 막 시작했다면 Visual Studio Code를 선택하세요.

브라우저

코딩할 때 브라우저에서 구축 중인 앱이나 웹사이트를 확인하여 작동하는지 확인하는 것이 도움이 됩니다. 이를 위해 모든 브라우저를 사용할 수 있지만 일부에는 코드 및 개선 방법에 대한 세부 정보를 보여주는 추가 개발자 도구가 포함되어 있습니다.

다음 중 하나가 좋은 옵션입니다.

• 크롬
• 파이어폭스

이제 막 시작했다면 Chrome을 선택하세요.

찾기

간단한 팁:기본적으로 Mac이 숨기는 파일을 표시하고 싶을 것입니다. (예를 들어 git 파일은 자동으로 숨겨지지만 가끔 편집하고 싶을 때가 있습니다.)

Mac의 숨김 파일을 표시하는 가장 쉬운 방법은 키보드 단축키 ⌘⇧를 사용하는 것입니다. (커맨드 + 쉬프트 + 마침표). 이렇게 하면 이러한 파일을 표시하거나 숨길 수 있으므로 필요할 때 액세스할 수 있습니다.

결론

준비가 완료되었습니다! ?

이것이 Mac에서 JavaScript 기반 프런트 엔드 개발을 시작하고 실행하는 데 필요한 전부입니다.

혼동을 방지하기 위해 꼭 필요하지 않은 항목은 생략했습니다. 웹 개발을 위해 Mac을 추가로 사용자화할 수 있는 선택적 방법에 대해 자세히 알아보려면 아래 링크를 확인하세요.

추가 자료

• Tania Rascia의 개발을 위한 새로운 Mac 설정
• Ben Honeywill의 프론트엔드 개발을 위한 MacBook 설정
• Leaving Homestead:WebDevStudios가 제공하는 최고의 만능 로컬 개발 환경 찾기(PHP 설정도 필요한 경우)

Twitter에서 토론

원래는 michaeluloth.com에 게시되었습니다.