[Udemy Vue 완벽가이드 Section1] 2. 'Vue.js'란 무엇인가?

What is Vue.js(or just 'Vue')?

- Vue.js 또는 Vue는 무엇인가?

 

Vue.js(Vue) is a 1) JavaScript 2) framework that makes building interactive and 3)reactive 4)webfronts(=browser-side web applications) easier.

 

1) JavaScript

A prgramming language that is supported by all browsers. It allows you to manipulate the already-running page and hence provide richer user experiences.

 

JavaScript는 브라우저에서 사용할 수 있는 프로그래밍 언어이다.

JS는 페이지가 로드된 후, 브라우저에서 실행할 수 있다.

서버에서 새로운 페이지를 가져오지 않고, 사용자 화면에 보이는 모습을 조작할 수 있도록 한다. 그래서 풍부한 사용자 경험을 제공한다.

ex: UP버튼을 누르면 counter가 1 올라간 HTML화면을 서버로부터 새로 받아와서 렌더링하는게 아니라, 이미 로드된 화면에서 DOM을 조작하여 변경하는 등, 동적인 기능을 추가.

 

 

** manipulate the already-running page에 대한 설명

[브라우저 렌더링 과정]

1. HTML 파일을 불러옴 → 웹브라우저의 렌더링 엔진에 의해 HTML파일 파싱 → DOM 생성

2. CSS파일 불러옴 → 웹브라우저의 렌더링 엔진에 의해 CSS파일 파싱 → CSSOM 생성

3. 완성된 DOM 트리 + CSSOM 트리 결합 → 렌더 트리 형성

4. 렌더트리 배치(Layout) : 렌더 트리를 화면에 어떻게 배치할지 노드의 위치와 크기 계산

5. 렌더트리 그리기(Paint) : UI들을 그려 브라우저 화면에 출력

 

보통 JavaScript가 실행될 시점은 body요소의 가장 아래에 위치시키기 때문에 이미 렌더트리까지 형성되어 브라우저 화면에 출력까지 된 상태이다.

따라서, JavaScript는 already-running(이미 실행)된 브라우저 화면을 조작한다는 뜻!

 

 

Vue는 이러한 JavaScript를 사용한다.

 

 

2) framework

A framework is a (third-party) library that exposes utility functionalities AND a "set of rules" (a clear guidance) on how to build your JavaScript Application.

다른 누군가가 작성한 코드로 특정 유틸리티 기능과 메서드, 도구 등을 이용하므로 내가 직접 코드를 작성할 필요가 없다.

중요한건, 다른 일반 라이브러리와는 달리 프레임워크는 추가 기능을 제공할 뿐만 아니라 규칙을 제공한다. 그리고 명확하게 안내한다.

애플리케이션 구축 시, 따라야 할 접근 방식을 안내한다.

애플리케이션 코드의 작성법에 대한 명확한 구조와 아이디어, 유틸리티 기능과 규칙을 제공한다.

2023.05.25 - [분류 전체보기] - 라이브러리(Library) vs 프레임워크(Framework)

 

 

3) reactive

Your app is able to react to user input, update the screen dynamically(e.g. to show overlays or input validation errors) → Look and feel of mobile apps

앱이 사용자의 작업에 즉각 응답(반응)하게 한다. 유저가 화면에 뭔가를 입력하면 이에 따라 앱이 반응하도록 만든다.

ex: 입력 필드 아래에 유효성 오류가 나오도록 경고메시지와 함께 오버레이를 보여줄 수 있다.

즉, Vue는 웹 애플리케이션의 현대적인 감성을 사용자가 느끼게 만들 수 있고, 훌륭한 사용자 경험을 제공하도록 만들어준다.

 

 

자, 그럼 왜 반응형 웹 프론트엔드를 구축하는걸까?

→ 웹 애플리케이션 말고, 모바일 애플리케이션을 생각해보자. 모바일 애플리케이션은 즉시 반응한다. 화면 하나에 오버레이를 추가하고 목록을 렌더링하며 부드러운 애니메이션과 함께 다른 화면으로 이동할 수 있고 모든게 단위 하나처럼 느껴진다.

 

