[Mac] 프론트엔드 개발환경 셋팅 가이드 1편 - nvm, node.js 설치 2024ver

안녕하세요, 오늘은 프론트엔드 개발환경 셋팅을 진행해보도록 하겠습니다.

 

NVM 설치 -> Node.js 설치 -> Vue.js 설치 순으로 진행됩니다.

 

Mac 개발자 환경셋팅을 모두 하신상태에서 진행해주시면 됩니다.

아직 mac 기본 셋팅을 하지 않으셨다면 아래글을 참고해주세요

 

개발자 Mac Book 7가지 초기셋팅 가이드북(2024년 버전)

개발자 Mac Book 7가지 초기셋팅 가이드북(2024년 버전)

 

Vue.js가 뭔지는 알고 계시겠죠? Vue.js를 설치하려면 Node.js가 설치되어 있어야 됩니다.

 

바로 개발을 빠르게 시작하실 수 있도록 본론으로 넘어가겠습니다.

 

우선 Homebrew와 nvm 인 node version manager를 설치된 상태에서 진행하겠습니다.

homebrew와 nvm설치는 아래 게시글을 참조해주세요.

 

nvm으로 노드버전 lts 라고해서 가장 안정화된 버전을 받을거에요.

만약 회사나 프로젝트에서 노드버전을 000로 맞추세요 라고한다면 그 버전을 선택해서 설치를 진행할거에요.

 

https://yellongs.tistory.com/entry/React-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0-%E2%91%A0-Homebrew-NVM-%EC%84%A4%EC%B9%98-nvm-not-found-%EC%98%A4%EB%A5%98%ED%95%B4%EA%B2%B0%EB%B2%95-%ED%8F%AC%ED%95%A8

React 시작하기 ①- Homebrew, NVM 설치 (nvm not found 오류해결법 포함)

요약하자면

brew install nvm

nvm을 설치해줍니다.

 

vi ~/.zshrc

들어가서

 

export NVM_DIR=~/.nvm

추가해주고

 

source $(brew --prefix nvm)/nvm.sh

터미널에 위 명령어 입력해준다음

 

source ~/.zshrc

입력하면 설치 끝났고,

 

nvm --version

입력해보면 정상 설치되었음을 알 수 있습니다.

 

이제 노드 버전을 골라보도록 하겠습니다.

 

nvm ls-remote

 

20.15.1 버전이 Latest LTS 라고 되어 있네요. 이버전을 설치해보도록 하겠습니다.

터미널 iterm 등에서 바로 아래 명령어를 실행해줍니다.

nvm install v20.15.1

 

 

쭉쭉 설치가 되면 위와 같이 뜨게됩니다.

 

nvm ls

위 명령어를 실행하면 현재 설치되어있는 버전을 볼 수 있습니다.

 

node --version

 

마찬가지로 당연히 node.js를 설치한 것이니 위 명령어를 실행해도 동일하게 현재 설치한 버전이 나옴을 알 수 있습니다.

 

 

이제 Node.js 설치를 잘했다고 볼 수 있는데요. Node를 설치하면 npm 이라는 친구도 같이 설치가 됩니다.

 

Npm이란 무엇일까요?

제가 지피티한테 물어봐서 얻은 답변은 아래와 같습니다.

 

한마디로 설명하면 패키지를 관리해서 라이브러리들을 빠르게 다운받는 패키징 매니저? 툴? 이라고 보시면됩니다.

게임으로 치면 넥슨플러그?... 스팀?... 라이엇 클라이언트?... 라고 생각하시면 됩니다. 다른 라이브러리들을 빠르게 버전관리해서 설치해주는 도구이죠. 아래 내용은 한번 읽어보시고 다음시간에 이어서 Vue.js 를 바로 설치해보도록 하겠습니다.

 

 

감사합니다.

 

 

질문은 언제나 댓글에 달아주세요!

 

---

 

npm(Node Package Manager)은 JavaScript 런타임 환경인 Node.js의 패키지 관리자입니다. 2009년에 처음 출시된 npm은 이제 전 세계 개발자들 사이에서 필수적인 도구로 자리 잡았습니다. npm을 사용하면 다양한 오픈 소스 라이브러리와 도구들을 손쉽게 설치하고 관리할 수 있습니다.

npm의 주요 기능

1. 패키지 설치: npm을 사용하면 원하는 패키지를 쉽게 설치할 수 있습니다. 예를 들어, npm install express 명령어를 입력하면 Express.js라는 웹 프레임워크를 설치할 수 있습니다. 이렇게 설치된 패키지는 node_modules 디렉토리에 저장되며, 프로젝트 내에서 바로 사용할 수 있습니다.
2. 패키지 관리: npm은 패키지의 버전을 관리하는데도 유용합니다. package.json 파일을 통해 프로젝트에 필요한 패키지와 그 버전을 명시할 수 있으며, 이를 통해 일관된 개발 환경을 유지할 수 있습니다. 또한, npm update 명령어를 사용해 패키지들을 최신 버전으로 쉽게 업데이트할 수 있습니다.
3. 스크립트 실행: npm을 통해 다양한 스크립트를 실행할 수 있습니다. package.json 파일의 scripts 섹션에 명령어를 정의하면, npm run <스크립트명> 명령어로 해당 스크립트를 실행할 수 있습니다. 이는 빌드, 테스트, 배포 등 다양한 작업을 자동화하는데 유용합니다.

npm의 장점

1. 방대한 생태계: npm 레지스트리에는 수백만 개의 패키지가 등록되어 있습니다. 이는 개발자가 필요로 하는 거의 모든 기능을 구현한 패키지를 쉽게 찾고 사용할 수 있음을 의미합니다. 예를 들어, 데이터베이스 연동, 테스트 도구, 프론트엔드 프레임워크 등 다양한 분야의 패키지를 손쉽게 활용할 수 있습니다.
2. 커뮤니티 지원: 전 세계 수많은 개발자들이 npm을 사용하고 기여하고 있습니다. 이를 통해 npm 생태계는 지속적으로 성장하고 발전하고 있으며, 문제 발생 시 커뮤니티를 통해 빠르게 해결책을 찾을 수 있습니다.
3. 편리한 사용성: npm은 명령어 기반의 간단한 인터페이스를 제공하므로, 초보자도 쉽게 배워서 사용할 수 있습니다. 또한, 다양한 명령어와 옵션을 제공하여 개발자의 생산성을 크게 향상시켜 줍니다.