시작에 앞서 Vue.js란,
2014년 첫 출시된 Vue.js는 애플리케이션 로직과 UI의 분리가 필요한 프로젝트에서 UI를 빠르게 개발하기 위해 만들어진 자바스크립트 기반 프레임워크입니다.
MVVM(Model-View-ViewModel) 패턴을 따르며, Angular.js와 React.js가 대부분을 차지하던 JavaScript Framework 시장에서 꾸준하게 점유율을 높여 현재는 비슷한 위치에 있다고 합니다.
Vue.js는 Angular.js와 React.js에 비하여 유연하고 가볍다는 장점이 있으며, HTML 마크업 기반의 템플릿을 활용하여 CSS를 작성하는 기존의 문법 스타일을 사용하기 때문에 Vue.js를 처음 접하는 사용자들이 배우기 쉽다는 점도 장점으로 꼽히고 있습니다.
Vue.js 프로젝트 생성 및 실행하는 과정
제목에서 처럼 VSCode에서 Vue.js 프로젝트를 실행하는 과정이며, Visual Studio Code 설치 후 과정이 기록되어 있습니다. 혹시나 VSCode가 설치되지 않으셨다면 설치 후 이어지는 내용 참고해주시면 좋을 것 같습니다.
(해당 포스팅은 MacOS 기준의 프로젝트 생성 및 실행 과정입니다.)
Node.js 설치
VSCode가 설치된 다음에는 Node.js를 필수로 설치해야 합니다.
Node.js는 쉽게 JavaScript를 서버에서도 사용할 수 있도록 만든 JavaScript 엔진 위에서 동작하는 런타임이라고 하는데요.
Vue.js와의 차이점은 Vue.js의 경우 UI를 그리는 역할의 프레임워크이고, Node.js의 경우 해당 프로젝트를 서버에 실행하는 런타임 역할을 합니다. (Node.js는 아래 공식 홈페이지에서 다운로드하여 설치를 진행해주시면 됩니다.)
Vue.js 설치
이어서 vue.js를 설치합니다.
여기서 npm이라는 것은 Node Packaged Manager의 약자로 위에서 설치한 Node.js에서 사용할 수 있는 package(module)들이 모여있는 저장소 역할을 하며, 설치 및 관리를 할 수 있는 기능을 제공합니다.
$ npm install -g @vue/cli여기서는 해당 명령어를 통해 vue를 설치하겠다는 것이며, 위 이미지에서는 설치 오류가 발생한 것을 볼 수 있습니다.
오류의 원인은 'permission denied' 해당 위치에 폴더를 생성할 권한이 없다는 의미인데요.
해결 방법은 sudo 명령어를 붙여 설치를 하거나, 그래도 안 될 경우 아래와 같이 명령어에 옵션을 추가하여 실행하는 방법이 있습니다.
$ sudo npm install -g @vue/cli --unsafe-perm=true --allow-root
확장 프로그램 설치(선택)
다음으로 확장 프로그램 설치입니다. 확장 프로그램 설치는 코딩하는 데 있어서 도움을 주는 기능이지만 선택적 사항이기 때문에 필요에 맞게 설치하여 사용하면 될 것 같습니다.
여기서는 Vue.js에서 많이 사용되는 확장 프래그램 몇 가지만 소개하고 지나가겠습니다.
1. Prettier
코드 포멧터라고 불리는 프리티어는 코드 스타일을 정리해주는 도구입니다.
코드를 정해진 스타일을 따르도록 변환해주는 도구이며, 개발자들의 다양한 코드 스타일을 해당 확장 프로그램을 사용함으로써 표준화할 수 있게 된다는 장점이 있습니다.
(아래 소개되는 ESLint와 함께 사용되는 경우가 많습니다.)
2. Vetur
.vue 파일에서 코드의 하이라이팅을 목적으로 사용됩니다. 문법 강조, 자동완성, 디버깅 등을 지원합니다.
3. ESLint
ESLint는 JavaScript 문법 검사기로 잘못된 코드 스타일 때문에 에러가 나는 것을 방지해줍니다.
4. Vue 3 Snippets
Vue.js 컴포넌트 속성을 지원하며, 자동완성 기능을 지원합니다.
5. HTML CSS Support
html 문서에 적용되어 있는 css를 자동완성으로 추천해주는 기능을 지원합니다.
Vue.js 프로젝트 생성
앞서 필수적인 프로그램 및 확장 프로그램 설치를 마쳤다면 이제 Vue.js 프로젝트를 생성합니다.
VSCode 환경에서 Open folder를 통해 프로젝트를 생성할 폴더의 경로로 들어갑니다.
vue create 프로젝트이름다음으로 VSCode 상단에 Terminal을 실행시켜 위 명령어를 통해 프로젝트를 생성합니다.
Vue3 또는 Vue2를 선택하라는 부분이 나오는데 Vue3를 선택해줍니다.
(여기서 Manually select features를 선택하면 프로젝트 생성 시 추가적인 기능을 설정할 수 있습니다.)
성공적으로 프로젝트가 생성되고 좌측 프로젝트를 생성하려고 했던 폴더 하위로 Vue.js 프로젝트가 생성됩니다.
Vue.js 프로젝트 실행
Vue.js는 해당 프로젝트에서 최상위 컴포넌트가 되는 파일입니다.
npm run serveTerminal에서 서버를 실행하는 해당 명령어를 입력하면 실행한다는 메시지에 이어 성공되었다는 메시지가 나오며 아래에 프로젝트가 실행된 주소가 나오게 됩니다.
Vue.js 프로젝트가 8080 port에 정상적으로 실행된 모습입니다.
***
Vue.js 프로젝트를 처음 접해보는 터라 배경지식 및 잘못 설명된 부분이 있을 수 있습니다. 잘못된 부분은 댓글로 지적해주시면 확인하여 수정하겠습니다. 감사합니다.
'Programming > Vue' 카테고리의 다른 글
| Vue.js 프로젝트 기본 구조에 대한 이해 (0) | 2022.07.05 |
|---|