꿀팁 저장소

expo 환경에서 개발을 하다보면 이따금씩 

GCP Token관련 에러를 마주하게된다.

아래와 같은 방법으로 해결할수있다.

1. expo login하기 - login상태를 확인하고 안되어 있다면 로그인하자, expo whoami

2. npm대신 expo명령어 사용하기 - expo start라고 직접적으로 명령어를 전달하자

3. 인터넷 연결문제 - 모바일 기기 혹은 시뮬레이터의 네트워크 상태를 확인하자

나는 카페에왔는데 너무 구석진 자리라 모바일기기가 LTE가 죽어버린줄도 모르고 한참을 삽질했다.

웹사이트 개발 / 홈페이지 제작 / android앱 개발 / ios 앱 개발 / server / client / aws / fullstack / buisness partner / 외주 / 용역

https://open.kakao.com/o/sNETgUJb

http://self-made.cloud

expo fetch:ios:certs

위 명령어로 현재 expo 계정에 종속된 certs들을 확인할 수 있음

react-native의 navigation으로 react-navigation이 많이 쓰인다.

react-navigation을 사용할때, stacknavigator의 옵션중  transitionConfig라는 속성을 통해 화면이 넘어가는 동작에 수정을 줄 수 있다.

찾아보면 제법 많은 소스코드들이 돌아다니고 있지만, 이를 간단히 적용할 수 있는 react-navigation-transitions라는 라이브러리가있다.

간단한 분기처리로 화면별로 효과를 줄수도 있다.

 trasnitionConfig = ({ scenes }) => { ... } 와 같이 작성하게 되는데, 

react-navigation-transitions의 fromLeft, fromRight 등을  trasnitionConfig = ({ scenes }) => { fromLeft(500) }

과 같이 적용하여 쉽게 사용할 수 있다.

https://www.npmjs.com/package/react-navigation-transitions

웹사이트 개발 / 홈페이지 제작 / android앱 개발 / ios 앱 개발 / server / client / aws / fullstack / buisness partner / 외주 / 용역

https://open.kakao.com/o/sNETgUJb

http://self-made.cloud

expo의 app.json에서 icon에 의해 에러가 발생할 때가 있다.

cannot access .....라는

이때의 원인은 두가지이다.

1. png파일이 아닌경우

2. 이미지 파일이 너무 큰 경우 

압축해서 올려보자.

ios info.plist 권한사용 관련 옵션목록

https://github.com/expo/expo/blob/master/exponent-view-template/ios/exponent-view-template/Supporting/Info.plist#L28-L41

웹뷰를 사용하여 youtube를 간단히 연동할 수 있습니다.

<WebView
  style={{ width: '100%', height: '100%' }}
  mixedContentMode='always'
  source={{ uri: `https://www.youtube.com/embed/bTBmpBUHmVc?controls=1&disablekb=1&egm=1&rel=0` }}
  useWebKit={true} // ios 필수
  scrollEnabled={false}
  domStorageEnabled={true}
  javaScriptEnabled={true}
/>

링크된 영상은 쯔양님의 영상입니다.

체크된 바로는 너무 긴 영상은 로드되지 않는것으로 보입니다.

영상 플레이어 관련 옵션들은

https://developers.google.com/youtube/player_parameters#playlist

여기서 확인할 수 있습니다.

확대하여 전체화면 보기를 하는것은 좀 더 알아본 후 추후 업로드하도록 하겠습니다.

ReactNative 최고의 장점은 누가 뭐래도 크로스 플랫폼이라는 것이다.

나 또한 그것이 RN을 선택하게 된 이유 중 하나였다.

그동안 ios 개발은커녕 ios, mac os 그 무엇 하나 이용해본 적이 없던 나에게는 수많은 시련이 다가왔다.

