Vue를 이용해 만든 Web을 App으로 패키징/배포하기

 

Vue를 이용한 WebApp 배포하기

프로젝트를 아직 생성하지 않고, 처음 시작하는 경우는 검색해보면 여러곳에 있으니 여기서는 다루지 않는다. 여기서는 Vue로 만들어진 Web을 모바일 플랫폼으로 만들어 배포하기 위한 고민에서 시작되었다. 따라서 최대한 효율적인 방법을 검토하는 과정에서 비롯되었음 먼저 알고 봐주시길 바랍니다.


먼저, 검색하는 과정(2021년)에서 일명 하이브리드앱을 개발하는 플랫폼으로 아래와 같이 크게 2가지의 방법이 고민되었다.
  1. Crodova(코르도바)
  2. NativeScript(네이티브 스크립트)
  3. PWA(Progressive Web App)
먼저 Crodova의 경우 NativeScript 보다는 더 오래된 기술인듯하고, 많이 거론되는 기술인듯하며, 우선시 되던 기술이었으므로 일단 미지의 세계인 NativeScript를 먼저 살펴보기로 하였다. 그리고 Crodova를 살펴볼 것이며, 가장 최신 기술(?) 이라고 할수 있는 PWA를 살펴보기로 한다.


NativeScript(네이티브 스크립트)

간단히 정리하면 아래와 같이 설명하고 있다.
  • NativeScript는 개발자가 JavaScript를 사용해 완전한 네이티브 iOS, Android 애플리케이션을 만들 수 있게 한다.
  • 두 기술을 이용하면 Vue의 간결함과 NativeScript의 성능을 가진 앱을 만들수 있다.
  • NativeScript는 NativeScript CLI를 사용해 앱을 만들고, 빌드하며, 배포한다.

우선 아래와 같이 Vue와 NativeScript의 가장 큰 타이점은 코드가 작성법이 다르다는 것이다. 위에서의 설명은 "Vue의 간결함과 NativeScript의 성능을 가진 앱" 이라고 설명하고 있다. 
즉, 이말은 Vue의 간결한 코드 작성 스타일과 NativeScript와 거의 동일한(?) 성능을 가진다는 말이다

아래는 Vue 코드의 작성 예이고
new Vue({
  el: "#app",
  template: `
    <div>
      <label>Hello Vue </label>
    </div>
  `
});

아래는 NativeScript의 작성 예이다.
new Vue({
  template: `
    <Page>
      <StackLayout>
        <Label text="Hello Vue user "></Label>
      </StackLayout>
    </Page>
  `
});
비슷한듯 하지만 완전히 똑같은 코드는 아니다. 아! 속았다. 

NativeScript가 뭔지 몰랐을땐 그냥 막연하게 Vue로 작성된 앱을 App으로 컴파일 해줘서 소스코드의 큰 수정 없이(물론, 약간의 추가적인 수정은 필요하겠지만 어째건 최대한 수정없이) 앱으로 만들어주길 바랬는데... 

일단, 여기서 이건 이정도에서 조사를 종료한다.

위 내용을 참고한 사이트는 아래와 같으며, 자세한 내용은 여기를를 참고하자.

결론은 아래와 같이 JavaScript를 사용하여 iOS/Android 앱을 만들수 있는 프레임워크이다.

NativeScript의 Vue 지원은 초기 단계이나 NativeScript 자체는 JavaSciprt를 사용하여 iOS 및 Android 애플리케이션을 만들 수 있는 배포 가능한 앱 프레임워크이다.
즉, 이말은 NativeScript가 JavaScript로 앱을 만들수 있는 프레임워크이고, 현재 Vue를 지원하고 있는 초기 단계의에 있다는 말이다. ^^

참고로, NativeScript를 사용하여 앱을 만들기 위한 환경설정은 대략 아래와 같다.
  1. Vue Cli 설치
  2. NativeScript CLI 설치
  3. JDK 8 설치
  4. Android SDK 설치
  5. SDK의 모든 패키지 설치
자세한 내용은 여기 사이트를 참고하자.

만약, 안드로이드 또는 iOS를 위한 앱을 만들어야 하고, Java/ObjectiveC 문법 보다는 JavaScript 문법에 익숙해 있다면 개발 시작 전이라면 NativeScript는 하나의 선택지가 될수 있을거 같다. 일단 JavaScript 언어 하나로 성능도 괜찮고 Android, iOS를 한번에 적용할수 있는 프레임워크라고 생각한다. 하지만 프레임워크 선택시 아래의 내용도 참고해보자. 

