전 직장 동료이자 백엔드 개발자 대니의 권유로 새 프로젝트에 참여하게 되었다.
사내 도서 공유 서비스인데 가지고 있는 책을 올리면 다른 팀원이 빌리는 형식의 플랫폼이다. 이게 뭔가 싶었는데 설명을 듣다 보니 꽤 괜찮은 서비스가 될 것 같았다. 대니는 '더글로리'에 빗대었는데, TV나 유튜브를 보고 다른 사람과 공유하고 이야기 나눌 때의 짜릿함. 그게 책이 된다면? 내가 읽었던 책을 누군가 읽고 그에 대해 공감이나 토론을 한다면 얼마나 즐겁겠는가. 독서도 장려하고 말이지. 그 외에도 친해지고 싶은 동료가 있다면 그의 책을 빌려서 어색함을 덜 수도 있고, 자신의 지적허영심도 채울 수 있는 그런 서비스가 될 것 같았다. 백엔드 2명, 프론트엔드 2명, 디자이너 1명, 팀 구성도 꽤 본격적이라 바로 참여하기로 했다.
vue로 해보실래요?
프론트엔드 개발자 분은 3년차에 React로 일을 하고 계신다 해서 React 새싹으로써 배울게 많을 것 같다고 생각했다. 근데 웬 걸, kickoff 미팅 아젠다로 기술 스택을 정하는데 이번 프로젝트를 vue로 해보는 게 어떻겠냐는 의견을 주셨다. 찰나의 순간 여러 고민을 해봤다. React도 아직 익숙치 않은 초보 개발자인데 vue라니. 한 가지 기술도 제대로 파지 않은채 한 번 써봤다고 기술 스택에 적는 것은 바보 아니냐며 친구랑 대화를 나눈 적도 있다. 하지만 곧 바로 긍정적인 면도 생각해봤다. 신입은 새로운 것을 익힘에 거리낌이 없어야 하며, 배움과 적응이 빠른 것은 큰 장점이라하였다. 또! vue는 요새 핫한 프레임워크다. 채용공고만 봐도 vue 주니어를 필요로하는 회사가 꽤 있었다. 생각을 마치니 바로 오케이가 나왔다.
vue는 뭐가 좋길래
vue로 한다고 하긴 했는데 도대체 어떤 장점이 있길래 그렇게 핫한지 궁금해서 찾아봤다.
1. 배우기 쉽다
2. 성능이 우수하고 빠르다
3. 앵귤러와 리액트의 장점을 모았다.
배우기 쉽다
우선 이 부분에 대해서는 개인차가 있는 것이고 아직 프로젝트를 직접 해보지 않아 큰 장점으로 꼽기는 힘들 것 같다. 그리고 쉽다는 것은 그만큼 제한적이고 디테일한 부분은 건들 수 없다는 이야기일 수도 있다. 물론, Vue를 써봐야 알겠지만. 어쨌든 직관적이고 배우기 쉽다고 한다. 쉽다는 장점은 프로젝트 이후 다시 한번 Vue에 대해 되돌아보며 이야기해 봐야겠다. 아 참고로 Vue Docs가 비교적 자세하게 설명되어 있어 쉽다는 장점에 한몫하는 것 같다.
성능이 우수하고 빠르다
이유는 패키지 크기가 앵귤러나 리액트보다 작고 가벼우며 가상 DOM 렌더링을 채용하고 있어 렌더링 속도가 빠르다는 것인데.. React도 가상 DOM을 사용하니 Vue만의 장점이라고 보기에는 애매하다. 하지만 Vue 3.0에서 이 가상 DOM을 더욱 최적화했다고 한다. 기존 Vue는 HTML 기반의 템플릿을 제공하고 이 템플릿 구문을 가상 DOM로 반환 후 DOM에 어떤 영역이 렌더링 되어야 하는지 재귀적으로 탐색하는 방식이었다. 이런 경우 매번 전체 트리를 모두 확인하게 되는 상당히 비효율적인데, 이를 해결하기 위해 세 가지의 최적화를 진행했다고 한다.
Vue 3.0 렌더링 최적화
- 템플릿 구문에서 정적 요소와 동적 요소를 구분하고, 트리를 순환할 때 동적 요소만 순환할 수 있도록 했다. 렌더링 할 때 동적 요소가 있는 코드가 수정되면 정적 요소는 생략하고 동적 요소만 순환한다.
- 렌더링 관련 객체인 정적 요소, 서브 트리, 데이터 객체 등을 탐지해 렌더러 함수 밖으로 호이스팅 시켜 객체가 중복 생성되는 것을 막는다.
- 컴파일러가 미리 템플릿 구문 내에서 동적 바인딩 요소에 대해 플래그를 생성한다. 특정 요소가 동적 클래스 바인딩을 가지고 있고 정적인 값이 지정된 속성을 갖고 있다면 클래스만 처리하여 렌더링 속도를 향상했다.
추가적으로 vue 3.0은 트리쉐이킹(tree-shaking)을 지원한다고 한다. 트리쉐이킹은 나무를 흔들어 잎을 떨어트리 듯 모듈을 번들링 하는 과정에서 사용하지 않는 코드를 제거하는 방식으로 번들 크기를 줄이는 데 도움을 준다.
vue 3.0 출시 때 공식 문서는 사라져서 당시 블로그를 참고했는데 3번은 사실 무슨 뜻인지 알기가 어려웠다. 어쨌든 현재의 vue는 성능 최적화를 위해 여러 가지 기능이 향상되었다. 이도 사용해 보며 리액트랑 비교해 보면 좋을 것 같다. 동일한 상황에서 비교는 힘들겠지만 비슷한 페이지의 렌더링 속도 비교 정도는 해볼까 싶다.
앵귤러와 리액트 장점만 쏙 뺐다
Vue는 Angular의 양방향 바인딩, React의 가상 DOM을 채택했다. React는 단방향 바인딩으로 부모와 자식 관계가 명확하게 성립되어 불편한 점들이 있었다. 예를 들면 자식 페이지의 데이터를 부모에게 전달하기가 제한적이었다. Vue는 양방향 바인딩으로 부모 자식 간에 데이터를 넘기기 위한 작업을 생략할 수 있다. 다만 Angular의 양방향 바인딩에도 단점이 있는데 페이지와 데이터 간의 복잡도가 늘어나면서 속도 저하가 나타난 것이다. 이를 해결하기 위해 Vue는 React의 가상 DOM을 도입했다. 덕분에 빠르게 Angular 보다 빠르고 최적화된 렌더링이 가능하여 속도 저하 문제도 개선했다.
그 외에도 재사용성 높은 컴포넌트를 제작할 수 있고 컨벤션 맞추기가 용이하다는 등의 장점도 있다.
tailwindcss
이번 프로젝트에서 또 하나 처음 접하는 기술은 tailwindcss. vue와 정말 잘 어울리는 css 프레임워크인데 간단하게 사용해 보니 장점도 많고 효율적이긴 하다. 다만, docs를 옆에 끼고 검색하면서 사용해야 한다는 점. 만약 width 크기를 지정하고 싶다면 width: 100px이 아니라 w-100으로 사용해야 한다. 괜히 tailwindcss를 프레임워크라고 소개하는 것이 아니었다. 한 문장만 보자면 대충 이런 식이다. class에 css요소를 인라인으로 적는다. 아직 깊게 사용은 못 해봤는데 css 컴포넌트를 만들어 사용한다면 굉장히 짧은 코드로 css를 구현할 수 있을 것 같다.
<div class="w-50 h-50 flex flex-row flex-wrap space-x-2">Vue와 tailwindcss
제대로 프로젝트에 들어가기 전 연습삼아 Vue에 접속해봤는데 대충 이런 코드가 그려졌다.
<template>
<div class="bg-yellow-500 px-10 py-5">
<NuxtLink
:to="menuName"
class="text-white mx-5"
v-for="(menuName, i) in menusName"
:key="i"
>{{ menuName }}
</NuxtLink>
</div>
</template>
<script>
export default {
data() {
return {
menusName: ["home", "products", "game"],
};
},
};
</script>Vue도 tailwindcss도 태그의 인라인 속성을 사용하기 때문에 React와는 많이 다른 형태가 된다.
NuxtLink는 Nuxt에서 제공하는 태그로 페이지 라우팅 시에 유용한 태그. v-for은 map과 같은 반복문으로 쓰인다. data 부분에 사용할 변수를 선언할 수 있다. :to나 :key 앞에 붙은 클론은 함수 기능을 사용할 때 붙인다. (React의 key={i} 처럼). 그 외에 method에 함수를 만들고, Pinia라는 전역상태관리도 처음 사용해 보고, 생소한 부분들이 많다.
vue 강의와 docs를 열심히 보며 익히고 있다. 처음 접하는 라이브러리와 프레임워크가 많은 만큼 Docs를 읽는 연습, 새로운 기술에 빠르게 적응하는 연습을 한다고 생각한다. 사실 뭐가 되었든 프로젝트에 참여하게 되어서 기쁘다.
참고자료
- Chat GPT
'프로그래밍⚡️ > library' 카테고리의 다른 글
| tailwindcss 초보 사용기 (1) | 2023.05.10 |
|---|