안드로이드 개발도 전혀 경험이 없었지만 윈도우에서 개발이 가능하다는 것과 그동안 계속해서 안드로이드 핸드폰을 써왔다는 것만으로 친숙한 환경에서 개발하는 듯한 느낌을 주었다. 그래서 훨씬 수월했다. (솔직히 안드로이드가 개발이든 배포든지 간에 더 쉬운 것 같다.)

첫 번째 시련은 mac 없이는 보다 정확히는 mac의 xcode 없이는 개발이 불가능하다는 것을 알게 되었다.

개인 개발자에 불과했던 내게는 금전적인 벽은 생각보다 넘기 힘든 부분이었다.

모두가 잘 알고 있듯이 맥의 가격은 일반 노트북들보다 몇십만 원 이상 비싸다.

다행히도 내게는 지문 자국 하나 나지 않은 새것에 가까운 LG 그램이 있었고, 그램을 판매 후 중고 맥북을 사들였다.

맥을 이용해 안드로이드와 ios를 넘나들며 꾸준히 두 개의 플랫폼 모두 잘 만들어가지고 있는지 체크했다.

이 과정이 생각보다 귀찮은 부분이다. (안드로이드를 베이스로 개발하며 중간중간 ios가 잘 되고 있는지 체크했다.)

개인적으로는 안드로이드는 제법 수월했다. 크기가 아닌 비율을 활용해서 개발을 하고 나면 어느 기종이든 상관없이 화면이 아주 깔끔하게 잘 나왔다. (어느 블로그에서 보면 수천 종의 안드로이드 디바이스에 맞추는 것을 어려운 일이라고 하나 그것은 잘못된 얘기라고 생각된다)

하지만, 역시나 문제는 ios였다. 첫 번째로, iPhonX와 같은 무베젤 폰에 대한 처리가 필요했다.

react-native-iphone-x-helper라는 npm 라이브러리를 이용해 기종 체크를 하고 padding을 주는 것으로 처리하였다.

두 번째로, iPhoneX가 아니어도 안드로이드와 다르게 상태 바(status bar) 영역을 존중하지 않고 개발한 화면이 해당 영역을 침범하는 것이 발견되었다. (안드로이드에서는 상태 바 영역은 고유의 영역으로 개발자가 임의로 침범할 수 없다. 따라서, 별도의 핸들링을 해줄 필요가 없다)

마찬가지로, ios 중 무베젤이 아닌 기종의 경우에 대해서 padding을 주는 것으로 처리하였다.

마지막으로, 팁을 하나 주고자 한다.

모든 screen의 가장 바깥쪽을 커스터마이징한 VIew 컴포넌트로 감싸주는 것이 내게는 아주 도움이 되었다.

<CustomView> ... </CustomView>

이런 식으로 모든 화면을 감싸두면, 나중에 위의 사례와 같이 화면 비율이나 기기 특성에 따라 모든 화면의 스타일을 핸들링해야 될 때 정말 편하게 할 수 있다.

이번에는 React-Native로 '공무원 시험일정, 공시생 SNS: 공투공'을 개발하면서 사용했던 코드작성법에 대해서 공유할까한다. 나는 원래 그렇게 코드를 잘짜는 사람도아니고, 깔끔한 코드를 추구해왔던 사람도 아니다.

하지만, 내가 이번 프로젝트를 성공시킬 수 있고 많은 개발자들의 협업하에 프로젝트가 발전해 나갈 것이라고 굳게 믿고있기에 남 보기좋은 깔끔한 코드를 작성해야겠다고 마음 먹게 되었다.

개발을 진행하면서도 코드 양식을 통일하기위해 몇번을 다시 작성하기도 하였다.

변수의 선언은 언더바를 활용한 표기법을 채택하였다. (예: next_val)

함수명은 낙타식 표기법을 사용하였다.(예: fetchUser)

파일의 구조는 components, lib, screens, stacks, actions, reducer, styles로 구성되어있다.

components아래 common을 두어 공통적으로 쓰이는 컴포넌트를 만들어 두었고 그외에는 screen별로 쪼개어 컴포넌트들을 만들었다.

