정말 간단하게 프론트엔드를 즉, 브라우저에 렌더링 되는 부분을 공부해서 서비스 좀 만들어보려고 했다.
근데 주변에서 추천하길래 한 번 알아본다
배경, 기반언어, 동작방식, 구성요소 등
Vue.js란?
Vue.js는 웹 개발에서 브라우저에서 동작하는 인터페이스를 개발할 때 사용하는 JavaScript 프레임워크
Vue는 사용자 인터페이스를 유연하면서도 강력하게 구축할 수 있도록 지원하는 도구
Vue의 주요 특징은 컴포넌트 기반 아키텍처와 반응형 시스템
등장 배경
Angular.js에서 영감을 받았지만, 더 가볍고 유연한 프레임워크를 목표로 개발
점진적으로 채택할 수 있는(Progressive) 프레임워크를 지향
기반 언어
Vue는 JavaScript와 TypeScript 기반으로 동작하며, HTML과 CSS와 긴밀하게 통합되는 특징
이를 통해 개발자는 별도의 학습 곡선 없이 Vue로 애플리케이션을 쉽게 개발할 수 있음
Vue는 단일 파일 컴포넌트(Single File Component) 구조를 제공하고 .vue 확장자를 사용해 HTML, JavaScript, CSS를 한 파일 안에 정의할 수 있음
동작 방식
Virtual DOM: Vue는 성능을 최적화하기 위해 메모리상에서 가상 DOM을 사용하여 필요한 부분만 업데이트하는 구조임
반응형 데이터 시스템: Vue의 핵심은 반응형 데이터 시스템으로, 데이터가 변경되면 자동으로 화면이 업데이트되며 개발자는 직접 DOM을 조작할 필요가 없음
컴포넌트 기반 아키텍처: Vue는 컴포넌트를 기반으로 하는 아키텍처를 사용하여 코드의 재사용성과 유지보수가 용이
구성 요소
App Vue
App.vue는 Vue 애플리케이션의 루트 컴포넌트로, 모든 컴포넌트의 최상위 부모
전체 애플리케이션 구조를 조정하며 애플리케이션의 주요 레이아웃과 전역 설정을 정의
루트 컴포넌트 역할: App.vue는 애플리케이션의 시작점으로, 하위 컴포넌트를 모두 포함함
전역 레이아웃 관리: 애플리케이션의 기본 레이아웃을 정의하며, 전역 스타일이나 레이아웃을 적용함
라우팅 컨테이너: 여러 페이지를 이동하는 SPA(Single Page Application) 구조에서 Vue Router를 사용해 App.vue가 라우팅 컨테이너 역할을 수행함
알아봤지만 이렇게 봐서는 전혀 모른다.
항상 예시를 들어봐야 한다.
이 예시를 보고 더 알아보자
예시
그니까 App.vue는 Header 컴포넌트를 포함하며, <router-view />를 통해 라우팅된 컴포넌트를 렌더링함
SFC의 구조는 HTML(Template), JavaScript(Script), CSS(Style)로 나뉘어 코드 관리가 효율적
<template>
<div id="app">
<Header />
<router-view />
</div>
</template>
<script>
import Header from './components/Header.vue'
export default {
name: 'App',
components: {
Header,
},
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>