Vue.js로 점진적 도입 경험 공유

도입 배경

 

 

부족 하디 부족한 주니어 개발자 코딩 배우는 학생입니다. 기존 jQuery 레거시 기반을 Vue.js를 프로젝트에 적용한 경험 및 후기 공유입니다...!

 

기존의 회사 프론트 스택은 CSR(ClientSide Rendering)인 경우 Jquery, Jquery Template 기반으로 되어있었고, 어드민과 같은 사이트의 경우 SSR(Serverside Rendering) 기반(JSP, Razor 등)으로 구성되어 있었습니다. 새롭게 프로젝트를 시작하게 되면서 기존 스택을 고수하지 않은 이유에는 3가지가 있습니다.

 

1. 코드 관리의 어려움
2. 데이터 바인딩 및 화면 렌더링 시 성능 문제
3. 코드의 중복(레거시의 문제점), 반응형 지원

 

기술 조사 및 안정성 검토 후 두 달간 제가 맡은 프로젝트가 한 페이지 front-end를 담당했기 때문에 Vue.js CDN으로 다운받아 사용해 보는 것으로 시작하게 되었습니다. 

 

 

---

 

기존 문제점
(DOM First vs Data-First 방식)

 

 

1. 코드 관리의 어려움, 직관성

Dom-First 사고방식에서 Data-First로의 사고방식으로 전환하기

 

기존 jQuery의 가장 큰 문제점이라고 생각하는 부분입니다. 기존 순수 자바스크립트 코드보다 간결해서 많이 오해할 수 있는 부분이라고 생각합니다. 하지만 코드를 수정하거나 데이터 추가 및 확장성을 고려한다면 셀렉터 별로 수정해 줘야 하는 어려움과 코드를 덧붙이는 작업이 계속되며 코드가 지저분해지는 경험은, 누구나 겪어본 상황이라고 생각합니다. 더욱이 보기에도 불편합니다.

        <div id="app">

        </div>  
        <script>
            document.getElementById("app").innerHtml = "new Text!";
        </script>

돔(DOM) 조작으로 화면을 직접적으로 제어하는 것은 일명 스파게티(?) 코드로 이어지기 십상입니다. 반면 새롭게 도입을 검토하는 Vue.js의 경우 가상 DOM을 활용해 데이터 자체에 집중하기 쉽게 유도해 줍니다. 말이 어려운데 보기에도 쉽고 데이터만 적재적소에 잘 활용한다면 화면은 똑똑한 Vue가 알아서 제어해 줍니다. 

 

한 가지 예시를 들어보겠습니다. 아래 jQuery로 span태그를 숨기는 코드가 있습니다.

        <div>
	  <span id="app"></span>
        </div>  
        <script>
            $("#app").hide();
        </script>

        <template>
            <div>
                <span v-if="show" id="app"></span>
            </div>  
        </template>
        
        <script>
            export default{
                name:"sample",
                data(){
                    return {
                        show:true
                    }
                }
            }
        </script>

 

Dom-First인 jQuery방식은 Dom객체를 직접적으로 컨트롤합니다. 강력하고 편리합니다. 하지만 확장성 및 재사용성은 고려하기 힘든 코드입니다. 반면 Data-First 방식은 보다 Data 그 자체에 주목해 show on-off방식으로 작동합니다. 데이터 추가 및 확장성 고려에 뚜렷한 메리트 있는 설계가 가능해집니다.

 

계속해서 바뀌는 기획, 데이터 변경, 추가와 같은 상황에서 우리가 해야 할 것은 데이터를 다시 불러오고 매핑하고 UI를 신경 써야 하는 것에서 단순히 Vue 가상 DOM에서 데이터를 추가해주고 매핑만 시켜주면 되는 훨씬 단순하고 편한 개발이 가능해집니다.

 

 

2. 데이터 바인딩 및 화면 렌더링 성능 문제

 

화면에서 데이터 바인딩 및 렌더링시 성능 문제로 사용자에게 불편함을 주어선 안됩니다. 초기 jQuery 사용으로 프로젝트 진행 시 성능 이슈로 고민이 많았습니다. 회사에서도 처음 진행한 웹뷰 프로젝트였기 때문에 상대적으로 웹보다 부족한 모바일 기기의 성능을 예측 못해 발생한 이슈들도 많았습니다. 

 

프로젝트에 고화질 영상 및 사진 리소스로 인한 네트워크 교환에 초기 렌더링 속도가 크게 좌우되었습니다. Vue.js 사용 및 LifeCycle에 따른 lazyloading, debouncing 적용 등으로 초기 성능 최적화를 진행했습니다. 그 결과 초기 프로토 타입이 초기 렌더링 시간이 6-8초 걸리던 퍼포먼스에서 1-2초로 현저히 단축되었습니다.

 

Chrome performance 결과

 

