[Vue.js] 기본 개념 과 작동순서#1

초기설정 (CDN vs CLI)

• 이곳을 참고해서 설치하면 좋다.

1. 뷰(Vue)란 무엇인가?

출처: https://meetup.nhncloud.com/posts/99

자바 진영에서 Spring이 웹서버의 Flame work 라면 vue는 프론트 진영에서 대표적인 Flamework 라고 할 수 있다. Vue의 특징은 아래와 같다.

• Vue.js는 사용자 인터페이스를 만들기 위한 동적 JavaScript 프레임워크 입니다.
• HTML, CSS 및 JavaScript에 대한 기본적인 이해만으로 Vue.js에서 웹 앱 구성을 시작할 수 있는 액세스 가능하고 간단한 프레임워크
• Vue의 핵심 라이브러리는 양방향 데이터 바인딩을 사용하여 프로토타입과 뷰 구성 요소 간의 동적 조정을 가능하게 하는 뷰 모델 구성 요소에 의존
• 이렇게 하면 단일 페이지 앱 개념을 사용하는 표준 웹 프로그램을 더 쉽게 구축할 수 있다.
• Vue 라이브러리의 기초는 HTML, CSS 및 JS이다.
• 데이터 연결을 통해 Vue는 핵심 Vue 모델에 "연결된" HTML 파일을 동적으로 개조함  

 

2. Vue의 핵심 기술

2-1) 단일 페이지 애플리케이션(SPA, Single Page Application)

• 단일 페이지 애플리케이션은 대부분의 콘텐츠가 정적이며 작은 구성 요소만 한 번에 수정해야 하는 애플리케이션
  EX) 사서함을 탐색할 때 너무 많은 이동이 없는 것
  (헤더와 사이드바는 사서함 전체에서 읽은 것과 동일하게 유지)
• 클릭할 때마다 SPA는 필요한 데이터만 제공한 다음 브라우저에서 렌더링
  이것은 시스템이 사용자가 수행하는 각 작업에 대해 새로 렌더링된 전체 페이지를 시스템에 제공하는 일반적인 페이지 로드와 다르다. 결과적으로 사용자는 클라이언트 측의 단편적인 접근 방식으로 인해 훨씬 더 빠른 응답 시간을 볼 수 있다.

2-2) HTML 템플릿

• Vue의 템플릿은 기존 웹 페이지 애플리케이션에 상호 작용 기능을 추가하는 데 도움이 된다.
• 시뮬레이션된 DOM(Document Object Model) 렌더링 기능은 Vue의 템플릿에 포함되어 있다.
  결과적으로 Vue는 애플리케이션의 컨텍스트가 변경될 때 최소한의 DOM 작업만 수행

* 돔(DOM)이란 무엇인가?

• 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다.
• DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.
• DOM 은 nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다
• 웹 페이지는 일종의 문서(document)다. 이 문서는 웹 브라우저를 통해 그 내용이 해석되어 웹 브라우저 화면에 나타나거나 HTML 소스 자체로 나타나기도 한다. 동일한 문서를 사용하여 이처럼 다른 형태로 나타날 수 있다는 점에 주목할 필요가 있다.
• DOM 은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다. DOM 은 웹 페이지의 객체 지향 표현이며, JavaScript와 같은 스크립팅 언어를 이용해 DOM 을 수정할 수 있다.
• mdn web docs의 공식 문서에 잘 설명되어 있음 링크

DOM 소개 - Web API | MDN

 

3. Vue의 동작 원리

출처: https://www.appventurez.com/blog/vue-js-tutorial

• DOM을 통해서 우리는 웹 페이지를 동적으로 반응시킬 수 있다.
  (= 변화에 맞춰서 일부분만 바꿀 수 있다는 것)
• Vue를 통해서 한 화면에서 여러개의 화면(검색창, 컨텐츠, 로그인)등을 마치 객체 처럼다룰 수 있다.
• 이를 JavaScript를 기반으로 동작하게 하는 것이며,
• 최종적으로 HTML 과 CSS로 렌더링 된 화면을 사용자가 보는 것이다. 