어떤 블로거가 "앱 개발 도전기라" 로 작성한 실패한 포기담(?)이다. 
결국 중단을 선언

그래도.. 계속 삽질 하면 언젠간 될 줄 알았다. 근데 내가 시도할 수 있는 한계가 온 것 같다. NativeScript, Vue로 개발하는 것은 꽤 많은 제약사항이 있었고 나는 그것을 극복할 수 있는 앱에 대한 배경 지식도 부족했다.

Vue와 NativeScript 버전, IOS, Android의 모든 버전이 잘 맞을 때 에러 없이 모든게 맞아 떨어졌다. 관련된 라이브러리, 플러그인 또한 맞지 않는다면 빌드가 어려웠다. 하단 네비게이션탭과 서브 상단탭을 넣고 싶어서 엄청 삽질했는데 머터리얼디자인 라이브러리 적용해서 겨우 적용하면 Android는 잘 뜨고 IOS 는 라이브러리조차 읽지 못하였다. 대체 어디서부터 내가 고쳐가야할지 감이 안잡혔고 이대로라면 하나하나 할 때마다 막힐 것 같아서 진도가 안나갈 것 같았다. Android, IOS 각 네이티브앱 개발을 한번에 끝내려고 하니 오히려 고려해야할 사항이 배가 되었다. 개발하다보면 결국 두 플랫폼에 대해 다시 맞추어야하는 상황이 되었다. 여러 제약사항들이 날 너무 힘들게 해서 결국 중단하려고 한다.

 짧게나마 오랫만에 엄청난 삽질, 영어로 부딪히기, 진득히 문서 읽기, git Issue 활용 등 다양한 경험을 해본 것에 의의를 두고 싶다. 무작정 하면 언젠간 될거라고 생각했지만 결국 못했다는게 자존심상하고 아쉽다. 하지만 결국 내가 가장 잘하고 싶은건 웹이니 이 쪽에 더 집중해보자.. ㅠ0ㅠ (어떻게 다 잘하겠어~~ 합리화 중...)

위 글에 대한 자세한 내용은 해당 사이트를 참고하자.

참고 사이트


Crodova(코르도바)

Cordova(코르도바)는 아파치 재단에서 지원중인 하이브리드 앱을 위한 프레임워크라고 소개하고 있다. 즉, 이말은 하이브리드 앱을 만들기위한 프레임워크라는 말이다.

하이브리드 앱이란 또 뭐일까? 

하이브리드 앱을 알기전에 먼저 배경 지식으로 아래의 내용을 좀 살펴보기로 한다.
  • 네이티브 앱(Native App)
  • 웹 앱(Web App)
  • 하이브리드 앱(Hybrid App)
  • 프로그레시브 앱(PWA)

