Vue를 그동안 사용해오면서 그때그때 필요한걸 하나씩 찾아보면서 사용해왔는데, 기본부터 확실하게 하나씩 공부해보자란 생각이 들었다. 그리고 Vue를 사용하려는 사람들을 위해 Vue를 내 것으로 만들 수 있도록 최대한 쉽게 설명하기 위해 기록을 남기려고 한다.
가장 먼저 Vue의 가장 기본적인 컨셉이 무엇인지는 아래 포스팅에서 간단하게 설명을 하였으니 먼저 보길 추천한다.
Vue 시작하기전 알아야할 핵심 특징
목차
Vue Application 만들기
컴포넌트 단위로 파일 분리
컴포넌트 추가
지금부터 Vue 어플리케이션이 어떻게 시작이 되는지부터 파일을 컴포넌트 단위로 분리하는 것까지 3단계로 설명 할 것이다.
■ Vue Application 만들기
Vue가 처음에 어떻게 동작하는지를 쉽게 설명하기 위해 build 과정이 없는 아주 간단한 예제를 만들었다.
지금은 설명을 위해 코드를 이렇게 만들지만 실제로 프로젝트를 할 때는 build 과정을 거치도록 만든다.
아래 소스코드 Vue Application이 처음에 어떻게 시작되는지가 모두 들어있다.
<html>
<head>
<!-- 1. Vue 패키지 로드 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">app container</div>
<script>
// 2. 루트 컴포넌트 정의
const rootComponent = {
data () {
return {
text : 'Hello World'
}
},
template : `<div><h1>{{ text }}</h1><div>`
}
// 3. Vue Application Instance 생성
const app = Vue.createApp(rootComponent)
// 4. Vue Application Instance 마운트
app.mount('#app')
</script>
</body>
</html>결과 페이지는 예상대로 이렇게 나온다.
자! 이제 순서대로 하나하나 뜯어보자.
Vue를 생성해서 렌더링까지 하는 Vue의 첫 시작부분이니 잘 이해하고 넘어가자.
① Vue 패키지 로드
당연한 말이지만 Vue 를 사용하기 위해 Vue 패키지가 필요하다. CDN에서 가져오자.
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>패키지를 로드하면 Vue 라는 전역 객체를 노출한다.
console.log(Vue) 를 찍어보면 Vue 안에 어떤 것들이 있는지 볼 수 있다.
Vue 라는 전역 객체안에 많은 API 들을 제공한다. 잠시 후에 Vue 객체에 있는 API를 사용하게 될 것이다.
② 루트 컴포넌트 정의
Vue는 페이지 자체가 모두 컴포넌트로 이루어져있다. 그리고 컴포넌트들은 아래 그림과 같이 트리 구조를 이룬다.
루트 컴포넌트는 트리 구조에서 최상위에 있는 컴포넌트이다.
루트 컴포넌트를 아래와 같이 정의하자.
const rootComponent = {
data () {
return {
text : 'Hello World'
}
},
template : `<div><h1>{{ text }}</h1><div>`
}컴포넌트를 정의하는 법은 간단하다. 필요한 속성들을 정의해주면 된다.
지금 여기서는 data와 template 만 사용하여 정의하였다. 컴포넌트의 속성은 여러가지가 있지만 오늘은 이 2개만 사용하면 된다.
- data : 컴포넌트에서 사용할 데이터 정의. 주의할 점으로 data 는 항상 함수여야 한다. 컴포넌트가 여러개 생성되도 각각의 독립된 data를 가져야 하기 때문이다.
- template : 컴포넌트를 렌더링 할 HTML 템플릿.
이렇게만 정의해도 하나의 컴포넌트가 된다. 컴포넌트에 대해서는 앞으로 자세히 다루게 될 것이다.
③ 인스턴스 생성
이제 모든 준비는 다 되었다.
Vue 의 createApp 이라는 API를 사용해서 Application Instance를 생성하자.
const app = Vue.createApp(rootComponent)Vue 라는 전역객체의 createApp 이라는 API를 이용하여 Vue Instance를 생성한다. 이때 파라미터로 아까 만든 루트 컴포넌트를 넣어준다. createApp 은 루트컴포넌트를 받아서 Application Instance를 생성하는 함수이다.
아래는 createApp() 의 정의이다.
- Application instance를 생성하는 API이다.
- 첫번째 파라미터가 바로 루트컴포넌트로 사용할 컴포넌트이다.
- 두번째는 props라는 optional한 속성값인데 일단 무시하자.
여기서 Application Instance 란 무엇인가?
Vue Framework으로 동작하는 Application 의 기본 단위이다. Instance 를 생성함으로써 Vue Application이 하나 생성되는 것이다.
어렵게 생각할 필요없다. Vue로 동작하는 인스턴스를 하나 만들었다고 보면 된다.
위의 코드에서 app 이라는 변수가 바로 이 Vue Application Instance를 가리킨다.
이 인스턴스 하나가 결국 웹사이트 전체라고 보면 된다.
인스턴스 내부에서 여러 컴포넌트를 조합해서 페이지를 만들고 페이지간 이동을 하면 결국 하나의 웹사이트가 완성되는 것이다.
하나의 웹사이트에는 Vue Application Instance 하나가 있다라고 생각하면 쉽다.
인스턴스를 여러개 생성도 가능하다. 그냥 createApp() 을 여러번 호출해서 만들면 되기 때문이다.
하지만 굳이 이렇게 하지는 않는다. 오히려 관리가 더 복잡해진다.
const app = Vue.createApp(rootComponent)
const app2 = Vue.createApp(rootComponent)
④ 인스턴스 마운트
이제는 생성된 인스턴스를 화면에 보이도록 HTML Element 어딘가에 연결만 해주면 된다.
Vue Application Instance 에는 mount라는 API가 있다. 이걸 이용하여 HTML Element에 인스턴스를 연결시켜주는 것이다.
아래코드는 createApp으로 만든 인스턴스를 <div id="app"> 에 마운트시킨다.
app.mount('#app')
아래는 mount API의 정의다.
파리미터로 rootContainer가 들어간다. container는 DOM Element 또는 CSS selector가 들어갈 수 있다.
mount() 가 호출되면 지정된 rootCointainer가 루트 컴포넌트로 대체된다.
즉 <div id="app">. ~~ </div> 이 사이에 다른 어떤 것들이 있더라도 사라지게 되는 것이다.
더 정확하게 말하면 컴포넌트에 template 이나 render 함수가 있을 경우에 렌더링이 되면서 대체가 되는 것이다.
아래 소스코드처럼 루트컴포넌트에 template을 삭제하면 #app 컨테이너에 마운트 되더라도 컴포넌트가 렌더링되지 않기 때문에 원래 있던 컨테이너의 모양이 바뀌지 않는다.
<div id="app">app container</div>
const rootComponent = {
data () {
return {
text : 'Hello World'
}
},
// template : `<div><h1>{{ text }}</h1><div>` // template 삭제
}▼
여기까지 Vue를 이용하여 웹사이트를 하나 만들었다. 다시 위로 가서 전체 소스코드를 다시 한번 보고 오자.
■ 컴포넌트 단위로 파일 분리
이제는 이렇게 하나의 파일로 된 소스를 컴포넌트 단위로 파일을 분리시킬 것이다.
Vue를 사용하는 목적중에 하나가 컴포넌트 단위로 파일을 분리해서 모듈화를 하는 것인데, 이것을 어떻게 하는지를 설명할 것이다.
이렇게 해야 프로젝트가 커지더라도 모듈화가 쉬워지고 프로젝트의 관리가 용이해진다.
파일은 이렇게 3개로 나눈다.
index.html // 메인 HTML 페이지
main.js // Vue 인스턴스 시작 스크립트
app.js // 루트 컴포넌트 정의① 메인 HTML 페이지
<!-- index.html --!>
<html>
<head>
<title>Vue App</title>
</head>
<body>
<div id="app">app conatiner</div>
<script type="module" src="/main.js"></script>
</body>
</html>기본 골격이 되는 HTML 페이지를 만들고 main.js 파일을 로드한다.
② Vue 인스턴스 시작 스크립트
App 이라는 컴포넌트를 import 하여 인스턴스를 만들고 마운트한다.
// main.js
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
import App from './app.js'
const app = createApp(App)
app.mount('#app')③ 루트 컴포넌트 정의
컴포넌트를 정의하고 export 한다.
// app.js
export default {
data () {
return {
text : 'Hello World'
}
},
template : `<div><h1>{{ text }}</h1><div>`
}
이렇게 하면 컴포넌트를 파일단위로 만들 export를 하고 다른 곳에서 import 해서 사용할 수 있는 구조가 되었다.
지금은 루트 컴포넌트 하나만 있지만, 뒤에서 컴포넌트를 추가해서 사용하는 방법을 설명할 것이다.
■ 컴포넌트 추가
자 이제 여기에 컴포넌트를 하나 추가해보자. 파일 구조는 아래와 같이 만든다.
index.html // 메인 HTML 페이지
main.js // Vue 인스턴스 시작 스크립트
app.js // 루트 컴포넌트 정의
components / user.js // user components 추가① user component 생성
components 폴더에 user.js 라는 파일에 새로운 컴포넌트를 추가하였다.
// components/user.js
export default {
data() {
return {
name: 'AnalogCoder'
}
},
template: `<div>{{ name }}</div>`
}② 컴포넌트 사용
루트 컴포넌트에 user.js에서 정의한 컴포넌트를 붙여보자.
// app.js
import user from './components/user.js'
export default {
components: {
user
},
data() {
return {
text: 'Hello World'
}
},
template: `<div><h1>{{ text }}</h1><user /></div>`
}컴포넌트 속성중에 새로운 것이 나왔다.
components: {
user
}이것은 현재 컴포넌트에서 사용할 수 있도록 user 라는 컴포넌트를 등록하는 것이다.이렇게 등록하면 template에서 <user> tag로 사용할 수가 있다.
우리는 컴포넌트를 만들어서 어디서든 간편하게 HTML tag로서 사용할 수가 있게 된 것이다. 아무리 복잡한 구조를 가진 컴포넌트라도 외부에서는 그냥 HTML tag 하나만 넣으면 끝나는 것이다.
결과 화면은 아래와 같다.
마무리
지금까지 Vue 어플리케이션을 어떻게 만드는지와 컴포넌트 기반 개발의 기본 골격을 설명하였다.
이제는 컴포넌트를 파일단위로 만들어서 필요한 곳에 가져다가 tag로 붙여서 쓰면 된다.
이제는 모든 페이지를 컴포넌트 단위로 쪼개서 재사용할 수 있도록 만들고 조합하는 일만 남은 것이다.
다음 강좌부터는 컴포넌트를 다루는 법을 하나씩 알아볼 것이다.
'개발' 카테고리의 다른 글
| 자바스크립트 비동기 처리의 변화(callback, Promise, async/await) (0) | 2023.04.09 |
|---|---|
| Web Worker - 브라우저에서도 백그라운드 작업이 가능 (3) | 2023.04.08 |
| 웹사이트에 애니메이션 간단하게 주기 - animate.css (1) | 2023.03.22 |
| Javascript ECMAScript 2016, 2017 추가된 기능 (1) | 2023.03.22 |
| AWS ALB(Application Load Balancer) - IP로 웹사이트 접근 막기 (2) | 2023.03.20 |
댓글