안녕하세요 코딩하는 돌팔이 개발자입니다.
오늘은 vue.js에 대해서 간단히 소개해드리려고 합니다. 간단한 포스팅을 통해서 vue가 뭐 하는 것인지 어떤놈인지 대충 알아가셨으면 좋겠스니다. 렛츠고!?🤫
프로그래밍에 관심 있으신 분들이라면 vue나 react에 대해서 들어보셨을 텐데요 이 두 도구 모두 SPA를 구현하는 기술들입니다.
SPA란?
SPA는 Single Page Application의 줄임말로 one페이지를 통해서 화면을 출력하는 어플리케이션을 말하는데요 즉, 단일 페이지 어플리케이션이라고 합니다.
아주 간단히 설명을 하자면, 기존의 웹사이트들은 일정 영역에 새로운 정보를 출력하거나 새로운 화면을 노출시키기 위해서 동기식으로 전체 화면을 다시 로딩(새로고침O)하는 방식이었다면 이 SPA 방식은 비동기식으로 변경되는 영역의 내용만을 렌더링(새로고침x)하여 바꿔주는 기술이라고 생각하시면 됩니다.
이런 비동기 처리는 기존에 Angular라는 프레임워크를 통해서도 개발자들이 많이 사용을 해왔는데요 지금은 언어의 유행이 vue와 react로 많이 전환이 되어 현재는 대부분의 웹사이트들이 vue와 React 를 통해 구축이 되고 있고 전환되고 있습니다.
vue.js
그러한 상황에서 vue.js는 가장 접근이 쉬우면서 앵귤러와 리액트 대비 간결한 문법과 학습의 난이도가 낮은점이 장점입니다. 또한 소규모 프로젝트에서 신속한 개발에 용이하여 많이 사용되고 있는 프레임워크입니다.
리액트와의 큰 차이라면 전 세계적으로 리액트의 점유율이 높은 편인데요 페이스북, 인스타그램, 넷플릭스 국내에서는 네이버 카카오 삼성 등등 대기업들 대규모의 프로젝트에서 리액트가 더 많이 활용되고 있습니다.
그러나 국내에서 vue.js를 활용하는 기업들이 많이 있으며, 리액트에 이어 개발자들이 선호하는 프레임워크 2위에 위치하고 있습니다.
또한 개발자들로 부터 좋은 평가를 받고 있고 사용성에 있어 안정적인 단계에 접어들어 점점 점유율이 성장세를 보이는 프레임워크입니다. 배워두면 충분히 많이 활용할 수 있는 언어라고 생각하시면 됩니다.
예시
간단하게 속성을 바인딩하는 코드를 보여드리면서 마무리해보도록하겠습니다.
<template>
<h1 v-bind:class="vClass">황금빛 블로그</h1>
</template>
<script>
export default {
data() {
return {
vClass: 'colorBlue'
}
}
}
</script>
<style>
.colorBlue {color: blue}
</style>위의 코드는 v-bind 디렉티브를 활용해 h1 요소에 class를 지정하는 코드입니다.
- vClass 변수를 선언하고 "colorBlue" 값을 설정한다.
- .colorBlue 클래스에 파란색 컬러를 설정한다.
- h1 태그에 vClass 요소를 바인딩하여 최종적으로 colorBlue 클래스가 적용되도록 한다.
<template>
h1 태그에 vClass 요소를 바인딩한다.
</template>
<script>
vClass 변수에 colorBlue라는 string 값을 설정한다.
</script>
<style>
.colorBlue 클래스에 파란색 컬러의 스타일을 작성한다.
</style>
vue페이지의 코드는 간단하게 위의 구조를 갖고 있습니다. javascript 기반 프레임워크이다 보니 일반 html 코딩에 비해서 난이도는 있는 편이지만, 조금 더 코딩이 재미(?)있는 편입니다.
오늘은 첫 시간으로 간단히 뷰에대해서 설명을 드리고 속성 바인딩에 대해서도 간단한 코딩을 해봤는데요 앞으로 하나하나 vue언어에 대해서 포스팅해보도록 하겠습니다.
그럼 빠잇🤚