물에 살고싶은 개발자

리액트 네이티브를 시작하기까지 삽질기(회고록) 본문

React-Native

리액트 네이티브를 시작하기까지 삽질기(회고록)

돼지사랑 2019. 5. 30. 11:33

이 글은 다음번에 새로운 기술을 시작할때 같은 실수를 하지 않기 위한 글이다.

(즉 내가 보기위한 글이다.)


사실 이 글을 쓰는 지금시점에서도 웹스톰을 포기하고 vsc로 개발을 해야하는 타이밍이긴 하지만,

지금 개발을 들어가면 글쓰기를 미루고 미루다 결국 안쓸것같아서 미리 쓰고 간다.

긴 글이 될지 안될지는 써봐야 알것같다. 있었던 일을 날것 그대로 전하고싶기에 편집없이 횡설수설 할 예정이다.


일단 시작하기전 요약부터하자면

1. 리액트 네이티브의 기술이 어떻게 돌아가는지 뭔 장단점을 가졌는지 파악(블로그를 주로 봣고 공홈은 번역기의 힘을 빌어 장점만 참고함)

2. 개발환경 구축하는법과 개발툴에 대해 검색 -> 이 과정에서 기존에 익숙한 inteliJ 기반의 웹스톰을 선택(난 안드로이드 개발자였기때문)

3. 시간을 너무 허비하는것같아서 일단 실전강의(노마드코더의 날씨,투두앱만들기)를 보면서 프로젝트 생성

4. 기존에 구축해둔 node기반 서버와 간단한 통신만 구축해봄

5. 조금 만져보다 막혀서 또 강의시청

6. 웹스톰의 단점에 대해 깨닫고 결국 vsc(비주얼 스튜디오 코드)를 사용하기로 결정(현시점)


이런 단계를 거쳐왔다. 이게 대략 2주간 해왔던 내 프로세스...

새삼 회고해보면 시간허비가 어마어마하다. 2번을 무려 2,3일을 했던거같다.

새로운 기술을 만지는거에 대한 막연한 두려움 때문이었던것같다.


아무튼 본격적으로 시작.


회사에서 새로운 프로젝트를 시작하게 됐다.

기존에는 네이티브로 나와함께 아이폰개발자 한분이 개발을 하고있었으나, 아이폰개발자분이 퇴사를 하고 나혼자 남게됐다.

하지만 여전히 서비스는 네이티브로 진행되고있었기에 일정은 여유롭게 받았어도 ios 네이티브를 직접 공부해 만져야 하는 상황을 맞이했다.

그러나 함께 일하던분의 코드엔 주석이 없었고..안그래도 처음 접하는 기술인데 주석까지 없으니 난감하기 그지없어 이 내용을 공유했다.

그렇게 어찌어찌하다보니 기존에 서비스하던건 잠시 보류상태로 놓고 새로운 프로젝트에 들어가게 됏다(회사 사정에 따라)

어차피 클라이언트 개발자는 나 하나였고 이번에도 앱서비스였는데 아이폰개발도 결과적으로 필요한 상황이다.

어찌할까 생각하다 전부터 해보고싶었던 하이브리드앱, 그러니까 플러터나 리액트 네이티브를 이용해 둘다 빌드 가능한 기술을 써보고싶어

이를 대표님에게 제시했고, 흔쾌히 받아들여져서 프로젝트가 진행되게 됐다.

새로운 프로젝트이기에 기획과 디자인의 시간이 필요했고 덕분에 본격적인 개발에 들어가기 전, 공부를 할 시간을 얻었다.


처음 했었던것은 리액트 네이티브(React-native)와 플러터(Flutter)의 비교.

개인적으로 하이브리드앱 3세대라고 할수있는 플러터를 사용하고싶었지만, 새로운 프로젝트 성격상 나중에 웹서비스를 할 가능성이 있었고,

활발한 커뮤니티 덕분에 조금이라도 문서가 많은 리액트 네이티브를 선택했다. 


본격적으로 리액트 네이티브에 대해 공부하기 시작. 

일단 시작은 플러터와 비교과정에서 알게된 지식을 좀 더 본격적으로 보충했다. 

그 과정에서 름아카데미(Realm Academy)의 자료나 리액트 네이티브 공홈,노마드코더의 영상, 각종 블로그들을 참고했다.

리액트 네이티브가 나온 이유, 특징 , 단점과 장점 , 같이 쓰기 좋은 모듈 등등 깊게 파진 않았지만 전반적으로 넓게 

키워드를 수집한다는 느낌으로 쭉 훑었다고 보면 된다.


대충 기술에 대해 파악했으니, 개발환경 구축하는법과 개발툴은 뭘 쓰는게 좋을지에 대해 검색했다.

개발환경 구축은 크게 어려울것이 없었으나, 나에게는 낯선 콘솔환경에서 명령어를 통해 설치하는 방법이었기에 

두려움이 앞서 쉽게 손을 대지못하고 같은 내용의 블로그들을 못해도 5군데 이상은 정독한거같다.

시간낭비를 충분히 했을즈음, "이대로는 안되겠다. 그냥 일단 해봐야지" 라는 생각이 들어 일단 설치.

