저번에 프로젝트의 방향에 대해서 어느정도 구체화가 되어서 본격적으로 프로젝트를 시작..! 하고 싶었지만 프로젝트 초기 셋팅 등이 필요하기도 하고 각자 좀 더 새로운 기술 스택에 대한 공부 (typescript, react-native, typeORM 등등)가 필요할 것 같아서 이번 주는 각자 좀 더 공부하기로 정하였다.
그래서 나는 우선 프론트엔드이고 프론트엔드 개발 환경을 구축과 우리가 정한 기술 스택을 사용하기 위한 초기 세팅이 필요하다고 생각되어서 우선 React native EXPO부터 알아 보았다.
https://velog.io/@max9106/React-Native-리액트-네이티브react-native-두-가지-방법-c4k0gxe0tc
위 레퍼런스를 참고해서 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
https://yuddomack.tistory.com/entry/1React-Native-설치와-실행hello-world
https://devmuz.blogspot.com/2018/08/1804-react-native-run-android.html
위 레퍼런스들을 참고하고 무수한 구글링을 통해 안드로이드 스튜디오를 설치하고 환경변수 등 여러가지를 설정하고 나서 안드로이드 에뮬레이터를 노트북에 띄울 수 있었다!!
웹과는 다른 핸드폰 모양의 에뮬레이터에 내 코드가 실시간 반영되는 것을 보니 이 또한 정말 신기하였다.
기본적인 react native 개발 환경은 만들어진 것 같고 이제 다음으로 할 것은 우리가 도입하기로 했던 typescript와 eslint, prettier 설정도 얹어봐야겠다.
(수정_추가)
안드로이드 스튜디오의 가상 디바이스가 노트북이 안 좋은 탓인지 너무 느려서 더 좋은 것을 찾아보다가 Genymotion이란 것을 알게 되었다. 이것도 마찬가지로 가상 디바이스를 띄워주는 건데 안드로이드 스튜디오의 가상 디바이스 보다는 (이것도 막 완전 빠른 건 아닌 것 같다... mac 사고싶다) 훨씬 빨랐다. 그래서 앞으로 개발하면서는 Genymotion을 사용할 것 같다.
아래는 참고한 레퍼런스들이다.
https://hiseon.me/linux/ubuntu/ubuntu-virtualbox-install/
'Project Devlog > BillyZip' 카테고리의 다른 글
Final Project - (6) 2020_0203 (0) | 2020.02.03 |
---|---|
Final Project - (5) 2020_0202 (0) | 2020.02.02 |
Final Project - (4) 2020_0201 (0) | 2020.02.01 |
Final Project - (2) 2020_0130 (0) | 2020.01.30 |
Final Project - (1) 2020_0129 (0) | 2020.01.29 |
댓글