Mobile apps and desktop apps feel very "reactive" : Things happen instantly, you don't wait for new pages to load or actions to start.

모바일앱과 데스크탑 앱은 반응이 아주 빠르고 새 페이지가 로드될 때까지 기다리지 않아도 된다. HTML을 내려받고 브라우저가 렌더링하기를 기다릴 필요가 없다.

 

예전에는 웹앱에서 링크를 클릭하고 새 페이지의 로드를 기다렸다. 양식에 데이터를 입력하고 버튼을 클릭해서 데이터를 제출하면 응답으로 새 HTML페이지를 얻었다. 이렇게 전통적인 웹페이지에서는 항상 응답을 기다려야했다.

- 이때 JS가 속도개선에 도움을 준다. JavaScript는 로드된 페이지에서 브라우저 내에서 실행된다는 것이 장점이다.       

  (JavaScript runs in the browser - on the loaded page.)

- 화면 뒤에서 새 HTML을 가져오지 않고, 문서객체모델(DOM)이라고 부르는 페이지의 HTML구조를 JS로 조작한다.

  (You can manipulate the HTML structure(DOM) of the page.)

- 모던 JS기반 웹 애플리케이션에서는 새 HTML페이지를 얻고자 요청을 보내는 대신, 단 한번만 실행하고, 이후 화면 뒤에서 데이터만 교환한다. Client Side JS와 Vue와 같은 프레임워크를 사용하여 화면을 업데이트한다.

 

 

하지만 "JavaScript"만 사용하는 것은 이상적이지 않을 수 있다.

이론상으로는 별도의 프레임워크나 라이브러리 없이 "바닐라 자바스크립트"만으로 모든 웹 어플리케이션을 구축할 수 있지만, JS만 사용하면 이상적이지는 않다.

 

왜냐하면,

1) You have to write all code on your own. (→re-invent the wheel)

모든 코드와 로직을 직접 작성해야한다. 즉, 쓸데없는 작업을 계속 해야한다.

 

2) You might write suboptimal code or introduce errors & bugs.

모든걸 처음부터 작성하기 때문에 최적의 코드를 작성하지 못하거나 오류나 버그가 발생할 수 있다.

코드를 올바르게 작성하지 않으면, 성능이 낮아지거나 보안 문제가 발생할 수 있다.

 

3) Working in a team might be harder because not everyone knows your structure and 'code philosophy'.

팀으로 일하기도 더 힘들어진다. 내가 작성한 코드 구조나 코드에 담긴 철학, 사용법 등을 다른사람 모두가 다 아는건 아니므로.

 

이러한 이유들로 Vue와 같은 프레임워크를 사용한다.

- 따라야 하는 명확한 규칙이 있고, 팀에 있는 모두가 그걸 사용해야한다.

- 페이지의 일부 업데이트같은 소소한 내용을 모두 이해할 필요도 없다. 대신 Vue를 사용하여 핵심 비즈니스 로직에 집중하고, 페이지 업데이트처럼 귀찮고 성가신 작업은 Vue에 맡기면 된다.

 

 

4) web frontends

- 사용자가 보는 것과 연관되어있다.

- 서버사이드 프레임워크가 아니며, PHP나 Node와 함께 사용하지 않는다. 물론, 조합해서 사용할 수 있긴 하지만 PHP나 Node.js코드 작성에 도움이 되지는 않는다. 왜냐하면 Vue는 브라우저 사이드 프레임워크이기 때문.

- HTML, CSS, JS 그리고 브라우저의 Vue.js를 사용해 사용자가 보는 것을 제어하고 풍부한 사용자 인터페이스를 웹에서 제공한다.

Vue.js는 프레임워크로서 브라우저에서 실행되는 JS기반 사용자 인터페이스를 구축하는데 도움을 준다.

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.