Final Project - (3) 2020_0131

저번에 프로젝트의 방향에 대해서 어느정도 구체화가 되어서 본격적으로 프로젝트를 시작..! 하고 싶었지만 프로젝트 초기 셋팅 등이 필요하기도 하고 각자 좀 더 새로운 기술 스택에 대한 공부 (typescript, react-native, typeORM 등등)가 필요할 것 같아서 이번 주는 각자 좀 더 공부하기로 정하였다. 

 

그래서 나는 우선 프론트엔드이고 프론트엔드 개발 환경을 구축과 우리가 정한 기술 스택을 사용하기 위한 초기 세팅이 필요하다고 생각되어서 우선 React native EXPO부터 알아 보았다. 

 

https://velog.io/@max9106/React-Native-리액트-네이티브react-native-두-가지-방법-c4k0gxe0tc

[React Native] 리액트 네이티브(react native) 두 가지 방법 #1 Expo CLI

위 레퍼런스를 참고해서 expo cli를 통해 테스트 프로젝트를 만들어서 실행해보았다.

 

expo cli는 세팅이 금방되고 엄청 쉽다고 했는데 역시 예상한대로 코드 몇줄만에 바로 되었다. 테스트 프로젝트를 만들고 expo를 이용해 내 핸드폰에 화면을 띄워보았는데 정말 신기하였다. 처음 자바스크립트 배울 때 html을 웹에 띄우던 시절이 생각났다.

 

expo의 장점 중 또 한가지가 있는데 바로 내가 mac os가 아니여도 ios 개발을 할 수 있다는 것이다. (물론 안드로이드와 차이가 있어서 개발 시 분기 처리등이 필요하다고 알고 있다)

 

내가 우분투를 사용하더라도 아이폰을 가지고 있다면 ios 개발 결과를 핸드폰으로 볼 수 있다는 것이다. 하지만 아쉽게도 나는 우분투에 안드로이드 유저라서... ios 개발 자체는 할 수 있겠지만 좀 제한될 것 같다. 왜 앱 개발은 mac os가 필요하다고 하는지 알 것 같다. (맥 사야겠다..)

다행히도 팀원 중 프론트 담당하시는 다른 분이 mac 유저라서 ios 개발도 크게 무리 없이 할 수 있지 않을까 생각한다.

 

개발하면서 계속 핸드폰을 보면서 개발할 수는 없으니 노트북 화면에 개발 화면을 띄울 수 있는 것이 필요했다. 그것이 바로 에뮬레이터였다.

 

에뮬레이터는 찾아보니까 안드로이드의 경우는 안드로이드 스튜디오를 통해 가상 디바이스를 노트북에 띄우고 ios의 경우에는 xcode를 사용해서 띄운다고 나왔다. mac 유저의 경우에는 둘 다 모두 사용하여 띄울 수가 있는 것이다.

 

나는 우분투이기 때문에 ios 에뮬레이터는 띄울 수가 없어서 안드로이드 스튜디오를 통해 가상 디바이스를 띄우기로 하였다. 

(여기서 또 mac을 써야한다는 것을 뼈저리게 느낌)

 

https://webnautes.tistory.com/1134

Ubuntu에서 Android 개발 환경 준비하기 ( Android Studio 설치 )

https://byd0105.tistory.com/7

- Ubuntu에 vi(vim)에디터 설치 -

https://yuddomack.tistory.com/entry/1React-Native-설치와-실행hello-world

1.React Native 설치와 실행(hello world)

https://devmuz.blogspot.com/2018/08/1804-react-native-run-android.html

우분투 18.04 react-native run-android 실행 시 javax.net.ssl.SSLException 에러

위 레퍼런스들을 참고하고 무수한 구글링을 통해 안드로이드 스튜디오를 설치하고 환경변수 등 여러가지를 설정하고 나서 안드로이드 에뮬레이터를 노트북에 띄울 수 있었다!!

 

웹과는 다른 핸드폰 모양의 에뮬레이터에 내 코드가 실시간 반영되는 것을 보니 이 또한 정말 신기하였다.

 

기본적인 react native 개발 환경은 만들어진 것 같고 이제 다음으로 할 것은 우리가 도입하기로 했던 typescript와 eslint, prettier 설정도 얹어봐야겠다.

 

(수정_추가)

안드로이드 스튜디오의 가상 디바이스가 노트북이 안 좋은 탓인지 너무 느려서 더 좋은 것을 찾아보다가 Genymotion이란 것을 알게 되었다. 이것도 마찬가지로 가상 디바이스를 띄워주는 건데 안드로이드 스튜디오의 가상 디바이스 보다는 (이것도 막 완전 빠른 건 아닌 것 같다... mac 사고싶다) 훨씬 빨랐다. 그래서 앞으로 개발하면서는 Genymotion을 사용할 것 같다.

 

아래는 참고한 레퍼런스들이다.

 

https://commin.tistory.com/28

[안드로이드]지니모션(genymotion) 다운로드 및 설치

https://blog.naver.com/PostView.nhn?blogId=gracefulife&logNo=221060580035&parentCategoryNo=&categoryNo=8&viewDate=&isShowPopularPosts=true&from=search

React native 개발 시 Genymotion 에뮬레이터가 ADB 연결이 안되는 이유

https://hiseon.me/linux/ubuntu/ubuntu-virtualbox-install/

우분투 Virtualbox 설치 사용 방법 - HiSEON