한빛미디어

한빛미디어의 “처음 배우는 리액트 네이티브”를 리뷰하고자 합니다. 

임베디드 플랫폼 개발을 하다가 뒤늦게 앱 개발을 시작하였습니다. 시작은네이티브 기반 앱이었고, 우연히 해커톤 대회를 위해서 자마린을 사용한 것을 시작으로, 퇴사자 인수인계를 받은 프로젝트도 cordova/vue.js 기반의 Quasar이었으니 자연스레 크로스 플랫폼이나 하이브리드 애플리케이션 개발에 대한 관심이 이어졌습니다. 당연히 주목을 받는 리액트 네이티브나 플러터도 공부도 시작했고, 몇권의 크로스 플랫폼 관련 개발 서적을 읽어서 이를 기반으로 도서 리뷰를 하고자 합니다.

우선 내용과 상관없이 도서의 재질은 칭찬할 만 합니다. 개인적으로입문서적으로 두꺼운 도서를 선호하지 않고 경험상 책의 두께에 반비례해서 진도 의지가 반감되는 현상을 겪어서 왠만하면 입문서적은 얇은 도서로 시작하자는원칙이 있습니다. 하지만, 이 도서의 경우 500 페이지 가까운 분량 임에도 그 반 페이지 분량이 아닐까 싶을 정도로 얇은 재질과 두께를 가지기에 읽는 부담이덜합니다.

물론 얇은 재질로 인해서 앞뒷면의 잔상이 남아 몰입도를 떨어뜨릴 수 있어서, 이런부분 개인 호불호 차이기 있으리라 생각됩니다.

IT 도서 특성상 코드를 어떻게 표현하고 설명하는지도 중요한 부분인데, 사용된 코드의 경우 아래와 같이 문법에 따라 적절한 컬러로 구분해 독자 이해도를 높입니다. 주석의 경우도 Dimmed 그레이 처리를 한 부분이나, 폰트 사이즈도 본문 사이즈와 차이를 두어, 시각화에 공을 들여 섬세하게표현하고 있습니다. 

사용된 그림들 역시 단순화된 블록도 그림들이 많이 사용되었고, 이 역시 컬러 구분을 두어본문이해도를 높이려는 노력과 배려가 보입니다. 

이런 편집에 대한 지적을 굳이 하는 이유는 간혹 편집에 공을 들이지 않고 출간된 도서를 보면 내용이 좋고 전문적인 지식에 대한 내용의양도 꽤 할애했음에도 불구하고 전문성과는 거리가 먼 듯한 느낌을 줄 수 있을 뿐만 아니라 무성의 함이 느껴지기도 하기 때문이죠. “처음 배우는 리액트 네이티브”은 확실히 전문적인 편집을 엿볼 수있습니다. 

누구를 위한 책인가

독자 타겟은 모바일앱 개발을 네이티브 앱 개발을 하다가 크로스 플랫폼 기반 개발로 넓히려는 독자도 안성맞춤이고, 모바일앱 개발을 처음 접하는 이들도 무리 없다고 보입니다. 안드로이드앱 개발 서적의 경우, 가령 바이블이라는 부제를 달고 있는 도서들은 그 분량이 상당합니다. 안드로이드 프레임워크 API나 기반 지식 뿐만 아니라 시스템 플랫폼에대한 남고 있는 경우도 많아서 큰 맘을 먹고 오랜기간 학습을 지속해야 목표한 바를 이룰 수 있습니다. 

책의 구성은?

도서 후반에 나온 저자의 코멘트가 기억에 남습니다. 

안드로이드나 ios에 전문적인 개발을 위해서는 어플리케이션 레벨뿐만아니라 프레임워크, 또한 시스템 플랫폼에 대한 방대한 지식이 요구되고,이는 분명한 사실이죠. 다만 관련 지식을 A-to-Z로부터 목적으로 삼을 경우 시도도 못해버리고 끝날 수 있으므로“일단”따라해보고 모르는 부분을 살을 붙이듯 배우는 방법도효과적입니다. 흥미에 흥미를 더하는 방법이기 때문입니다.

책을 읽어보면 이런 저자의 저술 방향이 보입니다. 3장과 4장에서 JSX, 컴포넌트,props와 state, 이벤트 등의 컴포넌트 기본을 배우고, 5장에 할 일 관리 어플리케이션을 직접 만들어봅니다. 이후 6장과 7장에서 API에대해서 좀더 자세히 배우고 나서 8장과 9장에서 내비게션과채팅 어플리케이션을 만들고 10장 배포하기로 마무리 하고 있습니다.

3, 4장에서 기본 문법을 배우고 나서 프로젝트를 직접 수행하면서이후 필요한 문법은 진행하면서 살을 붙이는 형식입니다. 가령 5장은TODO List 앱을 만듭니다. 

먼저 앱의 UI 와이어 프레임을 보여주고 어떤 기능이 요구되는지 기능 정의를 합니다. 

