CLIEN

본문 바로가기 메뉴 바로가기 보기설정 테마설정
톺아보기 공감글
커뮤니티 커뮤니티전체 C 모두의광장 F 모두의공원 I 사진게시판 Q 아무거나질문 D 정보와자료 N 새로운소식 T 유용한사이트 P 자료실 E 강좌/사용기 L 팁과강좌 U 사용기 · 체험단사용기 W 사고팔고 J 알뜰구매 S 회원중고장터 B 직접홍보 · 보험상담실 H 클리앙홈
소모임 소모임전체 ·굴러간당 ·주식한당 ·아이포니앙 ·MaClien ·일본산당 ·방탄소년당 ·개발한당 ·자전거당 ·안드로메당 ·이륜차당 ·소셜게임한당 ·육아당 ·나스당 ·AI당 ·디아블로당 ·소시당 ·가상화폐당 ·골프당 ·야구당 ·걸그룹당 ·젬워한당 ·클다방 ·리눅서당 ·IoT당 ·패셔니앙 ·맛있겠당 ·키보드당 ·사과시계당 ·PC튜닝한당 ·캠핑간당 ·3D메이킹 ·X세대당 ·ADHD당 ·AI그림당 ·날아간당 ·배드민턴당 ·농구당 ·블랙베리당 ·곰돌이당 ·비어있당 ·FM당구당 ·블록체인당 ·보드게임당 ·활자중독당 ·볼링친당 ·냐옹이당 ·문명하셨당 ·클래시앙 ·콘솔한당 ·요리한당 ·쿠키런당 ·대구당 ·DANGER당 ·뚝딱뚝당 ·개판이당 ·동숲한당 ·날아올랑 ·전기자전거당 ·e북본당 ·갖고다닌당 ·이브한당 ·물고기당 ·도시어부당 ·FM한당 ·포뮬러당 ·안경쓴당 ·차턴당 ·총쏜당 ·땀흘린당 ·하스스톤한당 ·히어로즈한당 ·인스타한당 ·KARA당 ·꼬들한당 ·덕질한당 ·어학당 ·가죽당 ·레고당 ·LOLien ·Mabinogien ·임시소모임 ·미드당 ·밀리터리당 ·땅판당 ·헌팅한당 ·오른당 ·영화본당 ·MTG한당 ·소리당 ·노키앙 ·적는당 ·방송한당 ·바다건너당 ·찰칵찍당 ·그림그린당 ·소풍간당 ·심는당 ·패스오브엑자일당 ·라즈베리파이당 ·품앱이당 ·리듬탄당 ·노젓는당 ·달린당 ·Sea마당 ·SimSim하당 ·심야식당 ·윈태블릿당 ·미끄러진당 ·축구당 ·나혼자산당 ·스타한당 ·스팀한당 ·파도탄당 ·퐁당퐁당 ·테니스친당 ·테스트당 ·빨콩이당 ·공대시계당 ·여행을떠난당 ·터치패드당 ·트윗당 ·창업한당 ·VR당 ·시계찬당 ·WebOs당 ·위스키당 ·와인마신당 ·WOW당 ·윈폰이당
임시소모임
고객지원
  • 게시물 삭제 요청
  • 불법촬영물등 신고
  • 쪽지 신고
  • 닉네임 신고
  • 제보 및 기타 제안
© CLIEN.NET
공지[점검] 잠시후 서비스 점검을 위해 약 30분간 접속이 차단됩니다. (금일 18:15 ~ 18:45)

팁과강좌

PC/모바일 프론트경험 없는 개발자가, React Native로 앱 만든 후기 27

14
2021-01-10 15:54:53 수정일 : 2021-01-11 11:55:56 210.♡.41.89
Yi

우선 필자는 대기업 프로그래머 6년차. 하지만  앱개발 및 프론트앤드 경험은 전혀없습니다. 

약 1년전부터 개인적으로 리액트 네이티브로 앱개발을 배우기 시작하면서 느낀점을 간단하게 공유하려 합니다.

참고로 안드로이드 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#


잘못된 형식의 이미지 링크입니다. 잘못된 형식의 이미지 링크입니다.


Yi 님의 게시글 댓글
  • 주소복사
  • Facebook
  • X(Twitter)
