카카오가 리액트 냅두고 왜 Vue 쓰는지 알려드림

실은 카카오 프론트엔드 개발자들은 리액트랑 반반 섞어서 쓴다고 합니다.

다만 초절정 유행 중인 리액트라는 선택지를 놔두고

네이버든 카카오든 Vue로 새로운 페이지들을 만들어내는 경우가 많습니다.

네이버 뮤직도 Vibe로 바꿀 때 Vue를 이용해서 프론트엔드를 디자인했더라고요.

이유를 알아봅시다.

 

0. 일단 React Angular Vue 라이브러리는 왜 쓰냐면 

 

항상 "이걸 왜 쓰는지" 알아야 배울 때 이해가 쉽습니다.

이건 web-app을 만들 때 씁니다. 

이게 뭐냐면 페이지가 새로고침되지 않고 부드럽게 전환되는 사이트를 뜻합니다. 

페이지 전환시 페이지를 새로 요청하는게 아니라

자바스크립트로 HTML을 갈아치우면서 부드럽게 구현하는 것인데

 

근데 쌩자바스크립트로 이런거 만들려면 귀찮고 코드가 길어집니다. 

그래서 Vue React Angular 이런거 쓰면 쉽게 개발이 가능합니다. 

근데 굳이 다른거 냅두고 Vue 쓰는 이유를 아십니까. 

 

1. 쉬워서 씁니다. 

 

이게 진짜 중요한 이유입니다. 

React Vue Angular 전부 똑같이 웹앱을 만들어낼 수 있습니다.

 

Angular는 매우 방대하고 Typescript를 강제로 써야하고

React는 기존 JS문법을 매우 많이 활용하고 

Vue는 Vue 문법을 새로 배우라고 합니다. 

 

그래서 자바스크립트 빡통일 수록 Vue가 쉽습니다. 

초보도 두세시간 배우면 웹앱 만들어낼 수 있습니다. 

(다만 문법만 배우지 말고 코드 짜는법, 웹앱 구조 이런거 배워야 혼자 코드 잘짬)

 

쉽다고만 하면 추상적이니까 코드로 설명해드리자면 

 

 

 

 

- 같은 기능을 구현한다고 했을 때 React vs Vue 차이입니다. 

많은 경우에 Vue가 더 깔끔합니다. 특히 짜야할 코드가 복잡해질 수록 장점이 드러납니다.

HTML 중간중간 자바스크립트 중괄호 같은걸 많이 섞지 않고 깔끔하게 HTML 스럽게 볼 수 있어서 페이지 구조 파악하기도 쉽습니다.  

당연히 개인 취향일 수 있으니 넘어가도록 하겠습니다. 

 

- Vue가 쉽다고 해서 뭐 간단한 사이트만 만들 수 있는 그런게 아닙니다. 

다른 라이브러리들과 기능적 차이는 거의 없습니다.

세 라이브러리 모두 결과물은 똑같이 만들어낼 수 있습니다.

다만 구현하는 방법이 다를 뿐입니다. 

 

2. Right-way가 있습니다. 

 

리액트는 코드짜는 방법이 매우 자유롭습니다. 여러분이 상상하는 모든 것을 허용해줍니다. 

HTML을 Array에 담아서 쓰든 함수에 넣었다가 뱉어주든 

프로그래밍언어를 적극 활용하여 개발하게 됩니다. 

for 반복문을 하나 쓰려고 해도

map, forEach, for in, for of 등 많은 반복문을 이용할 수 있으며 

언제 어디서 쓸 지도 여러분이 알아서 선택하면 됩니다. 

 

Vue는 그런거 없습니다. 그냥 무조건 답이 정해져있는데 HTML에 v-for 박아넣습니다. 

이게 왜 장점이나고요?

 

 

 

- 자유를 주면 중수 고수는 편리할 수 있겠으나 초보는 "코드 이렇게 짜도 되나?" 하면서 헤매면서 인터넷 뒤지는 경우가 많을겁니다. 

그래서 코드짜는 방법을 정해주고 가르쳐주는 Vue가 초보에겐 좋지않을까요. 

 

- 협업할 때도 편리함을 좀 느꼈는데

다들 코딩 스타일이 자유로우면 코딩 스타일 맞추는 데도 시간이 소요됩니다. 그거 안맞추면 나중에 고역임 

근데 Vue는 그런 경험이 적었던 기억이 납니다. 다 예측가능하고 똑같습니다. 

 

- 그리고 코드의 양이 많아지면 "코드짜는 법이 제한적"인건 매우 큰 장점입니다. 

뭘 개발하든 틀에 맞춰 코드를 짜놔야 나중에 수정과 관리가 편해집니다.

 

그렇다고 뷰가 꽉막힌건 아니고

JSX, functional component 같은 리액트스러운 자유로운 웹앱 프로그래밍도 지원합니다.

 

3. 빠릅니다.

 

그니까 실제 Vue로 만든 사이트를 방문했을 때 HTML 렌더링하는 시간이 빠르다는 겁니다. 

벤치마크 해봤을 때 리액트랑 비교했을 때 렌더링시간이 더 빠르다는 자료가 찾아보니 많던데 

밀리세컨드 단위라서 체감은 안되니 참고만 합시다. 

그래서인지 비트코인 거래사이트에서도 Vue를 가끔 쓰더라고요. 

 

4. 장기적 지원도 별 문제없음 

 

2013인가 2014년에 처음 나왔는데

은근히 Vue에 빠진 씹덕들이 많아 꾸준히 업데이트되는 라이브러리입니다.   

얼마 전에 Vue3버전으로 업데이트 되며 중요한 기능도 추가되고 편의성도 높아졌습니다.

그리고 중요한건 documentation이 매우 잘 되어있습니다. 

 

솔직히 뭔가 크리티컬한 하자가 없을 경우 장기적 지원 같은건 신경 안써도 됩니다. 

강제로 업데이트되는 것도 아니고 npm 라이브러리들은 lock 파일로 버전 잠금해놓을 수 있으니까요. 

그리고 우리가 만드는 사이트 5년 10년 갈 것 같습니까 아마 그 전에 망함 

---

다음시간 부터 강의에서 배워볼 내용 :

문법부터 나열하면 노잼이라 금방 포기하기 때문에 

Vuejs로 프로젝트를 만들며 쭉 배워볼겁니다. 

 

- 직방/다방같은 원룸소개 쇼핑몰

- 간단한 블로그 레이아웃 

- 인스타그램

 

을 만들며 배워볼 겁니다.

인스타그램은 코드가 기초학습에 매우 적절하지않고 코드가 좀 허세용이라서 뒤로 뺐습니다.

---

필요 사전지식 : 

 

HTML CSS 기초 아주 조금 

변수

자료형

Array, Object 자료 만들기와 데이터 저장하고 출력하는 법

if else

function

for 

이렇게 알면 됩니다. 물론 강의 중간중간 다시 알려드리긴 할텐데 코드짜는게 완전 처음이면 자바스크립트 기초가 먼저입니다.

자바스크립트 웹개발 편하게 하려고 배우는게 Vue React Angular 니까요.