물론 전제는 앞에서 배운 컴포넌트와 스타일링만으로 만들 수 있는 어플리케이션에 한정합니다.

타이틀을 만드는데, Title 컴포넌트가 화면 가장 위에 나타나고추가되는 항목들을 위에서부터 정렬되도록 justify-content 값을 flex-start로 변경합니다. 그런데 ios에서 아이폰 11의 노치 디자인이 적용된 기기의 경우 아래와 같이타이틀이 가려지는 문제가 발생할 수 있습니다. 

리액트 네이티브에서는 자동으로 padding 값이 적용되어 노치 디자인 문제를 해결할 수 있는 SafeAreaView 컴포넌트를 제공하고 있고, Contrainer 컴포넌트가 View가 아닌 SafeAreaView 컴포넌트를 적용하여 노치 디자인 문제가 해결된 것을 볼 수 있습니다. 이후 작업으로는 Input 컴포넌트를 추가하여 추가, 편집 메뉴 버튼을 구성하고 할 일 목록을 리스팅하여 보여줍니다. 리액트 네이티브에서 제공하는 ScrollView 컴포넌트를 이용해 리스팅 항목이 많아지는 경우 화면이 넘어가도록 스크롤을 적용하여 화면을 구성합니다.

세밀하게는 다양한 크기의 화면에서 양쪽에 동일한 공백을 유지하기 위해 Dimensions으로 화면의 너비를 구하여 스타일을 적용합니다. 그럴듯한 UI 구성이 되었고, 5.5 절부터 항목 추가, 삭제, 수정을 위한 내부 기능 구현을 시작합니다. 부가 기능으로는 데이터를 로컬에 저장하고 불러오는 기능을 구현하기 위해서 리액트 네이티브에서는 async-storage를 이용합니다(AsyncStorage는 deprecated).

5장의 내용을 다시한번 살펴보면 어떤 앱을 만들기 위한 것인지 기능정의를 하고 UI 와이어프레임 구성을 시작으로 (실무에서는요구사항을 정리하여 기능 정의서를 작성하고 UX SRS 구성하여 기획팀과 협의를 하는 과정을 거치겠지요), 컴포넌트를 사용하여 UI를 구성하고 내부 기능 구현을 하는 순서로독자로 하여금 가이드 하고 있습니다. 이렇게 편집이 잘되어 있고, 내용이 좋은 도서를 읽으면 결과적으로지식이 얼마나 쌓였는지와 별개로 기분이 좋습니다. 읽는 즐거움이 있기 때문이지요. 처음에는 모르지만 기능 구현을 하고 난뒤 다시 살펴보면 작가가 내용 구성과 살을 붙이는 순서가 느껴지고 말이죠.

마지막으로 브릿지 구조를 가지는 프레임워크는 새로운 방식은 아닙니다. 임베디드플랫폼에서 구동되는 브라우저 기능 구현을 위해서는 네이티브 동작을 위해서 브라우저 플러그인을 뚤어야 하고 가령 HbbTV스펙을 구현한 TV 어플리케이션 모두 브릿지 구조로 꽤 오래전부터 구현을 했기 때문입니다. 다만 옛날과 다르게 안드로이드나 ios 플랫폼의 프레임워크와의 인터랙션을리액트 네이티브에서 이미 구현이 되어 있기 때문에 JavaScript 코드만으로 별도의 플러그인이나네이티브 구현 없이도 가능하다는 것이 크로스 플랫폼 방식의 코드 개발의 큰 장점이겠지요. 뿐만 아니라아래와 같이 기존의 코도바나 아이오닉에 비해 장점을 가지고 있습니다.

물론 단점도 존재합니다. 직접적으로 플러그인 뚫거나 네티이브 기능구현이 가능한지 모르겠으나 프레임워크 의존적인 부분이 있겠지요. 이점은 개인적으로 이전에 Quasar 프레임워크 기반의 블루투스 통신앱을 제작할 때 절실히 느꼈습니다.Ios와 안드로이드 프레임워크 모두를 충족하는 API가 정의되어 있다보니 네이티브 기반앱에서 가능한 부분도 크로스 플랫폼에서는 제약으로 지원되는 콜백 이벤트나 status 함수가 누락되는경우가 더러 발생하더군요.

이러한 제약에 대한 부분은 크로스 플랫폼 개발이 대세가 되고 있기 때문에 시간이 지날수록 줄어들고 좁혀질 것으로예상됩니다. 좋은 가이드 도서를 리뷰하게 되어 영광이었고, 도서한권을 끝냈다고 해서 당장 의도한 어플리케이션을 만드는 것은 어렵겠지만 (그러한 경우는 이제 두꺼운바이블 도서도 무장을 좀더 해야 자유로워지겠지요) 한발 힘차게 나아갔으니 이를 시작으로 관심과 의지만있으면 또한발 나아갈 수 있을거 같습니다.