[Vue.js] 세 번째 정리 (프로젝트 생성 초기 설정)

지난 번까지 뷰에 대한 기본적인 것, 개념들을 공부했다면 이번엔 뷰 프로젝트를 직접 생성해봤다.

 

[Vue 사용하기 전 초기 환경 설정]

1. 우선 node.js 설치

-> node.js는 무엇일까?

원래 javascript는 원래 웹 브라우저 환경에서만 동작하는데, 이때 node.js가 우리가 사용하는 컴퓨터 환경에서도 javascript를 사용해 개발할 수 있도록 만들어 주는 플랫폼이다. (node.js는 자바스크립트를 웹 브라우저 속에서만 사용되던 언어에서 범용 스크립트 언어로 탈바꿈 시켰다는 점에서 의미가 있다)

-> node.js의 가장 큰 특징은 단일 스레드 모델, non-blocking 이라는 것

-> 노드 설치 후 버전 확인: node -v

 

2. npm (Node Packaged Modules)

-> 노드를 설치한 후에 자주 사용하는 명령어 npm !!!

-> npm은 node.js로 만들어진 모듈을 인터넷에서 다운받아 설치해주는 패키지 매니저이다.

-> 무언가 필요한 게 있으면 npm으로 간단히 설치 가능

 

3. vue-cli (CLI, Command Line Interface : 명령어 인터페이스)

-> 설치하기: npm install -g @vue/cli 

-> 기본 vue 개발 환경을 설정해주는 도구이다. vue-cli가 기본적인 프로젝트 셋팅해줌. 따라서 간편함 (폴더 구조, 라이브러리 기본구성 등) -> cli는 터미널 창에 입력하는 명령어를 통해 사용자와 컴퓨터가 상호 작용하는 방식을 말한다.

->vue cli 공식문서 참고 : https://cli.vuejs.org/guide/

Overview | Vue CLI

4. 뷰 프로젝트 생성

-> vue create 프로젝트명

-> 프로젝트 실행 : npm run serve 

 

 

5. axios 설치 (사용하는 경우)

-> npm i axios

-> 설치 후 import axios from axios 로 불러와서 사용 가능

 

6. router 설치(사용하는 경우)

-> vue add router

 

 

---

[ 기타 정리 사항 ] 

0. app

new Vue({

      el: '#app' 이랑

      .$mount('#app') 이랑 거의 똑같다

   })

 

1. 프로젝트 루트를 잡는 기준은👇

 

python : manage.py

vue : package.json

 

2. data가 function이다

 

3. npm run build

-> 컴포넌트, 라이브러리가 많아져도 빌드 과정을 통해 문서 한장으로 넘겨진다 (싱글 페이지로 제공한다. 모든 게 모여서 하나가 된다.

-> 그렇다면 왜 쪼게 놨는가?  dx를 위한 것 (Developer Experience, 개발자 경험)

 

4. vue-cli 환경에서 핵심은 컴포넌트! 컴포넌트가 합쳐져 하나의 페이지를 구성한다.

-> 이게 곧 SPA(Single Page Application)인 것.

 

5. 컴포넌트 = SFC (single file component) 라고 부름

 

6. 하나의 컴포넌트는 하나의 파일이면서 동시에 하나의 뷰 인스턴스이다.

 

7. 분리된 파일 컴포넌트에 각자의 역할, 기능을 넣어두고 이를 모아서 하나의 페이지를 만드는 것 뷰 어플리케이션이 된다.

 

8. url에 따라 다른 컴포넌트를 렌더링하기, url에 맵핑될 애들은 views에 들어가 있다. (즉, views의 컴포넌트들은 선택받은 애들)