Vue.js 소개 및 개요 Hello World 만들어보기 01

Vue.js 소개 및 개요 Hello World 만들어보기

Vue.js를 처음 접하게 된 지 어느덧 6년이 지났습니다.

저는 Vue.js를 이용해서 프로젝트를 참여해본 경험은 없습니다. 하지만 주위 회사 동료분들은 꽤나 많이들 사용하시더라고요. 어느 곳을 가나 자바스크립트는 기본 소양이므로 SPA ( Single Page Application ) 관련 기술을 하나 정도는 충분히 공부해두면 훗날 도움이 될듯합니다.

Vue.js는 프론트엔드 기술 중 하나입니다. SPA 기술들 중 하나입니다.

J-Query를 아직도 많이 사용하고 있지만 React.js, Angular.js, Vue.js 프런트 엔드 삼대장 중 하나인 Vue.js를 공부해 봅니다. <참고로 Angular.js 는 2021년 12월 31일 부로 LTS 지원이 중단되었습니다.>

프론트 엔드 삼대장

Angular.js 구글에서 만든 타입스크립트 기반의 오픈 프레임워크
React.js 구) 페이스북에서 만든 자바스크립트 라이브러리
Vue.js 구글 앵귤러 팀에 속해 있던 중국인 개발자 에반유가 만든 자바스크립트 프레임워크

SAP ( Single Page Application ) 는 무엇인가?

기억을 더듬어 보면, 특정 웹페이지에서 조회 버튼을 누르다던가 어떤 이벤트가 일어나면 화면이 잠시 깜박이거나 프로그레스바가 돌면서 동일한 화면이라도 다시 로딩이 되는 경험이 있텐데요.

서버로부터 새로운 페이지를 불러오기 때문에 일어나는 현상 입니다.

SPA는 서버로부터 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로 사용의 편의성을 증대시키는 기술입니다. 장점은 대표적으로 아래와 같습니다.

자연스럽게 변경되는 웹 페이지 - 웹 페이지의 데이터만 읽어 들여 매끄러운 효과
서버와 프론트엔드의 역할 분담 - 필요한 데이터 처리에만 집중
네이티브 앱 대신으로도 사용 가능한 빠른 성능 - 필요한 부분만 변경되는 최적화

Vue.js 개발 환경 및 준비

Node.js 기반으로도 가능하지만,

CDN ( Content Direct Network )기반 또는 vus.js 파일을 로컬 컴퓨터에 옮겨 놓고 더욱 빠르고 간단하게 핵심을 공부할 수 있는 환경을 만듭니다.

예제 파일을 만들 때마다, html 파일 안에 <header> </header> 사이 태그에 아래 script를 위치합니다.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

또는, 아래 사이트에서 vue.js를 복사해서 로컬 PC Vue프로젝트 안에 위치해서 사용할 수도 있습니다.

저의 경우 vue.js 파일을 js 폴더 아래 만들고, 위의 주소에서 내용을 복사해서 로컬 vue.js 파일 안에 붙여 넣기를 했습니다.

Vue 확장팩 설치

Visual Studio Code 기반에서 Vue를 편하게 사용하려면, 몇 가지 확장팩을 선택합니다.

Vetur, Vue 3 Snippets 두 개 정도 설치하면 Vue 관련 태그나 자동완성 기능 등을 활용할 수 있게 됩니다.

Vetur

Vue 3 Snippets

Hello world 만들어볼까요?

Helloworld.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Vue.js sample</title>
		<link rel="stylesheet" href="css/style.css" >
        <script src="js/vue.js"></script>
        <script>
			window.onload = function(){
				new Vue({
					el: "#app",
					data: {
						message : 'Hello World'
					},
					methods: {
					}
				})
			}
		</script>
	</head>
	<body>
		<h2>Vue js 공부 예제 : Hello World</h2>
		<div id="app">
			<p> {{ message }}</p>
		</div>
	</body>
</html>

실행 결과

프로젝트 구성, 설명

1. 저는 css폴더와 js폴더를 만들고 이곳에 앞으로 예제에 사용할 stylee.css, vue.js 파일 등을 위치시켰습니다.

2. Html을 먼저 읽어 들이고 Javascript 소스를 실행하기 때문에 window.onload 함수를 사용해서 순차적으로 실행될 수 있도록 구성했습니다.

MVVM ( Model - View - ViewModel )

mvvm 갑자기 어려운 단어가 튀어나왔는데요. 지금은 이해가 안 될 수도 있으니 그냥 읽어만 보세요.

Vus.js는 데이터와 뷰를 연결해주는 역할을 합니다.

Model은 데이터를 의미합니다. 예) 데이터베이스에서 꺼내온 데이터도 하나의 데이터 종류입니다.

그리고 이 데이터를 ViewModel에 연결해주는 방법에 대해 고민하면 됩니다.

1.큰 흐름은 데이터를 만들고(Model).2.표시하는 View를 생각하고(View) 3.데이터와 View를 연결한다.(ViewModel)

1. 데이터를 만든다는 것은 데이터를 Database에서 가져오는 어떤 작업, 어떤 파일 안의 내용도 될 수 있고요. json 파일

2. html을 구성하는 특정위치의 요소들

3. 데이터를 특정위치의 요소들에 적절히 바인딩(연결) 한다.

예제 용량이 적으니 제가 만든 환경 소스를 zip으로 첨부합니다.

vue_edu.zip

0.10MB

오늘은 Vue.js가 무엇인지 알아봤고 간단한 실습, 개발환경, Hellord.html도 작성을 해봤습니다.

저작자표시 비영리 변경금지

'Web Front 개발공부 > Vue.js' 카테고리의 다른 글

Vue.js 강좌 뷰 인스턴스 06 (0)	2022.12.26
Vue.js 강좌 Html 요소의 속성 지정 v-bind 05 (0)	2022.12.25
Vue.js 강좌 사용가능한 데이터형(타입)과 종류 04 (2)	2022.12.25
Vue.js 강좌 텍스트 바인딩, 데이터 표시 03 (2)	2022.12.24
Vue.js 강좌 클릭한 횟수를 표시하는 버튼 만들기 02 (0)	2022.12.24

슬기로운 개발자 생활

Vue.js 소개 및 개요 Hello World 만들어보기 01