Java를 주 언어로 사용하는 사람에게 이클립스 혹은 인텔리J등의 Tool 익숙합니다. Vue.js를 공부하면서 느낀점은 별도의 Visual Studio Code 를 설치해서 Tool을 따로 써야하는 불편함이 있어서 찾아보았습니다. 미약하지만 이클립스에도 플러그인이 존재를 합니다.
우선 이클립스의 Help 메뉴의 Eclipse Marketplace 메뉴를 클릭합니다.
Marketplace에서 vue를 검색하면 아래와 같이 플러그인이 나옵니다. 이중에서 "Vue.js :: CodeMix 3 Cl 2020.07.22"를 인스톨 해줍니다.
저는 이미 설치를 해서 Installed 라고 나타납니다. 설치 후 이클립스를 재기동하여 프로젝트를 새로 만들어줍니다. New > Project 선택하면 아래와 같은 창이 나오는데 거기서 vue라고 입력하면 아래와 같이 나타납니다.
Vue Project를 선택하고 프로젝트명은 임의로 입력을 합니다. 저는 vue-test라고 했습니다. 여기서 Initialize project contents with 부분을 "A Vue CLI-built application (recommended for production-grade apps)"를 선택하여 줍니다.
이렇게 프로젝트를 생성하면 처음으로 아래와 같은 화면이 열립니다.
일단 terminal 을 열어서 "npm install"을 하고 그리고 "npm run serve"를 실행하여 http://localhost:8080 으로 화면을 볼수 있다고 합니다.
여기서 npm install은 프로젝트의 package.json(or package-lock.json)에 정의된 관련 모듈을 받아주는 것입니다. 이부분도 향후에 자세히 설명을 다시하겠습니다. 일단 기본적으로 설정하고 돌려보겠습니다. 실행전에 vue-cli(npm install -g vue-cli)가 설치되어 있어야합니다.
명령어를 실행하면 무엇인가 설치가 되고 완료가 되면 프로젝트에 node_modules 폴더가 생성됩니다.
이 폴더를 열어보면 엄청나게 많은 모듈이 폴더별로 들어있습니다. 이렇게 저희가 사용하는 모듈의 정의를 package.json(or package-lock.json)에 하면 npm install을 통해서 자동 설치를 할 수 있게됩니다. 그러므로 node_modules 라는 폴더는 팀개발시 공유하지 않고 package.json(or package-lock.json) 파일의 정의된 모듈을 각자 npm intall을 통해 설치하도록 하면 관리가 쉬울 것 같습니다.
다음으로 npm run serve 를 실행해보도록 하겠습니다.
실행하면 위와 같이 나타나고, http://localhost:8080 으로 접속을 하면 아래와 같이 Vue.js 화면이 나타납니다.
이렇게 Vue.js 프로젝트를 이클립스에서 생성하고 사용을 도와주는 플러그인을 확인해 보았습니다. 화면에 npm run build 는 배포를 하기위한 명령어 인데 나중에 관련하여 글을 남기도록 하겠습니다.
Vue.js 의 3.0 버전으로 개발을 진행하기 위해서 편리한 개발 환경 구성을 정리해 보았습니다. 이 글은 책을 보면서 실습하며 작성하였습니다. 기존에 보던 책은 버전도 낮고 너무 이론적인 면이 강해서 실무에 어떻게 적용을 해야할지 난애하였지만, 이번에 구입한 책은 실무 위주로 되어 있어 바로 실무에 적용하기 쉬울 것 같습니다.
개발환경 구성
1. Visual Studio Code 설치
Visual Studio Code는 마이크로 소프트에서 제공하는 개발 IDE 툴입니다. 아래 사이트로 접속해 설치 파일을 받아 설치합니다.
다운로드 페이지를 보면 두개의 다운로드 버튼이 있습니다. 왼쪽 다운로드 버튼은 LTS 버전으로 가장 안정화가 된 버전을 뜻하고, 오른쪽 버튼은 현재 최신 버전입니다. LTS 버전으로 설치를 합니다.
Native 모듈을 설치할 때 필요한 툴을 설치할지에 대한 옵션 선택 단계입니다. 체크 박스를 선택한 후 Next 버튼을 선택해서 다음 단계로 넘어갑니다.
Install 버튼을 선택해서 Node.js 설치를 시작합니다. 사용자 계정 컨트롤 창이 나오면 '예' 버튼을 선택합니다.
Node.js 설치가 완료되면 추가 도구 설치 화면이 아래와 같이 나타납니다. 아무 키나 눌러서 설치를 진행합니다.
설치하는 중간에 Windows PowerShell에 대한 사용자 계정 컨트롤 창이 나타나면 '예' 버튼을 선택합니다. 여기서 '예'를 선택하지 않으면 나중에 Visual Studio Code 의 터미널에서 노드 관련 명령어가 실행이 되지 않기 때문에 반드시 '예'를 선택하여야 합니다.
설치가 모두 완료가 되면 엔터리를 입력해서 종료합니다.
3. 설치확인
Visual Studio Code 를 실행하여 'View > Terminal' 을 실행합니다. 아래와 같이 'node -v' 와 'npm -v' 명령어를 입력하여 설치된 버전이 나타나면 정상적으로 설치가 된것 입니다. Terminal 을 실행 하였을때 cmd 가 아닌 Powershell이 실행되는 경우 정상적으로 버전이 보이지 않는 경우가 있습니다. 이럴경우 'View > Command Palette' 메뉴로 이동하여 검색부분에 'Terminal: Selected Default Profile' 을 입력하고 검색된 결과를 선택합니다. 그리고 거기에 "Command Prompt" 를 선택하고 Visual Studio Code를 재기동하여 주면 아래와 같이 cmd로 나타납니다.
4. Vue 개발을 위한 유용한 Visual Studio Code Extension 설치
Visual Studio Code 에서 Vue 개발을 좀 더 편리하게 할 수 있도록 확장프로그램을 설치 할 수 있습니다. 확장 프로그램 검색은 Visual Studio Code 의 좌측 Extensions 메뉴를 입력하면 나타납니다.
검색창에 'vue'를 입력하면 vue와 관련된 다양한 확장 프로그램이 검색되어 나옵니다.
4.1 Vetur
Vetur 는 Vue 개발을 할때 가장 먼저 설치 하는 확장 프로그램입니다. Vue의 경우 개발되는 파일의 확장자가 .vue 이기 때문에, 처음 vue 파일을 열면 일반적인 프로그램 코드 처럼 코드 안의 변수 혹은 메소드명과 같은 코드의 색상을 다르게 하는 Syntax Highlighting을 지원하지 않고, 일반적인 텍스트 처럼 보이게 됩니다. Vetur는 Vue의 프로그램 문법에 맞는 Syntax Hightlighting을 지원해 줍니다. Vue 프로그램 코드 작성시 사용할 수 있는 프로그램 문법에 대한 가이드를 제공해 줍니다. 또한, 프로그램 코드를 실행하기 전에 문법에 맞지 않는 오류는 물론 잠재적으로 문제가 될 수 있는 코드에 대해서 알려줍니다..
4.2 JavaScript (ES6) code snippets
이 확장 프로그램은 ES6를 포함한 자바스트립트 코드 자동완성을 지원해 줍니다. 여러분은 프로그래밍 언어를 공부하면서 snippet이란 용어를 자주 보게 될것입니다. 여기서 snippet는 재사용 가능한 코드의 작은 조각이라고 보면 됩니다. 이 확장 프로그램을 설치하면 자바스크립트 코드를 구현할 때 일부 코드를 작성하기 시작하면 해당 코드로 등록된 코드 블록이 있으면 화면에 나타나게 되고, 이를 선택하면 코드 블록 전체가 자동으로 완성이 되게 됩니다. 예를들어 for 키워드를 입력하면 snippet에 등로된 4개의 코드 불록을 선택할 수 있도록 가이드가 나타나며, 이 중 하나를 선택하면 자동으로 코드가 완성이 되게 됩니다.
즉, snippet라는 이름을 가지고 있는 확장 프로그램들은 미리 등록된 코드 블록을 바탕으로 코드를 좀 더 빠르고 정확하게 작성할 수 있도록 도와주는 확장 프로그램이라고 이해하시면 됩니다.
4.3 ESLint
ESLint는 ES와 Lint를 합친 말입니다. ES는 ECMA Script의 줄임말이고, Lint는 소스 코드를 분석하여 프로그램 오류, 버그, 스타일 오류, 의심스러운 구조체에 표시를 달아놓기 위한 도구입니다. 즉, ESLint는 자바스크립트 문법의 오류를 찾아주는 확장 프로그램입니다.
4.4 Prettier - Code formatter
자바스크립트, 타입스크립트, JSX, JSON, CSS, SCSS, HTML 코드를 미리 지정한 코드 포멧 스타일로 자동으로 변경해 주는 확장 프로그램입니다. 탭사이즈, 문자열, 코드 들여쓰기, 줄 바꿈 등에 대한 코드 포맷을 미리 지정해 두면, 코드 작성 후 저장 버튼을 누르면 자동으로 정의된 고트 포맷으로 변경을 해줍니다.
Prettier를 설치했다고 해서 바로 적용이 되는 것이 아니라, 설정에서 코드에 대한 포맷터로 Prettier를 선택해 주어야 합니다. Settings 메뉴로 이동합니다.
File > Preference > Settings
검색창에 'formatter'라고 입력하면 'Editor: Default Formatter'를 찾을 수 있습니다. 여기서 "Prettier - Code formatter"를 찾아서 선택합니다. 그리고 아래 보면 'Editor: Format On Save' 라는 옵션이 있습니다. 체크박스를 선택하여줍니다. 저장을 할 때 마다 자동으로 Prettier가 동작되고, 코드 포맷을 맞춰줍니다.
다음으로 Formatter를 적용할 프로그램 언어를 선택합니다. 아래와 같이 HTML > Format 과 JavaScript > Format 을 체크하여 줍니다.
Vue 사용 웹 앱을 개발하기 위해 알아야하는 페이지 이동 방법을 알아보도록 하겠습니다. 페이지 이동방법은 뷰 라우터라는 것이 있습니다. 뷰 라우터는 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이프러리입니다. 이것을 이용하면 뷰로 만든 페이지간 간에 자유로운 이동이 가능해 집니다.
[참고] 라우팅이란 ? 웹 페이지 간의 이동방법, 싱글 페이지 애플리케이션에서 주로 사용, 화면전환이 매끄러움, 사용자 접근성 향상
뷰 라우터를 구현하는 태그는 아래와 같습니다.
<script src="https://unpkg.com/vue-router/dist/vue-router.js"> : 라우터 라이브러리 <router-link to="URL 값"> : 페이지 이동 태그 <router-view> : 페이지 표시 태그
직접 아래 예제를 확인해 보도록 하겠습니다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Router Sample</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<h1>뷰 라우터 샘플</h1>
<p>
<!-- 1 : URL 값을 변경하는 태그 -->
<router-link to="/foo">Foo 이동</router-link>
<router-link to="/bar">Bar 이동</router-link>
</p>
<!-- 2 : URL 값에 따라 갱신되는 화면 영역 -->
<router-view></router-view>
</div>
<script>
// 3 : 컴포넌트 정의
var Foo = { template: '<div>foo</div>'};
var Bar = { template: '<div>bar</div>'};
// 4 : 각 URL에 맞춰 표시할 컴포넌트 지정
var routes = [
{ path:'/foo', component:Foo },
{ path:'/bar', component:Bar }
];
// 5 : 뷰 라우터 정의
var router = new VueRouter({
routes
});
// 6 : 뷰 인스턴스에 라우터 추가
var app = new Vue({
router
}).$mount('#app');
</script>
</body>
</html>
아래는 실행 결과입니다.
뷰 기본 라우팅 방식을 이용하여 페이지를 전환하는 예제입니다.
<router-link>는 화면 상에서 <a> 버튼 태그로 변환되어 표시됩니다. to="" 정의된 텍스트 값이 브라우저 URL 끝에 추가됩니다.
<router-view>는 갱신된 URL에 해당하는 화면을 보여주는 영역입니다. 이곳에 나타낼 화면은 <script>에서 정의합니다.
Foo, Bar 컴포넌트에는 template 속성으로 각 컴포넌트를 구분할 수 있는 정도의 HTML 코드를 정의합니다.
routes 변수에는 URL 값이 /foo 일때 Foo 컴포넌트를, /bar 일때 Bar 컴포넌트를 표시하도록 정의합니다.
router 변수에는 뷰 라우터를 생성하고, routes 를 삽입해 URL에 따라 화면이 전환될 수 있게 정의합니다.
새 인스턴스를 생성하고 라우터의 정보가 담긴 router를 추가합니다.
$mount() API란? el 속성과 동일하게 인스턴스를 화면에 붙이는 역할을 합니다. 인스턴스를 생성할 때 el 속성을 넣지 않아도 $mount()를 이용하면 강제로 인스턴스르 화면에 붙일 수 있습니다.
기본 코드에서는 컴포넌트 1개만 표시되기 때문에 간단합니다. 하지만 실제 구현은 화면에 여러개의 컴포넌트로 분할된 경우가 많습니다. 그럼 여러 개의 컴포넌트를 동시에 표시할 수 있는 라우터인 네스티드 라우터와 네임드 뷰 라는 두가지가 있습니다.
네스티드 라우터
네스티드 라우터는 라우터로 페이지를 이동할 때 최소 2개 이상의 컴포넌트를 화면에 나타낼 수 있습니다. 상위 컴포넌트 1개에 하위컴포넌트 1개를 포함하는 구조로 구성됩니다. 아래와 같은 구조입니다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Nested Router Sample</title>
</head>
<body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<p>
<router-link to="/user/foo">/user/foo</router-link>
<router-link to="/user/foo/profile">/user/foo/profile</router-link>
<router-link to="/user/foo/posts">/user/foo/posts</router-link>
</p>
<!-- 1 : User 컴포넌트가 뿌려질 영역 -->
<router-view></router-view>
</div>
<script>
// 2 : 컴포넌트의 내용 정의
var User = {
template: `
<div class="user">
<h2>User {{ $route.params.id }}</h2>
<router-view></router-view>
</div>
`
};
const UserHome = { template: '<div>Home</div>' };
const UserProfile = { template: '<div>Profile</div>' };
const UserPosts = { template: '<div>Posts</div>' };
// 3 : 네스티드 라우팅 정의
var routes = [
{ path: '/user/:id', component: User,
children: [
// UserHome will be rendered inside User's <router-view>
// when /user/:id is matched
{ path: '', component: UserHome },
// UserProfile will be rendered inside User's <router-view>
// when /user/:id/profile is matched
{ path: 'profile', component: UserProfile },
// UserPosts will be rendered inside User's <router-view>
// when /user/:id/posts is matched
{ path: 'posts', component: UserPosts }
]
}
];
// 4 : 뷰 라우터 정의
var router = new VueRouter({
routes
});
// 5 : 뷰 인스턴스에 라우터 추가
var app = new Vue({ router }).$mount('#app')
</script>
</body>
</html>
아래는 실행 결과 입니다.
User 컴포넌트를 상위 컴포넌트로 놓고 URL에 따라 각각의 컴포넌트를 표시하는 코드입니다. 네스티드 라우터와 기본 라우터의 차이점은 최상위 컴포넌드에도 <router-view>가 있고, 최상위 컴포넌트의 하위 컴포넌트(User)에도 <router-view>가 있다는 것 입니다. 네스티드 라우터는 화면을 구성하는 컴포넌트의 수가 적을 때는 유용하지만 많은 컴포넌트를 표시하는데는 한계가 있습니다. 이것을 해결할 수 있는 방안이 네임드 뷰입니다.
네임드 뷰
네임드 뷰는 특정 페이지로 이동했을 때 여러 개의 컴포넌트를 동시에 표시하는 라우팅 방식입니다. 네스티드 라우터 방식은 상위 컴포넌트가 하위 컴포넌트를 포함하는 형식이지만, 네임드 뷰는 같은 레벨에서 여러 개의 컴포넌트를 한 번에 표시합니다.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Named View Sample</title>
</head>
<body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!-- 1 : 라우팅 영역 정의 -->
<div id="app">
<router-view name="header"></router-view>
<router-view></router-view>
<router-view name="footer"></router-view>
</div>
<script>
// 2 : 컴포넌트의 내용 정의
var Body = { template: '<div>This is Body</div>'};
var Header = { template: '<div>This is Header</div>'};
var Footer = { template: '<div>This is Footer</div>'};
// 3 : 네스티드 라우팅 정의
var routes = [
{ path: '/', components: {
default : Body,
header : Header,
footer : Footer
}
}
];
// 4 : 뷰 라우터 정의
var router = new VueRouter({
routes
});
// 5 : 뷰 인스턴스에 라우터 추가
var app = new Vue({ router }).$mount('#app')
</script>
</body>
</html>
아래는 실행 결과 입니다.
위 코드를 실행하면 URL 값 '/'에 의해 네임드 뷰가 바로 실행됩니다. 코드를 살펴보면 아래와 같습니다.
<router-view>에 name 속성을 추가하는데 name 속성은 아래 components 속성에 정의하는 컴포넌트와 매칭하기 위한 속성입니다. name 속성이 없는 것은 default로 표시될 컴포넌트를 의미합니다.
Body, Header, Footer 컴포넌트의 내용에 담길 객체를 선언합니다.
라우팅정보를 정의합니다.
뷰 라우터를 정의합니다.
뷰 인스턴스에 라우터를 추가합니다.
네임드 뷰를 활용하면 특정 페이지로 이동했을 때 해당 URL에 맞추어 여러 개의 컴포넌트를 한 번에 표시할 수 있습니다.
지난 글에 이어서 컴포넌트에 대하여 알아보도록 하겠습니다. 이번에는 컴포넌트 간 통신에 대하여 자세히 알아 봅니다.
컴포넌트
- 컴포넌트 통신하기
. 컴포넌트 간 통신과 유효범위
뷰는 컴포넌트로 화면을 구성하므로 같은 웹 페이지라도 데이터를 공유할 수 없습니다. 그 이유는 컴포넌트마다 자체적으로 고유한 유효 범위를 갖기 때문입니다. 이것은 뷰 프레임워크 내부적으로 정의된 특징이라고 합니다. 각 컴포넌트의 유효 범위가 독립적이기 때문에 다른 컴포넌트의 값을 직접적으로 참조할 수가 없다는 것 입니다.
뷰 프레임워크 자체에서 정의한 컴포넌트 데이터 전달 방법을 따라야 값을 참조할 수 있습니다. 가장 기본적인 데이터 전달 방법은 바로 상위(부모) - 하위(자식) 컴포넌트 간의 데이터 전달 방법입니다.
상위 컴포넌트의 HTML 코드에 등록된 child-component 컴포넌트 태그에 v-bind 속성을 추가합니다. v-bind 속성의 왼쪽 값은 하위 컴포넌트에서 정의한 props 속성을 넣고, 오른쪽 값은 하위 컴포넌트에 전달할 상위 컴포넌트의 data 속성을 지정합니다.
<child-component v-bind:props 속성이름="상위 컴포넌트의 data 속성"></child-component>
Vue.component() 를 이용하여 하위 컴포넌트 child-component를 등록
child-component 내용에 props 속성으로 propsdata 를 정의
HTML에 컴포넌트 태그 추가 v-bind 속성 propsdata="message" 는 상위 컴포넌트의 message 속성 값을 하위 컴포넌트의 propsdata로 전달 함
child-component 의 template 속성에 정의된 값으로 message 에 정의된 텍스트가 됨
여기서 인스턴스가 상위 컴포넌트가 되며, child-component가 하위 컴포넌트가 됩니다. 이렇게 새 컴포넌트를 등록한 인스턴스를 최상위 첨포넌트라고도 부릅니다.
. 하위에서 상위 컴포넌트로 이벤트 전달하기
이번에는 하위 컴포넌트에서 상위 컴포넌트로 이벤트를 발생시켜 보겠습니다. 상위 컴포넌트는 하위 컴포넌트의 특정 이벤트가 발생하기를 기다리고 있다가 하위 컴포넌트에서 특정 이벤트가 발생하면 상위 컴포넌트에서 해당 이벤트를 수신하여 상위 컴포넌트의 메서드를 호출하는 방식 입니다.
이벤트 발생과 수신은 $emit() 과 v-on: 속성을 사용하여 구현합니다. 각각의 형식은 아래와 같습니다.
// 이벤트 발생 this.$emit('이벤트명');
// 이벤트 수신 <child-component v-on:이벤트명="상위 컴포넌트의 메서드명"></child-component>
$emit()을 호출하면 괄호 안에 정의된 이벤트가 발생합니다. $emit()을 호출하는 위치는 일반적으로 하위 컴포넌트의 특정 메스트 내부입니다. 이때 this는 하위 컴포넌트를 가리킵니다.
호출한 이벤트는 하위 컴포넌트를 등록하는 태그에서 v-on:으로 받습니다. 속성의 값에 이벤트가 발생했을 때 호출될 상위 컴포넌트의 메서드를 지정합니다. 아래는 예제 코드입니다.
showLog() 메서트 안에서 this.$emit('show-log') 가 실행되어 show-log 이벤트가 발생
show-log 이벤트는 <child-component> 에 정의한 v-on:show-log 에 전달되고 지정한 printText() 를 실행
printText() 에서 콘솔에 로그를 출력
뷰에서는 미리 정의해 놓은 데이터 전달 방식에 따라 일관된 구조로 애플리케이션을 작성하게 됩니다. 그러므로 개발자 개개인의 스타일대로 구정되지 않고, 애플리케이션의 모두 동일한 데이터 흐름을 갖습니다. 이는 다른 사람의 코드를 빠르게 파악할 수 있어서 협업하기에 좋습니다.
. 이벤트 버스
상위에서 하위로 props를 전달하고 하위에서 상위로 이벤트를 전달하는 방법을 알아보았습니다. 이번에는 같은 레벨에 있는 컴포넌트 혹은 관계가 없는 컴포넌트 간 통신은 어떻게 해야할까요? 이럴 경우 이벤트 버스를 활용하면 원하는 컴포넌트에 바로 데이터를 전달할 수 있습니다. 이벤트 버스의 형식은 다음과 같습니다.
// 이벤트 버스를 위한 추가 인스턴스 1개 생성 var eventBus = new Vue();
컴포넌트란 조합하여 화면을 구성할 수 있는 블록을 의미합니다. 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발할 수 있습니다. 화면의 영역을 컴포넌트로 쪼개서 재활용할 수 있는 형태로 관리하면 나중에 코드를 다시 사용하기가 편리합니다. 참고로 컴포넌트 간의 관계는 자료구조의 트리(Tree) 모양과 유사합니다.
- 컴포넌트 등록하기
컴포넌트를 등록하는 방법은 전역과 지역 두 가지가 있습니다.
지역(Local) 컴포넌트 : 특정 인스턴스에서만 유효한 범위를 가지고 있음, 특정 범위에서만 사용
전역(Global) 컴포넌트 : 여러 인스턴스에서 공통으로 사용할 수 있음, 뷰로 접근 가능한 모든 범위에서 사용 가능
전역 컴포넌트 등록
뷰 라이브러리를 로딩하고 나면 접근 가능한 Vue 변수를 이용하여 등록합니다. Vue 생성자에 .component()를 호출하여 됩니다. 형식은 아래와 같습니다.
간단한 화면부터 복잡한 화면까지, 멋진 화면을 만들기 위해서는 UI를 생각해 봐야합니다. 이를 설계라고 하는데, 인스턴스와 컴포넌트가 있어야 합니다. 이 두가지에 대해서 알아보도록 하겠습니다.
인스턴스와 컴포넌트를 레고에 비유한다면 인스턴스는 레고를 조립하는 기본 판을, 컴포넌트는 레고 블록을 의미한다.
뷰 인스턴스
뷰로 화면을 개발하기 위해 필수적으로 생성해야하는 기본 단위입니다. 인스턴스의 생성은 아래와 같은 형식으로 생성을 합니다.
new Vue({ ... });
위에서 new Vue() 로 인스턴스를 생성할 때 Vue를 생성자라고 합니다. Vue 생성자는 뷰 라이브러리를 로딩하고 나면 접근할 수 있습니다. 뷰로 개발할 때 필요한 기능들을 생성자에 미리 정의해 놓고 사용자가 그 기능을 재정의하여 편리하게 사용하도록 하기 위해서 입니다.
- 옵션
옵션 속성은 인스턴스를 생성할 때 재정의할 data, el, template 등의 속성을 의미합니다.
el : 뷰로 만든 화면이 그려지는 시작점을 의미, 뷰 인스턴스로 화면을 렌더링할 때 화면이 그려질 위치의 돔 요소를 지정해 주어야 한다.
template : 화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성
methods : 화면 로직 제어와 관계된 메서드를 정의하는 속성
created : 뷰 인스턴스가 생성되자마자 실행할 로직을 정의할 수 있는 속성
- 유효 범위
뷰 인스터스를 생성하면 HTML의 특정 범위 안에서만 옵션 속성들이 적용되어 나타납니다.이것을 유효 범위라고 합니다. 인스턴스의 유효범위는 el 속성과 밀접한 관계가 있습니다. 아래는 new Vue()로 인스턴스를 생성하고 나서 화면에 인스턴스 옵션 속성을 적용하는 과정입니다.
뷰 라이브러리 파일 로딩 → 인스턴스 객체 생성 → 특정 화면 요소에 인스턴스를 붙임 → 인스턴스 내용이 화면 요소로 변관 → 변환된 화면 요소를 사용자가 최종확인
인스턴스의 유효 범위를 확인하기 위해서는 아래와 같이 유효 범위를 벗어나게 코딩을 해 보면 됩니다.
<div id='app'>
</div>
{{ message }}
인스턴스의 유효 범위는 el 속성으로 지정한 <div id='app'> 태그 아래 요소입니다. 위의 코드와 같이 {{ message }}가 유효범위 밖에 있으면 뷰에서 인식하지 못하기 때문에 화면에는 {{ message }} 그대로 출력됩니다.
- 라이프 사이클
인스턴스의 상태에 따라 호출할 수 있는 속성이 있습니다. 이것을 라이프 사이클 속성이라고 합니다. 그리고 라이프 사이클 속성에서 실행되는 커스텀 로직을 라이프 사이클 훅(hook)이라고 합니다. (옵션 부분에서 살펴본 created 와 같은 속성) 라이프 사이클 속성에는 총 8개가 있습니다.
라이프 사이클 단계를 크게 나누면 인스턴스의 생성, 생성된 인스턴스를 화면에 부착, 화면에 부착된 인스턴스의 내용이 갱신, 인스턴스가 제거되는 소멸의 4단계로 이루어 집니다. 각 단계 사이에 라이프 사이클 속성 created, mounted, updated 등이 실행됩니다.
beforeCreate : 인스턴스가 생성되고 나서 가장 처음으로 실행되는 라이프 사이클 단계, data 속성과 method 속성이 아직 인스턴스에 정의되어 있지 않음. 화면 요소에도 접근 불가
created : beforeCreate 라이프 사이클 단계 다음에 실행되는 단계, data 속성과 method 속성에 정의된 값에 접근하여 로직을 실행할 수 있지만, 아직 인스턴스가 화면 요소에 부착되지 전이기 때문에 template 속성에 정의된 돔 요소로 접근 불가, 컴포넌트가 생성되고 나서 실행되는 단계이기 때문에 서버에 데이터를 요청하여 받아오는 로직을 수행하기 좋음.
beforeMount : created 단계 이후 template 속서에 지정한 마크업 속성을 render() 함수로 변환한 후 el 속성에 지정한 화면 요소에 인스턴스를 부착하기 전에 호출되는 단계, render()함수가 호출되기 직전의 로직을 추가하기 좋음
mounted : el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 호출되는 단계, 화면 요서에 접근이 가능하여 제어를 하는 로직을 수행하기 좋음.
beforeUpdate : el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 인스턴스에 정의한 속성들이 화면에 치환됨. 치환된 값은 뷰의 반응성을 제공하기 위해 $watch 속성으로 감시함. 이를 데이터 관찰이라함. 관찰하고 있는 데이터가 변경되면 가상 돔으로 화면을 다시 그리기 전에 호출되는 단계, 변경 예정인 새 데이터에 접근할 수 있어 변경 예정 데이터의 값과 관련된 로직을 미리 넣을 수 있음.
updated : 데이터가 변경되고 나서 가상 돔으로 다시 화면을 그리고 나면 실행되는 단계, 데이터 변경 후 화면 요소 제어와 관련된 로직을 추가하기 좋은 단계
beforeDestroy : 뷰 인스턴스가 파괴되기 직전에 호출되는 단계, 아직 인스턴스에 접근 가능, 뷰 인스턴스의 데이터를 삭제하기 좋은 단계
destoryed : 뷰 인스턴스가 파괴되고 나서 후출되는 단계, 뷰 인스턴스에서 정의한 모든 속성이 제거되고 하위에 선언한 인스턴스들 또한 모두 파괴됨
개발자 도구의 Console 을 보면 뷰 라이프 사이클의 흐름대로 beforeCreate, created, mounted, updated 가 표시되는 것을 확인할 수 있습니다. updated는 mounted 에서 this.message 의 값을 변경하여 데이터 변경이 일어나 화면이 다시 그려지며 호출이 됩니다.
3. 편한 코딩을 위하여 테마를 설치합니다. 메뉴의 [File -> Setting] 을 선택하여 "Install" 탭을 클릭하면 테마를 설치할 수 있는 탭이 나타납니다. 검색하는 부분을 부면 "Themes" 버튼이 있습니다. 이 버튼을 클릭하고 검색창에 "seti-ui"를 입려하면 검색 결과나 나타납니다. 아래 화면에 표시된 "Install" 버튼을 클릭하여 테마를 설치합니다.
seti-ui 는 직관적인 파일의 아이콘을 제공하여 파일 구분이 쉽게합니다.
같은 방법으로 "atom-material-syntax-dark" 를 검색하여 설치합니다. 이 테마는 자바스크립트 코드 구문 강조색의 조합이 잘 되어 있어 코드의 가독성을 높여줍니다.
4. 설치한 테마를 적용하여 봅니다. [File->Setting] 에서 나오는 탭에서 "Themes" 을 눌러 UI Theme 드롭 다운 박스를 선택하여 설치한 "Seti"를 석탠합니다.
마찬가지로 Syntax Theme 드롭 다운 박스를 클릭하여 "Atom Material Dark" 를 선택하여 적용합니다.
5. 아톰 패키지를 설치하여 개발에 유용한 기능들을 추가적으로 설치합니다. [File -> Setting]에서 Install 탭에 패키지 부분에 "language-vue" 로 검색하여 아래 보이는 것과 같은 것을 설치합니다. 패키지는 별도의 적용은 없으나 아톰 에디터를 재실행하여야 적용이 됩니다.
아톰 에디터를 재실행하고 새로운 파일 'Main.vue' 를 만듭니다. 그리고 생성된 파일에 tem을 입력하면 아래와 같이 자동 완성 기능이 표시됩니다. 이것을 선택하면 자동으로 기본 코드구조가 갖춰집니다.
- Node.js 설치
Node.js는 서버 사이드 자바스크립트로, 서버 측에서 실행되는 자바스크립트 실행 환경을 의미합니다. 뷰 CLI(Command Line Interface)를 이용하여 쉽게 뷰 프로젝트를 구성하려면 Node.js가 설치되어 있어야 합니다.
1. Node.js 사이트에서 설치파일을 다운로드 합니다. LTS 버전으로 다운을 합니다. Current 버전보다 안정적인 버전이라고 합니다.
2. 다운로드한 파일을 실행하여 설치를 진행하면 Node.js 와 Node 패키지 매니저(NPM, Node Package Manager)가 컴퓨터에 설치됩니다. 설치가 완료되었으면 명령 프롬프트에서 node -v 를 실행합니다. 정상적으로 설치가 되었다면 아래와 같이 Node.js 의 버전이 표시됩니다.
- 뷰 개발자 도구 설치하기
뷰 개발자 도구는 크롬 프러그인 입니다. 뷰로 개발할 때 도움을 주는 유용한 도구로, 뷰로 만든 웹 앱의 구조를 간편하게 디버깅하거나 분석할 수 있습니다.
1. 구글에서 vue.js devtools 를 검색하여 Chrome 웹스토어 확장프로그램 "Vue.js devtools" 로 이동합니다. 화면에 보이는 "Chrome에 추가" 버튼을 클릭하여 설치합니다.
위 코드는 html 기본 구조에 <div> 태그를 하나 추가하고, 뷰 라이브러리를 로딩한 후 뷰로 Hello Vue.js! 라는 간단한 메시지를 출력하는 코등입니다. index.html 을 브라우저로 실행하면 아래와 같은 화면이 나타납니다.
개발자 도구를 실행하여 코드를 확인하도록 합니다. 크롬에서 개발자 도구는 F12 키를 누르면 아래와 같이 나타납니다. 개발자 도구의 Console 탭을 클릭하면 두개의 로그가 나타납니다. 첫번째로그는 "뷰 크롬 익스텐션을 다운로드하라는 로그"입니다. 서버에서 띄운 것이 아니라 파일 시스템에서 접근하여 브라우저로 실행했기 때문에 나타나는 것이라고 합니다.
이 부분을 해결하기 위하여 크롬 확정 플러그인 설정을 변경해야합니다. 크롬 브라우저의 메뉴에서 아래 경로의 [확장 프로그램]을 선택합니다.
아래와 같은 새로운 페이지가 열리고 설치된 확장 플러그인 목록이 표시됩니다. Vue.js devtools 의 세부 정보 버튼을 클릭합니다.
세부정보창에 나오는 메뉴중 "파일 URL에 대한 엑세스 허용"을 활성화 하여 줍니다.
그리고 다시 페이지를 실행하면 첫번째 로그가 사라져 있습니다.
개발자 도구에서 Vue 탭을 확인합니다. 페이지 가운데에 보이는 '<Root>=$0'을 클릭하면 왼쪽의 'Hello Vue.js!' 텍스트가 강조되면서 오른쪽에 루트 컴포넌트에 대한 상세 내용이 표시됩니다.
화면상으로 표시된 'Hello Vue.js!' 텍스트는 최상위 컴포넌트의 data 속성인 message의 값이라는 것을 알 수있습니다.
웹프로그램 개발자로 15년 정도 일을 했는데 가장 힘든 것이 신기술의 등장이라고 생각합니다. 30대 때는 입문 서적 보고 어느 정도 흐름 파악하고 맨몸으로 부딪혀 개발을 하며 익히고 그랬습니다. (그리운 나의 30대 ㅜㅜ) 40대가 되어서 그런지 기억력도 가물가물하고, 무서운게 점점 많아져서 인지, 이제는 맨몸으로 부딪혀가며 개발을 하면 이해력도 떨어지고 함수나 문법도 기억이 안나는 경우가 상당합니다. 그래서 앞으로 이 작은 공간에 개인적으로 공부하고 익힌것은 정리하여 두도록 하겠습니다.
○ Front-End, Back-End, Full Stack ???
몇 년 전까지만 하더라도 웹프로그램 개발자는 전천후 파이터와 같았습니다. 회사생활 초기에는 Front-End, Back-End라는 개념도 그다지 없었고 사용자 화면부터 WEB/WAS/DB서버 설정 및 세팅 모든 부분을 두루두루 알아야 했었습니다. 또, 그렇게 사수한테 배웠고 그래야만 문제가 발생해도 빠른 대응이 되었으니까요. 하지만 점점 분야가 나눠지는 추세인것 같습니다. 서론이 너무 길었고, 웹프로그램 개발영역의 차이를 알아보고 어느 영역인지 확인해 보도록 하겠습니다.
Front-End : 사이트 이용자가 보는 부분(HTML/CSS/JAVASCRIPT 등등)을 개발 합니다. 즉, 뷰(View) 부분을 개발하는 사람을 이야기합니다.
Back-End : 사이트 이용자가 눈으로 보지 못하는 부분(서버코딩, DB활용, API제작, User Interface 등등)을 개발 합니다. 주로 서버단에서 비즈니스 로직을 짜거나 데이터를 처리하는 부분을 담당하는 사람을 이야기합니다.
Full Stack : 다양한 환경 및 플랫폼을 이해하고 사용되는 대부분의 언어와 지식을 갖춘 인재를 얘기합니다. Front-End와 Back-End를 다 한꺼번에 다 하는 사람입니다. (나네...나!! ㅋㅋ)
그렇다면 Full Stack 개발자가 가장 잘하는 거 아니냐?? 라는 생각을 하시겠지만, 그건 아닙니다. 업무분담이 어떻게 나누어 지는지의 차이이고, 업무 체계가 잘 잡혀있는 회사는 이러한 업무분담이 잘 나누어져 있는 경우가 많습니다. 그리고 개발자도 한쪽만 집중해서 하는 것이 이것저것 다 하는 것보다 편합니다.
(소규모 프로젝트 혹은 프로젝트 초창기에는 Full Stack 개발자를 더 선호한다는 개인적인 의견입니다.)
○ Vue.js 를 선택하고 공부하게 된 이유
2~3년전에 같은 동호회를 하는 사람이 Vue.js로 프로젝트를 하며 처음 용어를 접하게 되었고, 요즘 회사에서 Front-End 프레임워크로 Vue.js 를 사용한다는 이야기를 들었습니다. 그래서 Vue.js를 공부해야 겠다고 생각을 했습니다. (그래.. 이제 넥사크로는 버리자.. ) 개인적으로 Vue.js 입문 서적을 구매하여 공부하며 이곳에 요약을 하고 나름의 공부를 시작하려 합니다.
○ Vue.js 란 무엇인가?
빠르게 변화하는 Front-End 시장에서 요즘 가장 주목 받고 있는 것이 Vue.js 가 아닐까 생각이 듭니다. Vue.js 가 무엇인지 하나씩 정리를 해보겠습니다.
탄생 : 앵귤러의 명시적 데이터바인딩과 같은 필수적인 요소들만 가지고 화면을 구현하기 시작했고, 오픈 소스화하면서 많은 사람들이 참여하여 프레임워크의 기능을 붙이기 시작
장점 . 배우기가 쉽다. . 리액트와 앵귤러에 비해 성능이 우수하고 빠르다. . 리액트와 앵귤러의 장점을 가지고 있다.
특징 . MVVM 패턴의 뷰 모델에 해당하는 화면단 라이브러리 . 컨포넌트 기반의 프레임워크 . 리액트와 앵귤러의 장점을 가진 프레임워크
간단하게 Vue.js 가 무엇인지 정리하였습니다. 근데 "리액트, 앵귤러가 뭐야?", "이런거 안해봤는데.. " 라고 생각을 하시는 분이 있을지 모르겠습니다. 괜찮습니다. 저도 잘 모릅니다. (저런 기술이 있다는 것을 듣기만 했습니다.) 리액트, 앵귤러를 지금 배울것도 아니니까요. 그럼 다음에는 환경설정과 간단한 프로젝트를 만들어 보도록 하겠습니다.