블로그에서 명령어 등을 복붙해 설치하는 과정에서 특별한 문제는 생기지 않았고, 덕분에 꽤나 큰 허무함을 느꼇다.

이럴거면 그냥 처음 봣을때부터 할걸...이라는 생각이 들기도 하고 운좋게 되는 블로그를 보고 했나 싶기도 하고..


아무튼 리액트 네이티브(이하 RN)는 무난하게 설치하는데 성공했으니 개발툴을 뭘 쓸지 알아봐야 했다.

리액트 설치블로그들을 보는 과정에서 얻은 키워드로 아톰,vsc,웹스톰 등을 알게되어서 RN에 가장 어울리는게 뭔지 비교해둔 블로그를

검색해서 보기 시작했다. 문제는 이 과정 역시 거의 하루를 투자한것이다. 그러다보니 결국 "선택"에 하루를 쓴 셈이 된것이다.

내 선택의 기준과 시간을 쓴 이유는 나름의 이유가 있었다. 장기적으로 봣을때 개발툴은 암기력이 낮고 오타율이 높아 단어하나를 온전히 쳐본적이 없고, 메서드나 클래스를 직접 생성한적이 없는 내 개발스타일 특성상 개발툴의 기능이 개발속도에 직결되기 때문이다.

하지만 그렇다고는 해도 너무 오랜 시간을 투자한걸 인지했기에 일단 써보자 라는 생각에 안드로이드 스튜디오덕분에 손에 익은 인텔리J 기반의 웹스톰을 선택했고, 별다른 설정없이 바로 프로젝트를 생성하기까지 성공한다.


프로젝트 생성 후 개발로 바로 이어졌으면 좋았을걸, 여기서 또 내 신중함이 발동해 어떻게 하는지 알기위해 강의나 튜토리얼을 찾게됐고, 

노마드코더의 날씽 앱 만들기 강의영상을 정주행하기 시작했다. 여기서 문제가 하나 또 발생했는데, 저 영상에서는 expo를 이용해 프로젝트를 생성하는것이었다. RN에 대해 알아보던 과정에서 키워드정도는 들어봣지만, 본격적인 장단점에 대해서는 강의영상에서 처음봤기에, 

"우왕 이거 개꿀이네" 싶어 expo에 대해 검색하는데에 또 시간을 투자하게 된다. 어찌저찌하여 expo로 프로젝트 생성 및 helloWorld를 맞이했고, aws에 구축해둿던 테스트용 node 서버와 통신하는 코드까지 간단하게 구현해(정말 심플하다 버튼을 누르면 서버에서 데이터를 받아와 출력하는것, 데이터도 그냥 "성공ㅋ!"였다) 해보는데까지 성공했다.


여기서 문제가 다시 발생한다. 본격적으로 간단하게 내가 기획해둔 메모앱을 만들어보려 했는데, 분명 알고있는것같았던 js의 문법이 계속해서 웹스톰에 오류로 표시되는것이다. 빌드를 하면 될때도 있고, 안될때도 있었던데다가 강의영상에 있는 코드를 참고해 똑같이 하면 기능은 하는데 웹스톰에선 문제가 있다고 표시가 되는것이다. 개발툴에 의지를 많이 하는 내 개발스타일 특성상 이래서는 심히 곤란하다. 빌드해보기전엔 개발툴이 알려주는 문제점을 수정할 수 없다는건 나에게 있어 큰 단점이기때문이었다. 이 때문에 또다시 웹스톰에 리액트 네이티브에 최적화된 플러그인이나 세팅법이 없는지 검색하느라 하루를 거의 투자하고 아무런 소득도 없이 시간을 허비하게 된다.


답답함에 리액트 네이티브 오픈채팅방까지 찾아들어가서 질문을했고, 거기서도 특별한 대답을 얻지 못한채 그냥 포기하고 vsc를 쓰기로 결정했다. 하지만 시간은 이미 퇴근시간이었고, 덕분에 하루를 또 허비한 채 다음날인 오늘 글을 작성하고 있다.



쓰고보니 그리 길지 않은것같은거같기도 하고 긴것같기도 하고 횡설수설도 엄청 한거같은 글이 나오고 말았다.(....)

어쨋든 처음에 밝혔듯, 이 글은 나중에 내가 새로운 기술을 만낫을때 보고 같은 실수를 반복하지 않기 위함이기도 하고

하는김에 블로그에 글도 늘리고 공유함으로써 신입이나 주니어들이 나와 같은 실수를 반복하지 않았으면 하는 바램도 있기에 이 글을 작성한다. 


개발자라는 직업을 선택한 이상 평생 공부하겠다는 각오를 했다고 생각했지만 여전히 두려움은 존재하는것 같다.

하지만 두려워할것이 전혀 없음을 인지하면서도 매번 두려움에 당하는 것 같아 스스로에게 실망하기 일쑤다.

사람이다보니 그럴수있지만, 그런 경우가 줄어들수록 실력은 더 빠르게 상승하지 않을까 라고 생각하며 글을 마친다.


Comments