Vue.js 시작

Remind123 2022. 10. 25. 11:12

2022. 10. 25. 11:12

Vue.js란?

Vue는 사용자 인터페이스를 만들기 위한 프레임워크이다.

Vue 는 Component 기반의 SPA (Single Page Application) 사이트를 구축 할 수 있다.

jQuery 시절에 페이지를 구성해야 했다면 하나의 html 파일을 만들고 그 안에 markup 태그와 css 를 넣고 전체 동작에 따른 js 파일을 작성해주어야 한다.

페이지의 규모가 커질수록 html 구조가 복잡해짐에 따라 style 관리가 힘들어지고 js 파일의 규모가 커질수록 모듈 관리 또한 힘들어진다.

Modern Front 의 라이브러리와 프레임워크들은 Component 라는 개념을 도입하여 위와 같은 문제를 해결하였다.

상단의 로고, 중앙의 타이틀과 버튼, 이미지 들을 각각 조각(Component) 들로 분리하여 해당 페이지에서 레고를 조립하듯 끼워 맞춘다.

SPA 란 말 그대로 단일 페이지 어플리케이션 이다.

하나의 html 파일과 단일 JS 파일로 이루어져 있다.

최초 로딩 시에 html 파일과 JS 을 미리 로딩하여 페이지 전환이 될 경우 페이지를 이동하는 것이 아닌 전환될 부분만 그려준다.

SPA 로 페이지를 구성하게 되면 빠른 페이지변환과 반응성, 화면전환 애니메이션 등 사용자 친화적인 부분과 적은 트래픽 양을 누릴 수 있다는 장점이 있다.

하지만 최초 로딩 시에 JS 파일을 가져와야 하는데 JS 의 사이즈가 커수록 초기 로딩속도는 느려진다.

또, 검색엔진이 해당 페이지를 크롤 했을 때는 페이지가 그려지기 전이기 때문에 텅 빈 div 태그만 노출됩니다. 이를 해결하기 위해서는 meta tag 를 이용하거나 nuxt 같은 서버사이드 렌더링 프레임워크를 이용해야 한다.

vue-cli 는 기본 vue 개발 환경을 설정해주는 도구이다.

vue-cli 가 기본적인 프로젝트 세팅을 해주기 때문에 폴더 구조에 대한 고민, lint, build, 어떤 라이브러리로 구성을 해야되는지 webpack 설정은 어떻게 해야되는지에 대한 고민을 덜을 수 있다.

=> CLI는 기본적 세팅이 되어있으므로 초보자들이 쓰기 좋음

VUE-CLI를 설치하려면 npm 또는 yarn이 설치되어 있어야 한다.

npm을 설치한 후

npm install -g @vue/cli 명령어를 터미널에 입력하여 VUE-CLI를 설치한다.

원하는 디렉토리로 이동한 후 다음과 같은 명령어를 터미널에 입력한다.

vue create 프로젝트명

명령어를 입력하면 vue-cli의 선택지가 주어진다.

Manually 에는 Babel, TypeScript, PWA, Router, Vuex, CSS Pre-processors, Linter / Formatter, Unit Testing, E2E Testing 등 필요한 라이브러리와 설정들을 추가할 수 있다.

(저는 첫 시작이므로 일단 default를 선택하였습니다)

프로젝트를 생성 후 cd 명령어로 해당 프로젝트 폴더로 이동 후 명령어를 이용하여 dev 서버를 실행한다.

cd 프로젝트명

npm run serve

터미널에 나오는 localhost 주소로 접속하면

다음과 같은 화면이 나온다.