2020년 3월 26일

비주얼 스튜디오 코드로 Vue 웹 프로그램 개발하기

자바를 주 개발언어로 사용하고 있어 Eclipse, Android Studio 정도를 개발 도구로 사용하고 있다.

소문으로만 들어온 Vue 를 CDN 방식의 코드를 참고하여 웹 프로그램에 적용해보았다. 기존 개발 방식과 비교하면 UI 컴포넌트들이 모듈와 되어 있어 쉽게 UI 구현 가능하지만 "Vue 를 꼭 사용해야 할까?" 라는 의문이 생겼다.

이러한 의문을 품고 요즘 유행하는 SPA (Single Page Application) 방법으로 개발 시도해보았다. 개발 도구에 조금 변화를 주었느데, 앞선 경험에서 Eclipse 도구가 그닥 유용하지 않아 Microsoft Visual Code Studio 를 사용해 보았다.

Visual Studio Code

https://code.visualstudio.com/

① code.visualstudio.com 페이지를 방문하여 OS 에 맞는 프로그램을 다운로드하여 설치한다.
② Vue 개발를 위하여 다음의 Extentions 설치하였다. 설치는 Extentions 탭에서 검색하여 설치한다.

Prettier - Code formatter
Vetur

기존 Eclipse 개발 도구와 비교하여 기대 이상의 성능과 개발의 편리함에 큰 충격을 경험하였다. 익숙한 것이 반듯이 좋은 것은 아닌것 같다.

웹 프로그램

Vue 에 대한 충분한 지식과 경험이 없었기 때문에 무료이용이 가능한 Vue Material Kit 를 기반으로 간단한 프로그램을 개발하였다. 유료 버전도 있었지만 테스트를 위한 프로그램 템플릿으로 사용하는데에는 무료버전역시 충분했다.

Vue Material Kit (Free)

추가로 아래와 같은 기능들을 구현하였다. 학습의 목적도 있었기 떄문에 UI 기능 구현은 가능한 여러 컴포넌트들을 사용하려고 노력 하였다. 또한 클라이드 기반의 배포를 고려하여 시스템을 구성해보았다.

로그인 - JWT(JSON Web Token) / 로그아웃
인증 여부에 따른 메뉴 구성
블로그
이미지 갤러리

전체 구성도

프로그램 소스 : https://github.com/andang72/architecture-community-vue

편리하다고 느낌점들

기본적인 HTML 과 JavaScript 기술을 가지고 있다면 어렵지 않게 개발이 가능하다.
다양한 UI 컴포넌들이 존재하고 매뉴얼도 잘 정리되어 있어 UI 개발이 편리했다.
서버 API 호출이 간단했다. API 가 이미 존재하는 경우 아주 빠르게 개발이 가능할 것 같다.
배포가 아주 단순했다. build 결과물을 웹 서버에 업로드만 하면 된다.

불편하다고 느낀점들

Search Results

Web results

처음 개발을 시작할 당시 Cross-Origin Resource Sharing (CORS) 관련 이슈가 상당히 신경쓰이는 부분이었다. ( ☛ Vue 개발 보다는 Spring 기반의 서버 부분에서 처리에 어려움이 있었다. 그러나 일단 해결되고 나면 크게 이슈가 되지 않았다.)

공통 함수 부분이 불편했다. vuex 에서 제공하는 ...mapActions 를 사용하는 방법이 일반적이 였지만 Template 에서 사용하기 위해서는 함수를 다시 만들어 주어야 하는 것이 사용을 어렵게 했다. ( ☛ 로그인 부분에서만 사용했다.)

긍정적으로 평가하는 점들

클라이언트 프로그램들을 웹서버가 아닌 CDN 과 같은 다수의 장비에 큰 어려움 없이 배포가 가능하기 때문에 API 서버 성능만 보장이 된다면 굉장한 성능 개선이 가능할 것 같다.

한국에서 SW 개발자로 산다는것