캡틴판교 장기효님의 Vue.js시작하기 인프런 강의를 수강하고 내용을 정리했다.
매일 20분 야금야금 Vue.js 화이팅.
IDE: Visual Studio Code
크롬 뷰 개발자 도구: Vue.js devtools
CLI는 명령어를 통한 특정 액션을 수행하는 도구이다.
Vue CLI 공식문서 - 설치페이지
공식 홈페이지에 노드 버전 요구사항이 적혀있다.
2021년 10월 18일 기준, 노드 버전 요구사항은 아래와 같다.
Vue CLI 4.x에는 Node.js 버전 10.x 대를 권장
홈페이지를 확인하고 터미널에 아래 명령으로 버전을 확인하자.
node -v
npm -v
버전이 안맞는다면 update 하여 맞춰주자.
설치 명령
npm install -g @vue/cli
# OR
yarn global add @vue/cli
설치된 버전 확인
vue --version
sudo npm install -g @vue/cli
npm은 Node Packeged Manager의 약자다.
npm은 node.js로 만들어진 모듈을 관리하는 툴이다.
자바스크립트 런타임 환경 Node.js의 기본 패키지 관리자이다.
npm install 모듈이름 과같은 간단한 터미널 명령으로 웹에서 모듈을 다운로드 할 수 있다.
"package.json" 파일을 통해 프로젝트 정보와 패키지의 dependency를 관리한다.
where vue
npm list -g
터미널 명령어를 통해 npm 패키지 설치 위치를 확인하자.
vue-cli 이름으로 프로젝트를 생성하자.
vue create [프로젝트 폴더 위치]
vue create vue-cli
이 때, [Vue 2]라고 된 Default 를 선택하기
cd vue-cli
npm run serve
로컬 8080 포트에서 뷰 서버가 실행됬다고 출력된 터미널
프로젝트 의존성 도구를 정의한 package.json을 열어보자.
"serve" 라는 프로젝트를 실행하는 스크립트가 정의되어 있음을 알 수 있다. 이것은 이미 Vue가 정의한 내용이다.
npm start serve는 프로젝트를 실행하는 스크립트를 실행한 명령어라고 이해하면 된다.
built files will be auto injected
"빌드된 파일들이 주입된다." 는 주석 위치를 보자.
서버를 실행했을 때, src 디렉터리 하위에 있는 파일들이 묶여서 하나의 파일로 변환되어 이 자리에 주입된다.
배포 단계에서 Webpack이라는 개념을 이해해야 하는데, 시간을 들여 반드시 공부하도록 하자.
사용하는 모듈과 컴포넌트들을 import 해서 화면에 렌더링 하는 설정파일이다.
app이라는 아이디를 가진 태그에 붙이겠다는 것이다.
템플릿을 정의했을 때 내부적으로 render()함수가 정의된다.
App이라는 컴포넌트의 내용을 불러와서 랜더링 하겠다는 의미이다.
https://stackoverflow.com/questions/38388824/is-maven-similar-to-npm
다음시간에는 싱글 파일 컴포넌트를 배운다.