4. 내부 작동순서

4-1) package.json

• 모든 npm 패키지는 package.json 파일을 프로젝트 루트에 포함하고 있다.
• 여기엔 프로젝트와 관련된 메타데이터가 담긴다. (npm은 패키지를 주고 받는 장소) 
• NPM이란 Node Package Manager의 약자로 유용한 패키지를 빠르고 쉽게 공유할 수 있게하는 패키지 매니저
  (즉 NPM이란 이러한 패키지를 관리하는 장소이자 도구 및 방법) 추가 정보
• 이러한 package.json 파일은 보통 Node.js 프로젝트의 루트 디렉토리에 위치해 있다. npm은 이를 통해 프로젝트를 식별하고, 프로젝트의 디펜던시를 처리한다.
• SpringBoot에서 build.gradle 처럼 일련의 라이브러리들을 전역에서 사용하도록 설정해주는 것과 유사하다. 

4-2) index.html

• 기본적인 HTML 파일
• App.vue가 들어갈 장소를 명시해놓는 뼈대 역할을 한다. 
• 14번째 줄 /src/main.js가 main.js 를 호출할 수 있도록 해준다. 
• 11번째 줄에 <div id="app"></div> 이라고 되어 있는 부분이 App.vue가 들어가는 곳이다.

4-3) main.js

• 전역으로 파일을 연결시키려면 main에서 처리하면 된다.
• 그래서 app.mount를 보면 가장 먼저 마운트 되는 vue가 '#app' 
• Vue.use('해당 플러그인)으로 전역으로 사용할 수 있다. (플러그인은 자주쓰는 함수나 명령어들을 모아 놓은것) 

• * mount되는 개념은 무엇인가?
  • Vue.js에서 "마운트(mount)"는 컴포넌트가 DOM에 삽입되고 화면에 표시되는 시점을 가리킴
  • Vue컴포넌트의 라이플사이클 훅 중 하나인 'mounted' 훅은 컴포넌트가 DOM에 마운트된 직후에 호출
  • 다시 말해, Vue 컴포넌트가 생성되고 화면에 표시되면 'mounted ' 훅이 실행된다. 
  • mounted 는 일반적으로 한번만 실행되며, 컴포넌트가 DOM에 처음으로 삽입될 때 호출
    (만약 동일한 컴포넌트가 다시 렌더링되어 다시 마운트 되면 'mounted'는 다시 호출되지 않음.
• * 플러그 인과 라이브러리의 차이점

4-4) APP.vue

• 가장먼저 마운팅되는 vue 파일
• Script / Template / Style 크게 세 부분으로 나뉜다. 
• router-link로 화면을 전부 매핑시켜줄 수 있다.
• <router-view/>이 태그에서 link로 된 페이지가 펼쳐진다. 
• 위와 같이 import된 것들을 template에서 호출하여 SPA 즉 하나의 화면처럼 꾸밀 수 있다는 것이다.

4-5) Router.js

• 라우터는 말 그대로 클라이언트 사이드 네비게이션을 관리하고 SPA에서 페이지간의 이동을 지원하는 vue.js의 공식 라우팅 라이브러리
  (이 때문에 우리는 화면을 동적으로 바꿀 수가 있다.)
• 라우팅의 주요기능은 아래와 같다.

• component: () => import("@/views/TheQnAView.vue")
  윗줄의 의미는 아래와 같다. 
  import Home from '../views/TheQnAView.vue';
  component: Home  

4-6) Component 하위 디렉토리 밑에 vue 파일들

• index.js를 통해서 components 안에 vue들로 화면을 구성 할 수 있다. 

 

5. 마무리

• Axios를 통해서 백엔드와 통신하는 방법에 대한 내용도 곧 포스팅할 예정
• https://gustv.tistory.com/21 의 자료를 많이 참고하였습니다. 감사합니다.