반면 생각했던 것보다 우려했던 jQuery 자체 CDN 스크립팅 시간(89.67ms)이 Vue.js CDN 스크립팅 시간(111.41ms) 보다 짧아 예전보다 훨씬 경량화된 것을 알 수 있었습니다. 하지만 그럼에도 Vue를 이용한 js코드가 jQuery를 사용한 js코드보다 약 2배 이상 가벼운 것을 알 수 있었습니다. 

 

이외에도 Vue 자체적인 성능 개선도 이루어졌습니다. 함수형 Component를 적극 사용하며 (버전 업이나 개선사항 등은 대부분 Component로 추가했습니다.) 렌더링 비용이 많지 않게 설계했습니다. 또한 computed를 이용한 filter기능을 활용해 프로젝트에 포함된 동적 데이터 변환에 활용했습니다. 

 

 

 

3.  코드의 중복(레거시의 문제점), 반응형 지원

 

웹뷰로 진행하면서 여러 이슈에 직면했는데, 그중 하나는 모바일 환경에 맞는 UI 반응형 지원에 대한 고민이 있었습니다. 사내에서 퍼블리셔의 부담이 커서 모든 모바일 환경에 대한 대응이 불가했는데, 프론트를 맡으면서 반응형이 기본적으로 지원되는 프론트 스택을 자연스레 고민하게 되었습니다. 이 부분에선 미디어쿼리로 팀 프로젝트하던 때를 생각하며 신세계를 경험했습니다...

 

 

---

 

왜 많은 SPA 중 Vue.js를 고려했는가?

 

 

 

Vue를 선택한 이유는 다음과 같습니다.

 

1. 러닝 커브가 짧다
2. 기존 jQuery와의 호환성
3. 컴포넌트 기반을 통해 유지보수, 확장성에 뛰어남
4. MVVM패턴의 장점
5. 한글 레퍼런스 최고

 

회사 시니어 개발자들도 같은 프로젝트에 투입되므로 러닝 커브가 상대적으로 긴 React나 Angular는 도입이 사실상 어렵다고 판단했습니다. 대신 Vue로 테스트 및 실무에 적용해본 결과 반나절이면 Vue를 적용하는데 무리 없었습니다. 사실 한글 레퍼런스가 최상급으로 잘 돼있어서 러닝 커브가 짧은 이유의 50% 이상을 차지하는 거 같기도 합니다.

 

시작하기 — Vue.js

 

 

또한 기존 jQuery 레거시 코드와의 호환성도 중요했습니다. 사내 사용하던 모듈을 전체적으로 Vue로 전환하는 것은 시간상 제약이 따랐습니다. 가끔 jQuery를 사용해야 되는 경우도 있는데 (비동기 호출 시 호환성 문제로 axios 라이브러리 등을 사용하지 못했습니다. 대신 jQuery에서 제공하는 ajax  모듈을 사용했습니다), 이를 전부 바꾸는 건 무리라고 판단하고 함께 유연하게 사용할 수 있는 Vue를 선택했습니다. 

 

특히 프로젝트를 Vue로 진행하면서 화면 디자인 추가 및 유지보수에 엄청난 메리트를 느꼈습니다. 기획팀과의 협업으로 추가/수정해야 할 일이 많았는데, UI에 신경을 쓰지 않고 바인딩할 데이터만 처리해주면 되는 구조로 저의 수명 보존에 크나큰 도움이 됐습니다. ㅎㅎ.. 

 

읽기 쉬운 구조화된 코드도 장점 중 하나였습니다. 순수 자바스크립트나 jQuery로 UI를 작성하는 경우 보통 데이터를 바인딩하는 JS 1개, UI를 구성하는 JS 하나로 구성하는 경우가 많은데 한 화면에서 데이터 바인딩(data), 기능(method)을 구분해서 편하게 코드를 작성할 수 있었습니다. 그리고 같은 코딩 구조 스타일을 지향하는 프레임워크 도입으로 Vue만의 스타일을 가지고 코딩하므로 협업에도 좋았습니다. 

 

실제로 데이터를 추가하면서 data, method를 정의하고 원하는 위치에 Component를 삽입하니 기존보다 훨씬 작업 속도가 빨라지는 경험을 할 수 있었습니다.

 

---

 

결론

 

jQuery도 지속적으로 경량화를 이루고 있어 생각보다 초기 렌더링에서 무겁지 않았습니다. 하지만 jQuery, Vue 기반으로 개발해보면서 얻은 메리트는 Vue의 손을 들어주고 싶습니다. 실제로 이번 프로젝트를 계기로 얻은 인사이트를 바탕으로 앞으로의 사내 프론트 개발을 Vue를 활용할 생각입니다. 지금은 아직 CDN을 다운로드하여 jQuery와의 혼용으로 사용하고 있지만 점진적으로 확대해갈 생각입니다.