레이블이 앵귤러인 게시물을 표시합니다. 모든 게시물 표시
레이블이 앵귤러인 게시물을 표시합니다. 모든 게시물 표시
2021년 4월 5일 월요일

오랜만에 코딩 좀 하려고 봤더니, 아이오닉의 변화가 상당하네

방치했던 주식 앱도 손을 좀 보고 싶고, 추가하고 싶은 기능이 생겼다. 그리고 만들고 싶은 앱이 몇개 생겼다. 그래서 오랜만에 취미삼아 개인 프로젝트를 좀 해볼까 싶었다. 

근래 익숙했던 아이오닉을 사용할지 아니면 플러터를 사용할지 아주 잠시 고민에 빠졌다.

플러터와 아이오닉은 모두 원소스 멀티유즈가 가능한 개발 플랫폼이다. 1인 개발자가 사용하기엔 정말 좋은 도구다. 하나의 코드베이스로 안드로이드, iOS, 웹(+pwa) 등 다양한 플랫폼에 대응 가능한 결과물을 빌드할 수 있는 것이 큰 장점이다.

다만 미묘한 차이가 있다. 플러터는 코드를 컴파일 하면 앱이 네이티브 수준에서 작동한다. 반면에 아이오닉은 웹뷰 기반이다. 당연히, 앱의 성능은 물론이고 미묘한 화면 처리는 플러터가 월등히 우월하다. 그렇다고 해서 코르도바를 기반으로 한 아이오닉의 성능이 못 쓸 정도도 아니다.

아이오닉은 기존에 HTML, CSS, JS를 잘 사용했던 사람이라면 비교적 금방 익숙해 질 수 있다. 물론 앵귤러를 써 보지 않은 사람에겐 러닝커브가 없진 않다.

나는 오래전부터 꾸준히 아이오닉을 사용해 왔기 때문에 아이오닉을 사용하는 편이 편하다. 플러터를 쓰려면 Dart라는 언어를 새로 배워야 하고 플러터 프로젝트의 구성에 대해서도 공부를 해야하는 등 비교적 가파른 러닝 커브가 발생하기 때문이었다.

아이오닉은 다 좋은데 Angular 베이스라서 약간 마음에 안 드는 부분이 있었다. 그래서 이참에 플러터를 한번 공부해볼까 싶었다. 플러터와 아이오닉 사이에서 마음의 결정을 못 하고 있다가, 우연히 아이오닉 공식 사이트를 보고 깜짝 놀랐다.

기존에 아이오닉으로 만들어뒀던 아이오닉 기반의 레거시 코드를 업데이트 정도는 해야겠다 싶어서 아이오닉 사이트에 들어간 것이었다. 한동안 못 봤던 사이에 아이오닉은 버전이 많이 업그레이드 되어 있었다. 네이티브 기능들도 과거보다 조금 더 잘 지원하고, UI컴포넌트의 갯수도 훨씬 더 많이 늘어났고, 품질도 높아져 있었다.

무엇보다 놀랐던 것은 아이오닉이 이제 더는 앵귤러 베이스의 도구가 아니라는 점이었다.

이제는 아이오닉 프로젝트를 시작하기 전에 리액트, 앵귤러, 뷰 중에서 원하는 자바스크립트 프레임워크나 라이브러리를 선택할 수 있는 기능이 생겼다. 아이오닉 프레임워크도 전면 재개발 되었다.

아이오닉에서 지원하는 프론트엔드 자바스크립트 프레임워크와 라이브러리들

앞으로 아이오닉은 기존의 앵귤러 + 코르도바 기반이 아니라 앵귤러, 리액트, 뷰 중에서 하나를 고를 수 있고 코르도바와 캐파시터를 이용해서 앱을 빌드할 수 있다.

아이오닉은 훌륭한 도구임에도 불구하고 온리 앵귤러 베이스여서 외면 받고 저평가를 받아 온 측면이 없지 않다. 이제 원하는 프론트엔드 프레임워크를 입맛대로 고를 수 있는데다, 빌드 후 성능도 더욱 네이티브에 근접하게 좋아졌다. 

아이오닉 팀에서 누가 이런 생각을 했는지 몰라도 정말 대단하다. 제갈량급 인재라 할만하다. 프론트엔드 프레임워크를 다 쓸 수 있게 고쳐버릴지는 몰랐다. 어쨌든 개인적으로 즐겨쓰는 도구가 사장될까 걱정하던 이용자 입장에서는 날로 진화하는 프레임워크를 보니 안심도 되고 신나기도 한다.

플러터를 좀 배워볼까 하던 나는 플러터 배우기를 조금 뒤로 미뤄뒀다. 당분간은 아이오닉을 이용해서 앱 개발 작업을 조금 더 진행할 예정이다. 어차피 뒷단은 DB에 값을 넣었다 뺐다 하는 단순 웹서비스 베이스의 작업이니 아이오닉을 써도 성능에 크게 무리가 없을 것이고 러닝커브가 없어서 개인적으로 나에게는 유리할 것이다.

하지만 메타버스 시대를 맞아서 조금 더 기기 친화적인 서비스를 만들려면 플러터 공부도 하루 빨리 시작해야 할 것이다.