댓글 • [27]
linuxer
IP 1.♡.236.122
01-10 2021-01-10 16:00:43
·
저도 react-native 로 앱을 만들어봤는데 특이한(?) 빌드실패를 겪었습니다. sdkman(https://sdkman.io/) 이라는 것으로 자바 버전 관리를 하는데 j9 구현체를 사용했다가 안드로이드 빌드 실패가 안되었는데 디버깅하기가 어려웠어요. 혹시나 이런 이슈 만나시면 hotspot 구현체로 사용하세요~

https://github.com/AdoptOpenJDK/openjdk-support/issues/127
Yi
IP 210.♡.41.89
01-11 2021-01-11 11:22:26
·
@linuxer님 좋은정보 감사합니다.
수라정
IP 122.♡.243.22
01-10 2021-01-10 16:16:50
·
현직 fe개발자입니다. 1년만에 javascript react 번들러까지 깨우치시다니 대단하십니다.
Yi
IP 210.♡.41.89
01-11 2021-01-11 11:23:10
·
@수라정님 항상 느끼지만 FE개발자들 존경합니다. 막상 해보니 어려운부분이 많네요. BE 쪽도 만만치 않지만..
HotCrispy
IP 218.♡.218.138
01-10 2021-01-10 16:57:57
·
감사합니다
Yi
IP 210.♡.41.89
01-11 2021-01-11 11:23:26
·
@HotCrispy님 감사합니다.
삭제 되었습니다.
아무개____
IP 95.♡.232.62
01-10 2021-01-10 17:52:59
·
리액트는 다른건 다 정말 좋은데 스테이트 매니지먼트에 잘못 발을 디디면 나오기 힘든 지옥에 빠지는게 힘들더군여
리덕스 유즈리듀서 다 좋은데 더 쉬운 라이브러리가 나왔으면 좋겠어요 ;_;
끗감
IP 112.♡.121.70
01-10 2021-01-10 22:30:24
·
@아무개____님 mobx가 조금 더 쉽습니다만, 리덕스 사용하시는게 좋습니다. 리덕스의 문제라기 보다는 요즘 프론트엔드/클라이언트 사이드의 상태관리가 복잡해지는 추세라 그렇습니다.
Yi
IP 210.♡.41.89
01-13 2021-01-13 17:33:09 / 수정일: 2021-01-13 17:33:19
·
@아무개____님 저도 구현하면서 좀 번잡하다는 생각이 많이 들때가 있네요.. 특히나 store에 subscribe 걸 때는 신경 많이 써줘야 하는 것 같습니다. 잘못하면 루프도 생기고
kalook
IP 121.♡.212.46
01-10 2021-01-10 19:21:12
·
FE개발자입니다.
정말 고생많으셨습니다. 박수를 보냅니다.
Yi
IP 210.♡.41.89
01-11 2021-01-11 11:24:07
·
@kalook님 FE개발자님들 존경합니다. 해보니까 어려운부분이 많네요.
니파
IP 121.♡.201.79
01-10 2021-01-10 19:58:18
·
그러면 웹앱..인건가요?
공부모드
IP 211.♡.67.203
01-10 2021-01-10 21:55:33
·
@니파님 아니요. 개발은 자바스크립트로 하지만 최종 결과물은 내이티브앱 입니다. 웹뷰 아닙니다.
니파
IP 121.♡.201.79
01-10 2021-01-10 21:57:00
·
@공부모드님 자바나 코틀린 대비 장단점이 어떻게 되나요? 네이티브라면 동작 속도나 이런것도 동일하다는 의미인건지... JNI같은 것도 가능한가요..?
끗감
IP 112.♡.121.70
01-10 2021-01-10 22:26:10
·
@니파님 네이티브보다 느리고, 리소스(메모리, 앱용량) 더 많이 먹습니다. 자바스크립트로 작성된 코드가 대응하는 네이티브 코드를 실행하는 방식입니다. 네이티브 코드를 호출하는 방식이니 JNI도 가능할텐데, 추가적으로 호출하고 호출받는 함수를 작성해줘야합니다. 전반적으로 속도는 빠른편이지만 애니메이션, 사용자 제스쳐 같이 빠른 반응이 필요한 부분에서 병목현상이 발생할 수 있습니다. 또 네비게이션 구현이 쫌.. 쫌 그렇습니다. 단점은 이 정도이고, 장점은 웹 개발자가 쉽게 앱개발이 가능하다는 점, 하이브리드 형태로 ios/aos 코드 공유가 된다는점, 핫리로드라고 해서 코드 작성하고 바로바로 결과를 확인할 수 있는 기능이 있습니다. 장점에 해당되지 않는다면 굳이 리액트 네이티브를 사용할 필요는 없습니다.
Yi
IP 210.♡.41.89
01-11 2021-01-11 11:26:09
·
@끗감님 Flutter쪽이 요즘은 더 핫한듯 싶긴 합니다. 저는 1년전부터 시작해서 그때는 RN이 좀 대세였는데, 막상 해보니까 복잡한부분도 많고 가장 아쉬웠던 부분은, 웹으로 바로 전환이 안된다는 점.. Flutter는 큰 수고없이 바로 웹으로 전환할 수 있어 보이더군요.
sinjobs
IP 222.♡.136.225
01-10 2021-01-10 20:25:33
·
저도 배워보고 싶어지네요 ㅎ
Yi
IP 210.♡.41.89
01-13 2021-01-13 17:30:57
·
@sinjobs님 JS가 익숙하다면 나쁘지 않은 선택인 것 같습니다 ㅎ
n54L
IP 121.♡.142.171
01-10 2021-01-10 20:34:12
·
flutter는 생각하고 멀었나요? 도큐먼트는 rn이 많다고 하지만요
끗감
IP 112.♡.121.70
01-10 2021-01-10 22:33:06
·
@N54L님 거의 모든면에서 flutter가 좋습니다. 오히려 flutter가 훨씬 더 성숙한 상태입니다. (리액트 네이티브는 아직 1.0 버전도 못 찍고 있습니다...)
가디
IP 49.♡.148.106
01-10 2021-01-10 22:59:11
·
flutter는 Dart가...
Yi
IP 210.♡.41.89
01-11 2021-01-11 11:28:31
·
@가디님 RN의 가장 큰 장점이 javascript 라는것이긴 하죠 ㅎㅎ 경력직 면접 볼때도 javascript로 알고리즘 풀어도 되고, 익숙해지면 여러도메인에서 능력을 발휘할 수 있는 것 같습니다. 다만, JS수련이 끝났으면 Flutter로 넘어가는게 좋을것같긴 합니다 ㅋㅋ
아리아리션
IP 125.♡.111.106
01-11 2021-01-11 11:57:02 / 수정일: 2021-01-11 11:57:13
·
진짜 여러 언어 많이 해본 늙은 개발자인데
React 책한권 다 보고나서도 상태 어쩌고 하는 것들에 대해서 이해를 못했어요.
대체 왜 그래야하는지 이해가 안되니까 머릿속에 들어오지도 않고..
기존 개발언어와는 결이 다른 느낌이네요 ㅎ
포기했습니다. 그냥 C++, Python이나 가지고 놀려구요.
Yi
IP 223.♡.86.89
01-11 2021-01-11 12:34:29
·
@아리아리션님 공감이갑니다. 저도 실제로 프로덕트 개발해보고 문제들을 접하다 보니까 상태값에 대해서 조금이나마 이해를 할 수 있었던 것 같습니다. 직관적이지 않은 부분이 있는것같아요
istree
IP 112.♡.117.90
01-12 2021-01-12 09:36:53
·
JS개발 2년차인데 아직도 헤메고 있네요
키워드가 참고가 되네요 좋은글 감사합니다.
Yi
IP 210.♡.41.89
01-13 2021-01-13 17:31:29
·
@istree님 댓글 감사합니다. JS가 깊게파다보면 어렵더라구요. 저도 아직 공부중입니다.
열심개발자
IP 1.♡.199.243
04-04 2021-04-04 16:13:17
·
정보 얻고갑니다. 감사합니다 :)
새로운 댓글이 없습니다.
이미지 최대 업로드 용량 15 MB / 업로드 가능 확장자 jpg,gif,png,jpeg,webp
지나치게 큰 이미지의 크기는 조정될 수 있습니다.
목록으로
글쓰기
글쓰기
목록으로 댓글보기 이전글 다음글
아이디  ·  비밀번호 찾기 회원가입
이용규칙 운영알림판 운영소통 재검토요청 도움말 버그신고
개인정보처리방침 이용약관 책임의 한계와 법적고지 청소년 보호정책
©   •  CLIEN.NET
보안 강화를 위한 이메일 인증
안전한 서비스 이용을 위해 이메일 인증을 완료해 주세요. 현재 회원님은 이메일 인증이 완료되지 않은 상태입니다.
최근 급증하는 해킹 및 도용 시도로부터 계정을 보호하기 위해 인증 절차가 강화되었습니다.

  • 이메일 미인증 시 글쓰기, 댓글 작성 등 게시판 활동이 제한됩니다.
  • 이후 새로운 기기에서 로그인할 때마다 반드시 이메일 인증을 거쳐야 합니다.
  • 2단계 인증 사용 회원도 최초 1회는 반드시 인증하여야 합니다.
  • 개인정보에서도 이메일 인증을 할 수 있습니다.
지금 이메일 인증하기
등록된 이메일 주소를 확인하고 인증번호를 입력하여
인증을 완료해 주세요.