2021년 1월 10일 일요일

프론트경험 없는 개발자가, React Native로 앱 만든 후기

대기업 프로그래머 6년차. 하지만 앱개발 및 프론트앤드 경험은 거의 없음.

참고로 안드로이드 IOS 개발경험은 전무하였고, 실제 업무는 데이터 처리 및 클라우드쪽.


사실 프론트앤드 개발하면서 가장 어려웠던 부분은, Javascript 진영을(landscape) 이해하는 것 이었다.

볼륨이 워낙 커서 어떤 순서로 어떻게 이해해야 할지 상당히 난감했던 기억이 있었다.

 * 추천드리는 순서: ES3~ES7까지의 히스토리와 문법 이해 -> Javascript 내부구조(이벤트루프, 비동기) + Nodejs이해 -> BOM, DOM 조작 관련 커멘드 -> Webpack 들 모듈러에 대한 이해


사실 안드로이드나 IOS 도메인의 내부 구조에 대해서는 잘 몰랐고 지금도 잘 모른다. 이미 RN이 상당한 수준으로 감싸고 있기 때문에 많은경우 신경 쓸 필요가 없다. (과거에는 manual install 이나 linking 등등 떄문에 android를 너무 모르면 개발하기 쉽지 않았다.)

ReactJS 와 React Native는 웹과 앱이라는 도메인이 다르지만 구조적 개념은 비슷하다. 따라서 둘 중 하나만 배우면 둘다(웹과 앱) 잘할 수 있다.

--

React Native를 사용하며 느꼈던 점

1. UI 조작이 직관적이다: DOM 을 직접 조작하는건 매우 고통스러운 일이며, 직관적이지 않다. React는 각 UI 요소를 전부 컴포넌트로 관리하여 살제로 우리에게 보이는 UI묶음이 하나의 객체처럼 여겨진다. 즉, UI와 실제 코드의 괴리감이 적은편


2. 맨바닥부터 시작하지 말라: 물론 React Native 도 미리 제공하는 예쁜 컴포넌트들을 다수 가지고있지만,  그런 기본 컴포넌트보다 디자인이 들어간 컴포넌트를 원할것이다. 필자는 Kitten UI 를 사용하였고, 일종의 Wrapper로써, 꽤나 전문적이어 보이는 디자인을 활용할 수 있었다.


3. 찾아보면 다 있다: 내가 필요한 기능을 집어넣고 싶을때 가장 먼저 해야할것은 구글링. 리액트 네이티브의 써드파티들은 생각보다 엄청나게 일을 열심히한다. 예를들면 카메라 조작이 필요하다면 검색을 잘 해서 가장 최근까지 활발히 개발되어있는 컴포넌트를 사용하면 된다. 


4. 설치하면서 자주 막힌다: 이게 특히나 안드로이드쪽 번들링할때 문제가 많이 발생하는데 왠만하면 gradle 떄문인 경우가 많다. 설치가 좀 꼬였을 경우 왕왕 cd ./android & ./gradlew clean 으로 해결되는 경우가 꽤 많다. 그 외에도 자잘하게 이슈들이 계속 발생한하는데 무었이 문제인지 알기 어려운 부분이 너무 많다. 이떄는 그냥 'what went wrong' 부분을 카피해서 구글링하면 대체로 해결법을 찾을 수 있다. 


5. 될수있으면 서버리스로: firebase를 일정부분 무료로 사용할 수 있기때문에, 구태여 백엔드를 만들지 않아도 서버리스로 쉽게 무료로 앱을 만들 수 있다. 또한 Invertes라는 회사가 firebase에 대해 react native 에서 조작할 수 있도록 패키지를 만들었고 문서도 상당히 잘 되어있기 때문에 활용도가 높다.


6. 상태에 대한 이해가 필수: 다음과 같은 키워드에 대해 잘 이해해야 한다. Redux, Hook, useEffect, useStatue, Subecribe. 리액트는 무조건 상태값 조정으로 모든 동작이 이루어진다. 리액트의 정적구조는 JSX 가 책임지고 동적구조는 function 과 status가 책임진다. 처음 앱을 설계할 때 이 상태값을 어떻게 관리하고 조작할 것인지 미리 생각해두는게 스파게티코드를 막는 매우 중요한 부분이다.


7. 성능에 대해서 신경써야한다: 컴포넌트 상태가 자주 바뀌고 그에따라 자주 랜더링될수록 사용자는 버벅거림을 느낄 수 있다. 개발할 떄 항상 이점을 염두해두고 같은 동작이라면 최대한 랜더링이 자주 되지 않는 방향으로 설계해야한다.


8. IOS 개발하려면 어쨌든 맥이 필수: 아무리 하이브리드용 언어라지만 Xcode와 에뮬레이터가 있어야 앱을 번들링해서 앱스토어에 등록할 수 있다. 또한 실물 아이폰이 없으면 아무리 에뮬레이터에서 잘 돌아가도 실제 기기에서의 동작을 보장할 수 없다. 개발 자체도 맥에서 하는게 더 편한 이유는, 리액트네이티브 코드가 안드로이드 에뮬레이터에서 썩 좋은 성능올 돌아가지 않는다.


--


결과물 : 여기저기 다니면서 맛집이나 카페 등등 기록하려고 만든 앱입니다. 친구들끼리 팔로잉 할수도 있고. 이웃들끼리 소통할 수 있는 플랫폼 입니다.


온더랜드 - 지역기반 SNS

Android: https://play.google.com/store/apps/details?id=com.duddlsdbql.ontheland

Ios: https://apps.apple.com/us/app/id1518369229#

원문: https://www.clien.net/service/board/lecture/15783611