본문 바로가기
2021-1/Expert

Vue.js | 뷰 기본 및 다운로드 방법

by 이망고_ 2021. 10. 4.

뷰는 웹페이지 화면을 개발하기 위한 프론트엔트 프레임워크 입니다. 첫 번째 프로젝트에서 웹팀을 맡게 되어 뷰와 자바스크립트를 공부해야 합니다. 웹팀은 백엔드보다 프론트엔드 개발이고 저의 경우 모든 게 처음이라 웹 제작에도 흥미가 있었지만 대부분의 학생들에게는 비인기과정인 것 같습니다. (기업에서도 프론트엔드보다 백엔드 개발을 선호) 공부하게 된 이유를 짧게 브리핑했으니 뷰에 대한 공부를 시작하도록 하겠습니다.


뷰의 특징


1. 배우기가 쉽습니다. HTML, CSS, 자바스크립트의 기초만 아는 입문자라도 하루 안에 배울 수 있습니다.
2. 리액트 앵귤러에 비해 성능이 우수하고 빠릅니다.  
3. 리액트의 장점과 앵귤러의 장점을 갖고 있습니다. 
- 앵귤러의 양방향 데이터 바인딩과 리액트의 단방향 데이터 흐름의 장점을 모두 결합한 프레임워크.
4. 컴포넌트 기반 프레임 워크 : 레고 블록 조합과 비슷합니다. 잘 조합해서 원하는 모형을 만들고, 코드를 재사용하기가 쉽습니다. 

 

* 리액트 : 자바스크립트 라이브러리의 하나로서, 사용자 인터페이스를 만들기 위해 사용된다. 싱글 페이지 애플리케이션이나 모바일 애플리케이션 개발에 사용될 수 있다. 대규모 또는 복잡한 리액트 애플리케이션 개발에는 보통 라우팅, API 통신 등의 기능이 요구되는데 리액트에는 기본적으로 제공되지 않아 추가 라이브러리가 필요하다. 

 

* 싱글 페이지 애플리케이션 (SPA)  : 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트. 이러한 접근은 연속되는 페이지들간의 사용자 경험의 간섭을 막아주고 애플리케이션이 더 데스크톱 애플리케이션처럼 동작하도록 만들어준다. 

 

* 앵귤러 :  클라이언트 웹 애플리케이션 개발을 위해 만들어진 오픈소스 프레임 워크. 최근의 프론트엔드 라이브러리(또는 프레임워크) 로, React, Vue 와 함께 자주 언급되고 있다. 자바스크립트에서 처리하던 부분의 많은 부분을 HTML 템플릿 내로 가져오면서 자바스크립트는 단순화되고, 데이터의 바인딩도 자유로워서 많은 편리함을 가져다 주었다. 웬만한 기능의 라이브러리는 모두 포함시켜서 자체적으로 제공한다. (하지만 호환성이 없어서 개발자들이 좋아하지 않는다고 한다.)

 

* 양방향 데이터 바인딩 : 화면에 표시되는 값과 프레임워크의 모델 데이터 값이 동기화되어 한쪽이 변경되면 다른 한쪽도 자동으로 변경되는 것

* 단방향 데이터 흐름 : 컴포넌트의 단방향 통신을 의미, 컴포넌트 간에 데이터를 전달할 때 항상 상위 컴포넌트에서 하위 컴포넌트 한 방향으로만 전달하게끔 프레임워크가 구조화되어 있다. 

 

  •  MVVM 패턴 : 화면을 모델(Model) - 뷰(View) - 뷰 모델(ViewModel) 로 구조화하여 개발하는 방식. 마크업 언어나 GUI 코드를 비즈니스 로직 또는 백엔드 로직과 분리하여 개발하는 소프트웨어 디자인 패턴. 즉, 화면 앞단(프론트엔드)의 화면 동작과 관련된 로직과 화면 뒷단(백엔드)의 데이터베이스 데이터 처리 로직을 분리하여 더 깔끔하게 코드를 구성하는 것이다.

뷰 세팅하기 

 

ATOM 설치 https://atom.io/ 

https://nodejs.org/en/ 설치
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd/related 설치

뷰 시작하기 

 

'2021-1 > Expert' 카테고리의 다른 글

LDA | 실습하기  (0) 2021.10.14
LDA | 실습하기  (0) 2021.10.13
LDA | DTM, TF-IDF  (0) 2021.10.13
LDA | Topic Modeling  (0) 2021.10.13
LDA | 실습하기  (0) 2021.10.11