위에 나열된 종류에 대한 자세한 내용은 여기를(https://nurioweb.blogspot.com/2021/10/blog-post.html) 참고하세요

자이제 본으로 돌아와서 Cordova(코르도바)는 아파치 재단에서 지원중인 하이브리드 앱을 제작하기 위한 프레임워크 라고 앞서 설명했다. 여러 디바이스의 OS를 지원하지만 대표적으로 안드로이드와 아이폰 그리고 윈도우즈를 지원한다. 

Cordova 프로젝트를 기반으로 진행되고 있는 프로젝트들은 아래와 같다

따라서 Cordova를 통해 웹앱 빌드 및 배포하기로 결정하였다. 이에 대한 보다 상세한 내용은 여기(https://nurioweb.blogspot.com/2021/10/cordova-web-app.html)를 참고하기 바란다. 


PWA(Progressive Web App)

모바일 웹 사이트 개발하여 서비스 하거나 또는 웹 앱을 빌드/배포를 고려할때 요즘 가장 주목 받고 있는 기술중 하나인 것 같다. PWA의 가장 큰 장점은 개인적인 생각으로 안드로이드 또는 아이폰에 개발자 등록 없이 설치형 프로그램과 유사항 기능을 할수 있는다는게 가장 큰 장점이지 않을까 생각한다.

PWA는 기본적으로 명칭에서 보는 바와 같이 웹앱으로 소개하고 있다. 그러나 실제 우리가 그동안 알고 있던, 앞서 언급한 Coredova와 같이 앱으로 빌드하고 배키징하여 배포후 설치하는 형식의 까다로운(?) 절차가 일단 필요없다.  물론 설치형이 아니라는 것에 대한 단점도 존재하지만 때에 따라서 이것이 단점이 아닌 경우도 존재한다.

어찌되었건 일반 사용자를 중심으로 서비스되는 앱이 아닌 특정 목정 또는 관리자용 또는 한정된 사용자가 사용하는 목적의 서비스에서는 효율적인 웹앱 플랫폼중 하나인 것은 분명해 보인다. 또한 현재 많은 곳에서 사용하려는 것(이건 개인적인 생각이니 가볍게 듣고 넘어가주는 센스를 ^^) 같은 분위기 인것 같다.

여기까지 사실 사적인 생각을 정리한 것이고 아래는 실제 소개하는 내용이다.

PWA는 'Progressive Web Apps'의 줄인 말로, 모바일 사이트에서 네이티브 앱과 같은 사용자 경험을 제공하는 기술입니다. 웹과 앱 모두의 장점을 결합한 제품

설치할 필요가 없지만 홈 화면에 아이콘 추가 및 푸시 알림도 가능하여 사용자와의 접촉 기회를 늘릴 수 있습니다. 그것뿐만 아니라 읽기 속도와 표시의 고속화, 오프라인 열람 등 다양한 이점을 얻을 수 있습니다.

출처: https://perfectmoment.tistory.com/1632 [자유시간]

PWA에서 구현할 수 있는 기능들은 아래와 같이 요약해 볼수 있다.
  • 푸시 알림
  • 아이콘을 홈 화면에 추가
  • 네이티브 앱과 같은 사용성(설치 불필요)
  • 프리캐시 기능으로 표시 속도 향상
  • 프리캐스 기능으로 오프라인에서 열람 가능

이에 대한 보다 상세한 내용은 여기(https://nurioweb.blogspot.com/2021/10/pwaprogressive-web-app-web-app.html)를 참고하기 바란다. 


참고 사이트

댓글

댓글 쓰기

이 블로그의 인기 게시물

[JAVA] 변수란? 변수타입?

이미지
프로그램 언어를 배울때 항상 먼저 배우거나 집고 넘어가는 것이 있죠? 네 맞습니다.  변수 라는 것입니다. C언어나 Java에서는 int, char, float 등 자료형에 따라 다르고, Javascript에서는 모든 변수를 그냥 var로 사용하죠. 물론 또 개발 언어마다 조금씩 차이가 있습니다. 하지만, 기본적으로 "변수"라는 기본 개념은 모든 언어에서 모두 동일합니다. 이번 포스팅은 이 변수에 대하여 낱낱이 파헤쳐 봅시다.  아! 참고로 변수에 대하여 정말로 낱낱이 땅끝까지 파헤치자면 이 한번의 포스팅으로는 부족합니다. 따라서 오늘은 일차적으로 가장 기본이 되는 변수의 정의와 원시타입에 대해서만 낱낱이 살펴보도록 하겠습니다. 변수란 무엇일까? 자! 일단 변수란 무엇일까요? 변수란? 물어보면 가장 먼저 사람들은 당당히 말을 하죠.  "변하는 수" 물론 이 말도 틀린 말은 아닙니다. 우리 프로그래밍에서는 변수라는 공간에 값이 항상 변하는 그리고 그런 용도로 사용하려는 것이 변수니까요. 변수는 영어로 "Variable"라고 읽습니다. 이것을 사전에서 찾아보면 "변화하기 쉬운, 변덕스러운, 다양한" 이라는 의미를 갖습니다. 뭐 이 말도 틀린 말은 아니네요. 하지만! 우리는 개발자로도 더 프로그래밍 적인 의미를 원합니다. 그래서 이렇게 정의를 했죠. 변수란? 데이터(값)을 저장할 수 있는 프로그램의 저장 공간! 서론이 길었네요. ^^. 항상 무언가 정의를 내리기란 쉽지 않습니다..ㅎㅎㅎ 변수를 좀 더 이해하기 위해 아래의 그림을 예를 들어 보겠습니다. 위와 같이 우리가 물을 마셔야 한다면, 물을 마시기 위해 당연히 물 컵이 있어야겠죠.  아! 물통에 입을 대고 드시는 분들도 계시지만... 그러면 엄마한테 혼납니다. ㅎㅎ 아무튼 이렇게 물을 마시기 위해 물을 담을 컵을 준비하는 것을 프로그래밍에서는 "데이터를 사용하기 위해 변수를 선언한다" 라고 이야기 할 수 있습니다.  그럼 ...
자세한 내용 보기

[JAVA] 문자셋(Charset)

이미지
문자셋의 역사 2022년 현재를 기준으로 가장 많이 사용되고 많이들 알고 있는 문자셋(Charset)은 UTF-8일 것이라 생각합니다. 물론 여러분들이 프로그래밍을 공부했거나 컴퓨터 공학을 전공했다면 ASCII 뿐만 아리나 UNICODE 등 다양한 문자셋을 알고 있겠죠. 그래서 이렇게 많은 문자셋들이 왜 생겨서 우리를 괴롭히는지 그리고 다 공부해야하는지 궁굼해 하는 분들이 많으실거라 생각하여 짧게 문자셋의 역사와 자주 사용되는 문자셋 몇개를 정리해 보려 합니다. 일단 문자셋의 대략적인 역사 또는 발전기를 아래와 같은 그림으로 살펴보도록 하죠. 위에서 보는 바와 같이 최초의 컴퓨터는 알파벳권에서 처음 개발 및 사용되었다고 합니다. 그래서 초기에 컴퓨터를 만들 당시 알파벳만 사용하면 되었던 것이죠. 그 시대 배경을 보더라도 글로벌 시대도 아닌 냉전 시대였으니 뭐 당연한거라고 생각할 수 있었을거 같습니다. 그렇게 시작되었던 초기 컴퓨터에서 0과 1밖에 모르던 컴퓨터에서 사람이 사용하기 위해 글자를 표시할 방법을 컴퓨터 과학자들이 의논하게 되죠. 고민끝에 컴퓨터에서는 데이터를 부호화하는 방법으로 숫자를 문자로 치환하는 방법을 생각하게 됩니다. 예를 들어 0은 NULL 이라는 아무것도 없다라는 기호로 그리고 숫자 65면 문자 알파벳 대문자 ‘A’로 66면 대문자 ‘B’ 이렇게 쭈욱 이어지다가 소문자 ‘a’는 97로 정하게 되죠.  이렇게 사람이 볼수 있는 문자를 컴퓨터 언어인 코드번호로 변경 또는 ‘부호화’하는 방법을 ‘인코딩(Encoding)’ 이라고 하고. 코드번호를 사람이 알아들을 수 있는 문자로 다사 되돌리는 것을 복호화 또는 ‘디코딩(Decoding)’이라고 합니다. 인코딩 : 문자, 숫자, 기호 등을 컴퓨터의 내부처리를 위해 숫자코드번호로 변경하는 것. 디코딩 : 컴퓨터의 내부처리 숫자코드번호를 문자, 숫자, 기호 등을로 다시 복원하는 것. 그래서 처음으로 이러한 기준을 만들었던 것이 ASCII(American Standard Code for Info...
자세한 내용 보기

[JAVA] 문자열 비교[== vs equals()]의 차이

이미지
자바에서 기본 자료형(원시타입)의 비교 연산은 일반적으로 == 연산자를 사용합니다. 하지만 String의 경우는 == 연산자를 사용하여 비교하면 안전하지 않죠? 안전하지 않다는 말은 무슨 뜻일까요? String의 경우 여러분들이 편하게 아무생각(?) 없이 사용하는 리터럴 즉, 대입 연산자를 이용해 바로 상수를 대입하는 방식으로 사용할 경우에는 일반적으로 == 를 이용해 값을 확인해도 문제가 없습니다. 하지만 사용자로 부터 입력을 받아 사용할 경우 동일한 값을 입력 받더라도 비교 연산자(==)는 동일한 값인데도 false를 반환하죠. 즉 아래와 같이 코드를 작성했다고 가정합시다.  Scanner sc = new Scanner(System.in); String id = sc.next();      // 사용자한테 ‘abc’를 입력 받았다고 가정. System.out.println(id == “abc”); // 비교연산자(==)를 이용해 비교하면 false. // 그래서 우리는 String의 메소드인 equals()를 이용해 비교하면 true를 반환합니다. System.out.println(id.equals("abc")); 이처럼 비교연산자(==)와 equals()는 왜 차이가 나는 것인지 한번 살펴보기로 하겠습니다. 먼저 그림을 보도록 하겠습니다. 위 그림에 대한 결론부터 이야기 하자면 String과 같은 클래스에서의 비교연산자(==)는 객체의 주소을 비교하는 것이고, equals()는 주소가 가리키는 실제의 값, 즉 문자열을 비교하는 메소드입니다. 따라서 우리는 String를 사용할 때 항상 안전하게 그리고 생각하지 말고 equals()를 사용하라고 배우죠. 위의 그림에서 선언한 각각의 변수들 주소를 이클립스에서 출력해보면 다음과 같습니다. String str1 = "Hello"; String str2 = "Hello"; String str3 = new String("World...
자세한 내용 보기