플랫폼별로 최적화 된 개발을 하는 게 가장 좋겠지만 그건 훗날 혹시라도 팀을 만들게 되면 고려할 사항이다. 혼자서 자바와 스위프트로 플랫폼별 대응을 해 본적이 있는데 일단 딱 하나의 서비스에 인생을 올인할 게 아니면 1인 개발자에겐 리소스 장벽이 있었다. 물론 혼자서 안드로이드, iOS, 웹 플랫폼에 고퀄을 내며 각기 대응하는 능력자 형님들도 계시긴 하지만.


2020년 8월 7일 금요일

jQuery에서 Vue.js와 React로 사고방식 전환하기

jQuery는 DOM을 조작하기에 편리한 도구입니다. 지금까지도 DOM을 컨트롤 하는 가장 강력하고 편리한 방법 중 하나입니다. 그래서 여전히 많은 대기업과 스타트업에서 jQuery를 사용하고 있습니다. 그만큼 안정성이 높고 사용하기에 편리하다는 의미도 되겠습니다.

그러나 jQuery는 대부분의 대형 프로젝트에서 무분별하게 쓰입니다. 그리고 심각한 성능 문제를 야기합니다. 또, 이미 한물간 퇴물 라이브러리로 인식되기도 합니다.

jQuery는 쉽습니다. 그래서 JavaScript를 다루지 못하는 사람도 쉽게 jQuery를 다룰 수 있습니다. 심지어 자바스크립트 배우기를 건너뛰고 jQuery를 이용해서 프로젝트를 진행하기도 합니다. 그러나 이것은 분명히 좋은 현상은 아닙니다.

주식 시장이 급락하던 3월에 프론트엔드 프레임워크의 검색량도 급감하는 것이 재미있습니다. 현재 세계에서 가장 많이 쓰는 프론트엔드 프레임워크의 검색량입니다. Vue.js가 절대 강자였지만 최근 어떠한 이슈로 리액트가 다시 왕좌를 탈환했습니다.
<자료 : 구글 트렌드>

이미 오래전부터 프론트엔드프레임워크나 라이브러리는 폭 넓게 사용되어 왔습니다. 대표적인 것은 3가지가 있습니다. 먼저 페이스북에서 지원하는 리액트입니다. 그리고 Evan Yu라는 개인 개발자가 만든 Vue.js,그리고 끝으로 이들 중 가장 역사가 오래된 Angular입니다. 앵귤러는 과거 앵귤러JS의 진화된 버전입니다. 구글에서 시작된 프로젝트입니다.

세계적으로는 모두 비등비등한 선호도를 갖고 있습니다. 그러나 한국에서는 압도적으로 리액트의 인기가 높습니다. 어쨌든 어떤 도구를 쓰든 그것은 크게 중요하지는 않습니다. 그리고 오늘 이야기 할 주제도 그건 아니니까 일단 넘어가겠습니다.

jQuery에서 Vue.js나 React로 넘어갈 때 사고방식 전환을 하지 못해 어려움을 겪는 분들이 많습니다. 알고보면 별 것 아닙니다. 그런데, 아주 기본적인 설명을 해주는 사람이 없다보니 아주 기초적인 부분에서 걸려 넘어지는 분들이 계시는 것 같습니다.

그렇다면 jQuery에서 Vue.js로 넘어갈 때 어떤 사고방식 전환을 해야하는지 핵심적인 부분을 간략하게 짚어보겠습니다.

jQuery의 DOM First 사고 방식


jQuery는 DOM에 직접적으로 접근하고, 컨트롤합니다.
여기를 컨트롤 해주세요
위와 같은 HTML 마크업이 있습니다. jQuery를 이용해서 <span>태그를 감춰보겠습니다.
$(".box span").hide();
CSS 선택자와 거의 유사한 방법으로 DOM에 접근이 가능합니다. 편리하고 강력합니다.

Vue.js는 Data First 사고 방식


Vue는 가급적 DOM에 직접 접근하지 않고, 직접 컨트롤 하지 않습니다.
여기를 컨트롤 해주세요
jQuery는 CSS 선택자와 동일한 문법을 씁니다. 그래서 DOM에 직접 접근합니다. 그러나 Vue.js는 tag, id, class 값을 통한 직접 적인 DOM 접근을 하지 않습니다.

위의 예제에서는 v-if라는 컨디셔너 디렉티브가 붙어있습니다.
show: true
ES6의 export default를 이용해서 data 객체에 다음과 같이 show에 true값을 적용합니다. 그렇다면 앞서 작성한 v-if문은 <span>태그를 그대로 출력할 것입니다. 반대로 값이 false로 바뀌면 <span>태그는 사라지겠죠?

위 코드의 온전한 컴포넌트의 코드는 다음과 같습니다.



Vue는 기본적으로 위와 같은 구조로 작동을 합니다. data 객체의 return 구문 안에 템플릿에 뿌려 줄 데이터나 DOM 컨트롤을 위한 데이터를 넣어주면 됩니다. 그리고 이 데이터는 물론 동적으로 관리할 수 있으며 실시간으로 감시할 수도 있습니다. 그 부분에 대한 건 제가 혹시라도 나중에 다룰 수 있으면 다루어 보겠습니다.

객체에 들어가는 데이터들은 JSON을 사용할 수 있다면 쉽게 사용할 수 있습니다. JSON과 거의 흡사한 문법을 사용합니다.

정말 최대한 간단히 설명을 해보았습니다. Vue.js는 jQuery와 달리 DOM에 직접 접근하지 않습니다. 다만, 데이터의 상태 변동에 따라 DOM도 변동하게 되는 방식입니다.

2020년 8월 7일
송종식 드림