JavaScript와 HTML, CSS등에 대해서는 일체 다루지 않는다.
기초지식은 다른 강의를 참조하도록 하라.
참고:
이 때까지 vue는 우리가 직접 설치해서, cdn등으로 사용했었다.
이렇게도 vue를 사용할 수 있고 개발을 할 수도 있다. 뭐 이론상으로는 가능하다.
그러나 이러면 쪼개는 것도 힘들지, 임폴트 하는것도 힘들지, 디버깅 하는것도 힘들지... 다 힘들다.
그래서 이걸 자동화해줘서 하는 방법이 있다. 그게 바로 vue-cli이다.
문제는 이걸 처음 부터 가르쳐주지 않았던 이유가 있다.
바로 cli를 써서 개발하는 방식이 사실 조금 더 많은 지식을 필요로 하기 때문이다.
웹프레임워크는 필자가 생각해도 꽤 진입장벽이 높은 편이다.
한개를 아는게 아니라 여러개를 알아야하기 때문이다.
단순 vue만 쓰는건 어렵지 않지만 cli를 건드리는 순간부터 갑자기 한번에 여러가지 프레임워크들이 파도쳐럼 몰려들어오게 된다.
그럼에도 불구하고 소개를 안하는건 안되는것 같다.
따라서 이번에는 vue cli를 어떻게 설치하는지 그리고 앞으로 어떻게 사용해야하는지 알려드리겠다.
사족으로 조금더 이야기를 하자면 angular를 할때는 바로 3장에서 cli를 사용하는 법을 알려드렸다.
그런데 vue에서는 이제와서 소개하는 이유는 angular는 cli없이 예제를 하는것도 힘들기 때문이다.
반대로 vue는 cli없이 하는게 더 예제를 하는게 좋기 때문에 이렇게 사용하였다.
sudo npm install -g @vue/cli
일단 vue-cli를 설치하자.
그 다음 프로젝트를 만들자.
vue create <프로젝트 명>
이렇게 프로젝트를 만들면 default와 manually select features가 있다.
그냥 default를 선택하자.
vue init <template 명> <프로젝트명>
최근에는 vue가 업그레이드가되서 vue create로 바꼈는데 옛날 서적같은데 보면 vue init으로 프로젝트를 만든다.
프로젝트를 만드는 방식은 위와같다. 참조해라.
근데 vue init으로 만드는건 꽤 귀찮으니까 그냥 vue create로 만들자.
만들게 되면 위와가은 구조로 템플릿이 만들어진다.
여기서 눈여겨 볼것은 vue확장자의 파일이다.
이러한 것을 vue 컴포넌트라고 부른다.
내용을 확인해보자.
vue 컴포넌트의 경우 세개의 구역으로 나누어져있다.
template - html부분이다. 이 안에 style태그와 script태그를 사용할 수 없다.
script - 이 템플릿에서 사용할 스크립트 코드이다. import로 외부라이브러리를 가져올 수 있다.
style - 이 템플릿에서 사용할 css이다. scoped속성을 부여하면 딱 이 스타일에서만 사용할 수 있다. 아무것도 없으면 자식 컴포넌트도 일괄 적용된다.
vue컴포넌트는 즉 작은 html조각이라고 생각하면된다.
이렇게 조각단위로 하다보면 프로그래밍을 하기 매우 편리하게 된다.
npm run serve
테스트 해볼때는 위의 명령어로 테스트한다.
그러면 서버가 동작하면서 테스트를 할 수 있게 된다.
그럼 위처럼 페이지가 표시된다.
vue cli를 사용하면 코드의 변화를 서버가 바로바로 감지해서 렌더링 시켜주므로 쉽게 테스트를 할 수 있다.
Vue 컴포넌트
해당 포스팅에서 컴포넌트에 대해서 언급하였다.
여기서 여러분이 봐야할거는 글로벌과 로컬 컴포넌트라는 개념인데 문제는
해당 개념은 여기서도 유지되지만 위처럼 단순 js객체 혹은 js함수로 vue 컴포넌트를 선언하지 않는 다는 것이다.
이제 부터 우리는 확장자가 vue인 vue컴포넌트를 사용한다는걸 잊으면 안된다.
위에서 언급했지만 vue컴포넌트는 총 3구역으로 나뉜다.
여기서 다른 하위 컴포넌트를 사용하기 위해서는 반드시 아래 두가지 단계를 거쳐야한다.
1. vue파일을 import시킨다.
이 import구문의 결과로 vue컴포넌트가 반환된다.
단 불러 오는 시점에서 js객체로 바뀌게 된다.(즉 컴파일이 된다.)
2. components에 포함시켜준다.
그래야 template구문에 사용할 수 있다.
예를 들어서 위의 App.vue는 HelloWorld.vue를 자식으로 가지고 있다.
이렇게 컴포넌트화 되서 코딩을 하는건 아주 중요하다.
여러분도 앞으로의 컴포넌트를 하지 않거나 js로 컴포넌트 하는걸 지양하도록 하고
vue컴포넌트를 최대한 활용해서 코딩하는 것이 좋다.
'Programming > JavaScript-Vue' 카테고리의 다른 글
| [Vue-15]mixin 만들고 사용해보자.(기능만 재사용가능하게 하는 방법) (0) | 2019.05.15 |
|---|---|
| [Vue-14]vuex 사용하기(state, mutation) (0) | 2018.11.06 |
| [Vue-12]값의 동적 변경과 v-model(맛보기편) (0) | 2018.09.26 |
| [Vue-11]Router (0) | 2018.05.12 |
| [Vue-10]컴포넌트 (0) | 2018.03.13 |