Vue.js 입문하기

Vue는 리액트와 마찬가지로 프론트엔드 라이브러리 겸 프레임워크다.

세세한 문법적인 차이점을 제외하면 거의 같다고 보면 된다.

컴포넌트 기반의 모듈형 방식으로 웹을 구조화 하는것도 비슷하다. 

하지만 리액트가 계층형 구조를 갖는 단방향성의 일방적인 상태(State)의 관리를 통해 이벤트를 제어했다면 뷰는 템플릿 기반의 구조에 추가되는 적응형 구조에 가깝고, 상태의 관리가 양방향이다.

뷰의 홈페이지다.

Vue.js - The Progressive JavaScript Framework | Vue.js (vuejs.org)

Vue.js - The Progressive JavaScript Framework | Vue.js

뷰는 프로그래시브 프레임워크라는 규모와 관계없이 단계적으로 유연하게 사용될 수 있어야 한다는 철학을 가지고 있다.

그렇기 때문에 상대적으로 리액트보다 낮은 진입장벽을 가지고 있고, 시시각각 변화하는 웹 프론트의 요구사항에 맞춰 변화를 수용할 수 있다. 

다음은 공식 문서에 소개되어있는 뷰의 생태계 철학이다.

• 선언적 렌더링(Declarative Rendering): Vue는 표준 HTML을 템플릿 문법으로 확장하여 JavaScript 상태(State)를 기반으로 화면에 출력될 HTML을 선언적(declaratively)으로 작성할 수 있습니다.
• 반응성(Reactivity): Vue는 JavaScript 상태(State) 변경을 추적하고, 변경이 발생하면 DOM을 효율적으로 업데이트하는 것을 자동으로 수행합니다.

리액티브 시스템

리액티브 시스템은 디자인 패턴 중 옵서버 패턴을 기반으로 구현된 시스템이다. DOM내부에서 프로퍼티의 상태가 변경될 때마다 관측자인 와처가 객체의 상태를 다른 컴포넌트들에 동기화 시켜 상태관리를 자동으로 추적-변경, 관리해주는 시스템이다.

• 와처
• 리액티브 프로퍼티

프로그레시브 프레임워크​

Vue는 프론트엔드 개발에 필요한 대부분의 공통 기능을 다루는 프레임워크이자 생태계입니다. 그러나 웹은 매우 다양해 구축하려는 것의 형태와 규모가 크게 다를 수 있습니다. 이를 염두에 두고 Vue는 유연하고 점진적으로 채택할 수 있도록 설계되었습니다. 사용 사례에 따라 Vue를 다양한 방식으로 사용할 수 있습니다:

• 빌드 과정 없이 정적 HTML에 적용
• 모든 페이지에 웹 컴포넌트로 추가
• 싱글 페이지 어플리케이션 (SPA: Single-Page Application)
• Fullstack / 서버 사이드 렌더링 (SSR: Server-Side-Rendering)
• Jamstack / 정적 사이트 생성 (SSG: Static-Site-Generation)
• 데스크톱, 모바일, WebGL 또는 터미널을 대상으로 하는 경우

싱글 파일 컴포넌트​

빌드 도구를 사용하는 대부분의 Vue 프로젝트에서는 HTML과 유사한 싱글 파일 컴포넌트(Single-File Component: SFC, *.vue 파일이라고도 함)라는 파일 형식을 사용하여 Vue 컴포넌트를 작성합니다. Vue SFC는 이름에서 알 수 있듯이 컴포넌트의 논리(JavaScript), 템플릿(HTML) 및 스타일(CSS)을 하나의 파일에 캡슐화합니다. 이전에 보았던 예제는 다음과 같이 SFC 형식으로 작성할 수 있습니다:

 

Vue 공식 지원 라이브러리

• Vue Router : SPA를 위한 라우팅 플러그인
• Vuex : 상태 관리 플러그인
• Vue Loader : 웹펙용 오더 라이브러리
• Vue CLI : 명령어 도구
• Vue DevTools : 브라우저 디버깅 도구

서드파티 라이브러리

• Nuxt.js : SPA외에도 서버 사이드 렌더링(SSR)을 지원하는 차세대 프레임워크
• Weex : IOS빌드 프레임워크
• Onsen UI : 모바일 빌드용 웹 앱 프레임워크

커뮤니티

• Awesome Vue 
• Vue Curated

Vue CDN으로 디버깅하기

title은 그대로 사용한다. 

<script>태그 안의 src='https://unpkg.com/vue@2.5.17'은 뷰를 설치해서 렌더링하겠다는 의미다.

그리고 렌더링 할 내용은 <div>태그 내부의 id='app'이다.

이 app이라는 것은 

하단의 <script>태그 내부에 정의되어 있는데, Vue를 사용할 때 app이라는 아이디를 가진 객체를 마운트하여 사용하겠다는 의미이다.

위의 코드와는 달라진게 있다.

