SHUSTORY

Vue 0강 : 카카오가 리액트 냅두고 Vue 쓰는 이유 본문

프로그래밍/Vue

Vue 0강 : 카카오가 리액트 냅두고 Vue 쓰는 이유

어서오시우 2024. 11. 2. 19:10
728x90

https://www.youtube.com/watch?v=-tVaahsXpwk&list=PLfLgtT94nNq3Br68sEe26jkOqCPK_8UQ-

👽 Vue.js

  • Vue.js는 사용자 인터페이스를 만들기 위한 JS 기반 프레임워크로, Web-app을 만들 때 쓰인다.
    • Single Page Application 혹은 Web-App이라고 칭하는 것들이 있는데,
      이들은 페이지를 넘어갈 때 화면 전환이 부드럽고 앱처럼 사용이 가능하기에 Web-App이라고 부른다.
      • Web-App은 SPA일 수도 있지만, 여러 페이지로 구성된 MPA(다중 페이지 애플리케이션)일 수도 있다.
      • CS 카테고리에 SPA와 MPA에 대해 기술한 글이 있으니 참고하길 바란다.
        https://823915.tistory.com/237
    • 네이버의 Vibe 서비스나 카카오의 신규 서비스 개발 시에도 Vue를 다수 사용한다.

 

👽 Vue 이외에 React, Angular을 사용해서 Web-App을 만들 수도 있지만, Vue가 권장되는 이유는 무엇일까?

  1. Vue가 제일 쉬운데, 그렇다고 React와 Angular에 비해 기능이 떨어지는 것도 아니다.
    실제로 현장에서 물어보니까, 쉬워서 Vue.js 를 쓴다고 한다.
    React, Angular, Vue 중 어느것을 사용하더라도 똑같은 결과물을 만들어낼 수 있다.
    지원하는 기능도 다 비슷하고 scaling도 잘되고 SSR도 다 잘된다.
    • 👀 scailing이란?
      시스템이나 애플리케이션을 확장하여 더 많은 트래픽 또는 작업 부하를 처리할 수 있도록 하는 것을 의미
    • 👀 SSR(Server-Side Rendering, 서버 측 렌더링)이란?
      서버에서 초기 HTML 페이지를 렌더링하여 클라이언트로 전송하는 방식으로,
      브라우저에서 페이지를 처음으로 로드할 때 서버에서 완전한 HTML을 받아 렌더링하는 방식
  2. 개발할 때 방법이 정해져 있다.
    • 예를 들어 HTML을 반복적으로 여러 개 생성하고자 할 때, React 문법을 사용하면 여러 방법 중 골라서 사용이 가능하다.
      ex) 맵 반복문 / forEach /  for .. 자율적으로 판단해서 사용
      반면 Vue의 경우 v-for문을 사용하는 한 가지 방법밖에 없다.
    • 이러한 특징은 특히 협업할 때 도움이 된다.
      협업 시 코딩 스타일을 통일시키기도 하는데, Vue의 경우 그럴 필요가 없다.
    • 또한 초보개발자의 경우 방법이 하나로 정해져 있다보니 고민할 게 없어 아웃풋이 쉽게쉽게 나온다.
      Vue 문법 몇 개만 외워주면 JS에 대해 잘 알지 못하더라도 보다 빠르게 아웃풋을 낼 수 있다.
      반면 React의 경우 자유롭다보니 그만큼 JS를 잘 알아야 잘 활용할 수 있다.
      • 그렇다고 Vue가 너무 꽉 막혀 있는 건 아니고, 자유도 높은 개발이 가능하긴 하다.
        React에서 지원되는 jsx라던지, functional 컴퍼넌트 등이 Vue에서도 똑같이 지원되고 있다.
        • 👀 jsx란?
          JS의 확장 문법, React에서 UI 구축을 위해 사용된다.
        • 👀 functional component란?
          React에서 사용되는 컴포넌트의 한 유형, 함수로서의 역할을 갖는다.
  3. 벤치마크를 돌려보니 React보다 html 렌더링 속도가 더 빠르다.
    이에 실시간으로 빨리 바뀌어야 하는 비트코인 거래 사이트 등에서 Vue를 사용한다.
    굳이 꼽자면 그렇다는거지 사실 크게 차이나는 것은 아니긴 함..
    • 👀 벤치마크(Benchmark)를 돌린다구?
      벤치마크란 어떤 시스템이나 SW 성능을 측정하거나 비교하기 위해 사용되는 테스트나 측정 항목을 의미한다.
  4. 장기적으로 지원이 잘 되는 라이브러리이다.
    핵심 문법이 들어오고 필요없는 문법이 빠지는 등 다른 라이브러리 못지 않게 꾸준히 업데이트 되고 있다.

 

근데 사실 취향차이이기도 하고, 각각 나름의 장점이 있기 때문에 직접 해보고 판단하는 게 좋긴 하다.
그렇지만 JS 실력이 좋지 않다면 Vue로 시작하는게 좋긴 할 듯!

'프로그래밍 > Vue' 카테고리의 다른 글

Vue 1강 : Vue 3버전 설치랑 셋팅  (1) 2024.11.04