회사 프로젝트에 Vue.js 도입하기

자사 관리자 페이지의 프론트 기술은 jQuery를 사용하고 있다.

관리자 페이지 특성상 프론트 코드를 작업할 일이 많이 있었고, 조심스럽게 Vue.js를 도입해보자는 의견을 제안했다.

동료 개발자들 모두 프론트엔드 프레임워크에 관심이 있었지만 생소한 편이여서 그나마? 시간 여유가 있는 내가 기술 검토를 진행해보았다. 어느 누군가는 해야만 하는 일이었고, 직접 조사하고 테스트해보았던 내용들을 간략하게 정리해봤다.. 나중에 개인 프로젝트 할 때도 도움될만한 지식들이다.. 나중에 써먹어봐야지 ㅎㅎ

 

 

Vue.js 도입 장점 

 

• 공통 화면 component화 가능함으로써, 재사용할 수 있도록 구조화 시킬 수 있다.
  (ex : 파일 업로드 화면, 리스트 화면 등)

• jQuery 객체 리터럴 전역변수의 무분별하게 사용되는 문제를 컴포넌트 별로 분리해서 변수를 관리할 수 있고, 컴포넌트 끼리 주고받을 수 있게 된다.

• jQuery처럼 개발자가 직접 Dom 컨트롤을 할 필요없이 데이터만 관리하면 된다.

• 기존 레거시 jQuery 코드와 혼합해서 적용할 수 있다.

 

도입 방식

 

Front(Node.js) + SpringBoot(REST API) 구조

각각 프론트와 백엔드를 분리해서 프로젝트 구성을 한다.

 

 

위 그림을 요약해보면

Vue.js에서 프론트를 담당하고 JWT(Java Web Token)을 사용하여 Springboot 백엔드와 통신한다고 보면 된다.

※ JWT란? 정상적인 클라이언트인지 서버에서 구분할 수 있는 토큰 데이터를 통해 통신하는 기술이다. 쿠키에 JWT를 담아 서버로 전달한다.

자사 프로젝트 같은 경우는 Session을 이미 사용중이기 때문에 JWT를 도입하기에는 어려움이 있다고 판단됌 => 결론적으로 프론트 서버, 백엔드 서버 완전 분리하는 건 불가능

 

 

프로젝트 하위 패키지에 Front(Node.js) import 방식

검색해보니 자사 프로젝트 처럼 기존 jQuery에 Vue.js를 도입하는 사례도 꽤 존재했다.

프로젝트를 별도로 구성하지 않고 기존 프로젝트 내에 Vue.js 프로젝트 폴더를 넣는 방식이다.

 

대략 이런 형태가 될거라 예상되었다.

이렇게 구성이 될 경우

1. Server + Front Code를 한 프로젝트에서 관리가 가능하고

2. 추가적인 설정으로 gradle 빌드 과정에서 npm 빌드도 같이 진행할 수 있다.(서버 2개 같이 켤 필요 X)

문제는 기존 Session을 사용하는 자사 프로젝트에

1. 프론트 서버 요청을 인증처리 할 수 있는 서버가 필요하다는 것

2. Vue CLI 형태로 프론트 서버를 구성해야 하는데 현재 자사 프로젝트 규모상 과한 구성이라고 판단했다. 공식 문서를 살펴보니 Node 기반 빌드 도구에 익숙하지 않으면 Vue CLI로 시작하는건 비추천 한다고 나와있었다.

3. Vue CLI는 프레임워크라고 생각해야 할 정도로 정형화된 구조가 존재했다. 이것을 학습하기에는 러닝 커브가 꽤 높다고 판단했다.

※ Vue CLI란? Vue.js 개발을 위한 프로젝트 구성을 편리하게 제공하는 도구이다. 프로젝트 규모는 다르지만 Spring 프로젝트 생성할 때 기본적으로 구성되는 형태와 비슷한 느낌이라고 보면 된다.

 

Vue.js Library import 방식(유력)

Vue.js를 라이브러리처럼 활용함으로써, 기존 프로젝트에 유연하게 적용시킬 수 있었다.

 

필요한 기술

• Vue.js 라이브러리(Cdn 주소만 import 하면 됌)

• axios.js(비동기 통신)

• es6 문법(webpack, babel 적용하지 않는다면 사용하기 힘들다.)

 

현재까지는 Vue.js 라이브러리 형태로 적용해보고 있는데 크게 문제가 없어보인다.

과연 Vue.js 도입에 승인해주실까..? 궁금하구만