console에 로그를 찍어보았다. 의미는 Vue가 로딩되었는지를 확인하는 코드다. undefined는 아직 객체가 로딩되지 않았다는것을 의미한다. 

 

Vue CLI를 사용하여 프로젝트 생성하기

※ 이부분은 책과는 상관 없이 공식문서를 따릅니다.

기본 베이스는 리액트와 동일하다. Node.js를 설치하고, VisualCode를 통해 프로젝트 루트 폴더를 선택한 뒤 터미널에 명령어를 입력하면 된다.

Vue CLI설치 

npm install -g @vue/cli

React Native에서는 npx react-native init 프로젝트명을 통해서 프로젝트를 생성했다면, Vue에서는 vue create 프로젝트명을 입력하면 프로젝트가 생성된다. 이때 Vue2 버전과 Vue3버전을 선택하라고 나오는데 Vue2버전은 2023년 12월 31일을 마지막으로 LTS지원이 종료될 예정이기 때문에 Vue3 버전으로 프로젝트를 생성하길 권유드린다.

 

+++

빨간 줄로 보안 정책 관련 에러가 뜨면 이거보고 해결하세요.

PSSecurityException : Windows PowerShell 보안 정책 서명 (tistory.com)

프로젝트가 제대로 생성되고 나면 두가지의 명령어를 입력하라고 안내해 준다

하나는 생성된 프로젝트 폴더로 이동하는 cd 프로젝트명 명령어이고, 다른 하나는 로컬 서버에 프로젝트를 호스팅(사실 디버깅)하는 yarn serve(npm run serve를 입력해도 된다.)명령어다. 차례대로 입력한 뒤 localhost:xxxx(포트번호)를 입력하여 크롬 창에서 접속해보자

 

포트번호 파란 부분을 ctrl+마우스 왼클릭을 해도 열린다.

로컬 서버에서 디버깅 중 Vue3 프로젝트

추가로 설치할 비주얼 코드 ExTension은 Vue 3 Snippets, Vue Language Features (Volar), HTML CSS Support 총 3가지를 추천린다.

각각 이런 기능들이 있다고 하니 참고 바란다.

• Vue 3 Snippets

1. 자동 완성(Auto-Completion): Vue 3의 다양한 문법과 API를 빠르게 입력할 수 있도록 자동 완성을 제공합니다.
2. 코드 스니펫(Code Snippets): 자주 사용되는 코드 패턴이나 구조를 빠르게 입력할 수 있습니다. 예를 들어, v-for, v-if 등의 디렉티브를 쉽게 입력할 수 있습니다.
3. 문법 하이라이팅(Syntax Highlighting): Vue 3의 특정 문법을 색깔로 구분하여 가독성을 높입니다.

• Vue Language Features (Volar)

1. 타입 검사(Type Checking): TypeScript와 함께 사용되는 경우, 타입 검사를 도와줍니다.
2. 템플릿 분석(Template Analysis): Vue 템플릿에 있는 에러나 문제점을 실시간으로 분석하고 알려줍니다.
3. 자동 임포트(Auto Import): 사용 가능한 컴포넌트나 라이브러리를 자동으로 임포트합니다.
4. 속성 제안(Property Suggestions): Vue 컴포넌트의 props, data, methods 등을 자동완성으로 제안해 줍니다.

• HTML CSS Support

1. 클래스와 ID 자동완성(Class & ID Auto-Completion): 작성 중인 HTML 태그에 적용 가능한 CSS 클래스나 ID를 자동완성으로 보여줍니다.
2. 인라인 스타일링(Inline Styling): HTML 태그 내의 style 속성에 CSS를 쉽게 적용할 수 있게 도와줍니다.
3. HTML 및 CSS 검사(Validation): 잘못된 태그나 스타일을 실시간으로 알려주며, 필요한 경우 자동으로 수정해줄 수 있습니다.

마지막으로 사소한 문제를 하나 고치겠다.

프로젝트에 존재하는 .vue파일을 열면 빨간 에러 메세지가 뜬다. 이건  프로젝트 내에 .eslintrc.js파일이 현재 존재하지 않기 때문인데 해결방법은 간단하다. 프로젝트 루트에서 터미널에서 npm install babel-eslint --save-dev명령어를 통해 바벨 린트 라이브러리를 설치한 뒤, .eslintrc.js 파일을 만들어서 아래 코드를 집어넣고, 비주얼 코드를 껏다가 다시 키면 해결된다. 

npm install babel-eslint --save-dev

module.exports = {
  parserOptions: {
    parser: '@babel/eslint-parser', // or 'babel-eslint'
    requireConfigFile: false,
  },
  extends: [
    // 다른 확장 규칙
    'plugin:vue/vue3-essential',  // Vue 3에 맞는 ESLint 규칙
  ],
};

 

 

 

 

 

ps. 사용하는 책이 변경되었습니다. "Youngjin.com의 한 권으로 배우는 Vue.js 3"(김동혁 저자)를 사용합니다.