따라서, screens에는 커스터마이징된 컴포넌트들로 구성된 아주 보기좋은 코드만이 남아있다. method는 화살표함수를 기본원칙으로 했다.

또한, method는 이름에서 명시된대로만 동작해야하며 추가적인 동작은 최대한 지양하였고, 모듈화를 통해 똑같은 함수를 다시쓰는일은 줄이도록 했다.

일명 TS, TypeScript는 채택하지 않았다. 대세이긴 하지만 내가 아직 받아들일 마음의 준비가 되지않았다. 없이도 코드짜는데 문제가 없다는 자기위로식 마인드가 아직 남아있다. propTypes는 적극 활용하였다. 

코드를 작성하며 가장 어려웠던 부분은 모듈화이다. 전체적인 설계가 완벽하게 나오지 않은 상황에서 코딩을 해나간것이 문제였다.

항상 코딩전에 미리 생각 가능한 범위에서 간단한 설계를 하고 작업에 들어갔지만, 생각을 벗어나는 일은 존재했다. 이것은 내가 개발 중간중간에 지속적인 코드 리팩토링을 통해 계속해서 모듈화 해가게 만들었다. 이것인 전체적인 개발기간을 다소 길어지게 만들었다. (그래도 생각보다도 훨씬 빨리 완성했지만)

이미 React-Native를 위한 제법 많은 라이브러리가 등장했다.

푸시, 페이스북 로그인 등 묵직묵직한 라이브러리부터 부분적인 컴포넌트에 해당하는 라이브러리까지

수많은 라이브러리들의 홍수속에 자신의 프로젝트에 알맞는, 쓸만한 라이브러리를 찾는것 또한 개발자의 역량이다.

나 역시도 라이브러리 선택에 몇차례 실패한 경험이있다.

원하는 것이 아니었거나, 퍼포먼스가 만족치 못하거나. 그럴때가 있었다.

그렇게 직접만들게된 라이브러리가 몇몇있다.

예를들어, 커스터마이징된 Silder, Modal, Alert, Gallery, View 등등

그럼 본론으로 돌아와 몇몇 핵심적인 라이브러리를 소개하고자 한다.

React-Native로 앱을 개발하게 되면 필수적으로 선택해야되는 라이브러리가있다.

바로 화면전환. Routing과 관련된 라이브러리다

react-navigation, react-navigation-tabs 가 대표적이다

나는 그 중 react-navigation을 선택하였다.

솔직히 별다른 이유는 없었다. 더 많은 사용자가 선택하였고, Issue에 대한 피드백이 좀 더 좋아보였기 때문이다.

선택할때 비교해보지는 않았지만 Docs도 상당히 잘되어있다.

Docs를 보지않고 사용한다면 바보 소리를 들어야 할 정도로 잘되어있다.

다음으로 소개할 라이브러리는 react-native-vector-icons이다.

Web에서 아주 유용하게 사용했던 Fontawesome의 아이콘을 사용할 수 있을까? 에서 출발한 생각이 react-native-vector-icons에 이르게 했다. Fontawesome외에도 수 없이 많은 아이콘을들 쓸수 있게되었다. 이 아이콘들은 폰트로써 설치되며 빈번히 사용되는 이미지를 써야되는 경우 이미지를 대체하기위해 사용하게 되었다.(용량 혹은 서버에서의 호출하는 비용을 아끼기위해) 아래의 링크에서 아이콘 목록을 확인할 수 있다.

https://oblador.github.io/react-native-vector-icons/

마지막으로 소개할 라이브러리는 Web에서도 자주 사용했던 라이브러리인 Axios와 Moment이다.

Axios는 Rest API통신을 위해 사용한다.

BaseUrl등 간단한 설정을 해두면 아주 간편하게 사용할 수 있다.

Moment는 시간과 관련하여 JS진영에서 가장 인기있는 라이브러리이다.

사용법도 아주 쉽고 Docs가 정말 잘되어있다.