실제 서비스를 위한 코드 작성의 시간입니다. 지금 코드스테이츠에서 이력서 작성 및 지원회사를 찾는 과정, 면접 연습을 진행하고 있어 코드를 작성하지 못했는데 틈을 내서 시도해보려고 합니다.

초기 구상

제가 처음 생각한 앱 실행 시 페이지 입니다. 누비자는 창원시에서만 운영되는 서비스이기 때문에 네이버 지도를 사용할 계획입니다. 그리고 저는 깔끔한것을 좋아하기 때문에 최대한 단순하게 만들려고 합니다.

(어우,,,보기 힘들다)

버튼 크기는 세로크기를 좀 더 늘리고, 색은 누비자의 색인 진한 초록색으로 변경할 계획입니다. 버튼 개수는 3개로 수정할 계획이며 가장 우측 버튼은 나의 정보 탭이고 좌측 순서대로 설정 및 문의 탭, 홈 버튼으로 작성할 계획입니다.

지도가 보이는 메인 페이지는 홈 탭이고 버튼 클릭시 나의 정보, 문의 탭을 만들 계획입니다. 이를 위해서는 로그인도 가능해야하기 때문에 oauth구현을 할 계획입니다.

중간 정리

일단 만들어야할 페이지가 3개, 홈, 내 정보, 문의신고 페이지 이고, oauth까지 구현하는 것을 base로 작성할 계획입니다. 추가적으로 advanced 적인 기능들은 생각하다가 틈틈히 추가해볼 계획입니다.

맵핑을 네이버에서 카카오로 바꾸었다가 구글로 다시 수정합니다. 이유는 현재 사용되고 있는 대부분의 어플들이 구글맵을 사용합니다.. 배달의 민족도 구글맵...그렇기 때문에 만약 취업을 했을 때 사용하고 있는 기능을 사용해봤을 확률이 올라가기 때문에.. 구글맵으로 변경합니다..

(참고:https://docs.expo.io/versions/latest/sdk/map-view/#deploying-google-maps-to-an-android-standalone)
해당 공식문서를 따라 지도를 만들었습니다.

안드로이드 시뮬레이터를 리눅스에서 창을 띄울려고 했는데 설정해야할 것이 많아서 삽질 중...
https://honeystorage.tistory.com/87
https://velog.io/@dongha1992/React-Native-expo-%EA%B5%AC%EA%B8%80%EB%A7%B5-%EB%9D%84%EC%9A%B0%EA%B8%B0

계획 수정

현재 안드로이드 스튜디오에서 에뮬을 더블클릭하면 데스크탑이 먹통이 되는 현상이 발생합니다..
리눅스를 다루기가 쉽지않습니다ㅠㅠ
계획을 수정해야할 필요성을 느꼈습니다. 일단은 제 아이폰으로 확인하면서 ios 앱을 만들고 후에 데스크탑에 버추얼박스로 mac os를 설치해서 안드로이드 스튜디오로 앱을 수정을 할 계획입니다.

혹시 제 글을 보시는 분 중에 리눅스에서 안드로이드 스튜디오를 돌리는 법을 아시는 분 계시면 댓글 부탁드립니다ㅠㅠ

에러

react-navigation-tabs으로 버튼 클릭시 컴포넌트 전환되는 환경을 구현하고 싶은데
react-navigation-tabs과, react-native-reanimated의 버전이 에러과 연관있는 것 같습니다.
expo를 사용해서 코드를 작성하고 있는데 expo install로 설치해도 에러가 뜨는 상황입니다. 폭풍 삽질하고 있습니다...
앱으로 실행하면

Cannot find module 'react-native-reanimated/plugin'

이라는 에러가 뜹니다.

-> 공식문서(https://reactnavigation.org/docs/getting-started/)를 따라서 해보기로 했습니다. expo에서는 실행할 수 있는 모듈의 버전이 다 다르다고 합니다. node_module폴더와 package-lock.json을 지우고 다시 깔아 봤지만 영 엉키는 것 같아 처음부터 다시 시작할려고 합니다.

-> 다시 시작하니까 정상 작동하는 것을 확인했습니다.. 돌고 돌아 공식문서인것 같습니다. 다음부턴 공식문서 먼저 확인하기.. 하지만 제가 연습한 코드는 stack navigation으로 제가 원한 전환 기능이 아니라 아이폰의 설정 탭에서 버튼 클릭 시 창이 스택에 쌓이는 형식의 네비게이션입니다.

제가 원한 것은 버튼을 클릭 시 화면이 스택에 쌓이는 것이 아닌 전환 되는 것으로
https://reactnavigation.org/docs/bottom-tab-navigator/ 해당 사이트를 따라할 예정입니다.

삽질 너무 힘들지만 깨달은 것이 조금이라도 있어서 다행입니다...

expo init으로 프로젝트를 생성했는데 mapView에서 현재위치를 나타내기 위해서는 ios, android 폴더가 필요합니다. 가끔 해당 폴더들이 없을 경우가 있는데 그럴때는 expo eject를 해주면 됩니다.

1. import React, { useState, useEffect } from "react";
2. import * as React from "react";

1번으로 앱을 실행하면 아이폰에서는 호환이 안되는 에러가 있는 것 같습니다. 2번으로 실행을 하면 아이폰에서는 정삭작동하지만 안드로이드에서는 아직 확인을 못했습니다.

수정합니다. 1번으로도 정상작동합니다. 문제는 현재위치를 가져올려면 cocoapods를 설치하여 ios의 podfile을 연결해주어야 ios에서 현재위치를 가져올 수 있습니다. 하지만 cocoapods는 mac 에서만 설치되는 것 같습니다.. 저는 리눅스를 사용하고 있는데 리눅스에서 안드로이드 스튜디오를 설치하면 제 데스크탑으로는 정상작동이 되지않고 컴퓨터가 멈추어 버립니다.
계획을 수정하여 현재위치를 가져오는 것은 미루고 디자인과 다른 컴포넌트를 위주로 작업을 먼저 진행해야 할 것 같습니다. 수정의 연속인데 차라리 맥북을 하나 마련하는 것이 가장 빠른 길이 아닐까 생각해봅니다...ㅠ

루비를 설치하고 cocoapods 1.8.4 버전을 설치한 후 ios 폴더에서 pod install을 실행하니 돌아는 가는데 다른 에러가 떴습니다..

[!] Invalid `Podfile` file: 783: unexpected token at ''.

 #  from /home/minsung/바탕화면/ALGO_NUBIZA/tavNav/ios/Podfile:12
 #  -------------------------------------------
 #  # @generated end react-native-maps
 >    config = use_native_modules!
 #  
 #  -------------------------------------------

다시 해당 에러를 고치러 가봅니다...