[Vue.js] Vue.js 개발 환경 설정

Vue.js로 웹 앱을 개발하기 위해 필요한 환경을 구성해보겠다

 

---

 

Vue.js 로 웹 앱을 개발하기 위한 도구 설치 

---

• 크롬 브라우저
• Node.js
• 개발자 도구(Vue.js devtools. 크롬 확장 플러그인)
• Visual Studio Code

 

 

 

📌 Node.js 설치하기

---

node.js에서는 서버 사이드 자바스크립트로, 

서버 측에서 실행되는 자바스크립트 실행 환경 

vue CLI를 이용하여 쉽게 뷰 프로젝트를 구성하려면 Node.js가 설치되어 있어야 한다 (+ 뷰 CLI로 생성한 프로젝트에서 프로토타이핑을 할때에도 Node.js 서버 사용)

CLI
커맨드 라인 명령어
윈도우의 명령 프롬프트 창과 맥의 터미널 등 명령어로 특정 동작을 수행할 수 있는 콘솔 창을 의미

서버 사이드
웹 화면과 관계된 서버 로직을 처리하는 영역

 

 

 

 

1. node.org 입력하면 Node.js 공식 사이트 접속

LTS 버튼 클릭하여 다운로드 한다

💡  Current 버전보다 안정적인 LTS(Long Term Support) 버전을 다운로드 하는 것이 향후 라이브러리 호환성 관점에서 더 도움이 된다 

 

https://nodejs.org/ko/download/

다운로드 | Node.js

 

 

 

2. Node.js 버전 확인 

윈도우의 명령 프롬프트(cmd)나 맥의 터미널(Terminal)에서 node-v 를 실행한다

정상적으로 설치된 경우엔 버전이 표시된다 

 

 

 

 

 

 

 

 

 

📌 vue.js 개발자 도구 설치하기 

---

- 크롬 개발자 도구를 이용하면 웹 페이지를 서버에서 불러와 화면에 표시하기까지의 모든 과정들을 렌더링, 네트워크, 성능 등의 관점에서 확인할 수 있다

- 자바스크립트 디버깅 및 웹 페이지 성능 진단 등이 가능

 

 

 

1. 구글에서 vue.js devtools 검색

 

 

 

 

 

 

💡 vue3 를 쓴다면 밑의 베타버전을 설치해야한다!!