꿀팁 저장소

Image를 다루다 알수없는 버그가 발생했다.

바로, ImagePicker로 이미지를 주워와 Image에 띄웠을때 이미지가 깨지는 현상이다.

근데, 한번 더 불러와 다시 Image에 띄웠을땐 정상적으로 나타났다.

왜그런지는 아직도 원인을 찾지못햇다.

다만, Image를 감싸고있던 불필요한 View태그를 제거하는 것으로 버그를 해결했다.

구조는 정확히 8개의 태그 속에 Image태그가 들어가있었다.

View ... View... Animated.View ... KeybaordAvoidingView... ScrollView ... View... View... View...

 아주 유용하고 혁신적이다.

변수명을 object의 key로 사용하는 아주 간단한 방법이 있다.

const test = 'coke';
const usage = {};
usage[test] = 5;

이것을 얘기하려는것이 아니다.

es6에서는 비슷한 방식으로 object의 key로써 변수명을 사용할 수 있다.

const test = 'coke';
const usage = {
  [test]: 5,
};

이것이 가능하다.

usage.coke는 5이다.

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

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

http://self-made.cloud

어떤 이유에서든, initailrouteName 을 동적으로 설정해주고 싶은 순간이  온다.

로그인 작업중, 혹은 로그인 이후 사용자별 처리 등의 순간에 말이다.

어찌하면 될까. 제법 고민도 많이하고 검색도 많이했다.

정답은 initalrouteName 동적으로 설정해주는것이 아닌

switchNavigator를 통해 서로다른 stackNavigator로 연결해주는것에 있었다.

나같은 경우에는 로그인 이후, 사용자의 Role에따라 다른 화면을 기본화면으로 보여주어야했다.

당연히 initailrouteName의 동적설정에 대해서 생각해보게 되었으나

시야를 조금 넓혀보니 switchNavigator가 눈에 들어왔다.

appNavigator

authNavigator

mainNavigator - a_navigator / b_navigator / roleNavigator

로 구성을하고, switchNavigator를 통해 mainNavigator를 구성한다.

roleNavigator를 mainNavigator의 defaultRouter로 설정하고

여기에서 사용자의 역할 (혹은 무언가)을 체크하여  a 혹은 b 화면으로 이동시켜준다.

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

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

http://self-made.cloud

expo를 쓰면서, 가장 화나는 순간이 찾아왔다.

그동안 잘 동작했고, 영향을 줄만한 코드수정이 없었으나 

ImagePicker가 동작하지 않기 시작했다 - 특히, ios

prod가 문제생긴건 아니라 다행이다.

[ 해결책 ]

permission을 획득한후 setTimeout을 1000 정도 주고 imagepicker를 사용하면

문제없이 잘 동작한다.

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

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

http://self-made.cloud

react-native를 처음 개발하고 세팅하다보면, 당황스러운 경우를 만나게 된다.

어느순간, 요청에대해  Network request failed 라며 서버로 요청한것이 deny된다.

그럼 다음과 같은 설정을 했는지 확인해보자.

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>

  <manifest ...>

    <uses-permission android:name="android.permission.INTERNET" />

    <application ... android:usesCleartextTraffic="true" ...>

      ...

    </application>

</manifest>

usesCleartextTraffic='true'

가 핵심이다. 반드시 설정하자

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

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

http://self-made.cloud

expo 환경에서는 gradient가 기본으로 지원되기 때문에 손쉽게 사용할 수 있다.

하지만, 아쉽게도  RN에서는 아직 gradient를 공식지원하지는 않는다.

그치만 우리에게는 라이브러리가있다.

https://www.npmjs.com/package/react-native-linear-gradient

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

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

http://self-made.cloud

나 같이 ios/mac os와 친하지 않은사람들이 있을 수 있어, 간단히 글을 남긴다.

Expo로 Standalone파일을 빌드하면, .apk 혹은 .abb파일과 .ipa파일을 받을 수 있다. (각 android / ios)

이때 .ipa파일을 app store connect에 올리는 방법을 헤맬수있다.

mac에 기본적으로 설치된 application loader라는 프로그램이 있다.

그곳에서 안내에 따라 비밀번호를 설정한 후, 업로드를 할 수 있다.

.ipa을 다운받고 가만히 있으면 1000년이 지나도 app store connect에 업로드되지 않는다.

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

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

http://self-made.cloud

react-native의 overflow에서 이슈가 발견되었다

(이미 있던걸지도)

ios / android 각 플랫폼별로 overflow가 다르게 적용되고있다

엄밀히 따지면 android에서는 overflow가 적용되지 않았다

어느 부분에서의 차이냐면, shadow가 들어갔을때이다.

두 진영에서 shadow는 다른 방식으로 주기때문에, 이곳에서부터 시작된 버그일것이라 생각된다

(ios - shadow, android - elevation)

결론적으로, 해결책은 간단하다.

플랫폼별로 overflow를 주거나 안주거나 하면된다.

shadow를 보여줌과 동시에 borderRadius를 먹이고 싶은 상황에

ios에서는 borderRadius와 shadow를 주면 되고 (overflow먹일시  shadow도 막힘),

android에서는   borderRadius, shadow, overflow를 적절히 배치해 주어야한다.

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

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

http://self-made.cloud

Javascript에도 Sort메서드가 있습니다.

한번 써봅시다.

1. 배열내의 숫자 정렬.

var score = [1 ,4, 5, 6, 7, 3, 2];
score.sort()   // Error
score.sort((a,b) => a-b);   // 오름차순
score.sort((b, a) => b-a);   // 내림차순

2. 배열내 오브젝트 정렬

var users = [{ name: 'monkey' }, { name: 'chicken' }, { name: 'dog' }, { name: 'cat' }];
users.sort();   // Error
users.sort((a,b) => a.name < b.name ? -1 : a.name > b.name ? 1 : 0);   // 오름차순
users.sort((a,b) => a.name > b.name ? -1 : a.name < b.name ? 1 : 0);   // 내림차순

3. 배열내 문자열 정렬

var strings = ['cat', 'dog', 'bread'];
strings.sort();

list의 성능 최적화는

플랫폼형태의 앱 개발에서 매우 중요하나 이슈이다.

따라서, 꼭 해야할 성능최적화와 관련된 옵션들을 기록해둔다.

1. flatlist를 쓸 것

- flatlist는 react-native 진영에서 가장 최적화가 잘 된 리스트이다.

- 단순히 긴 화면이라면 scrollview를 써야하지만, item이 반복되는 경우라면 반드시 flatlist를 쓰자. 

- 특히, array의 map함수를 쓰는일은 없도록 하자.

2. removeClippedSubviews 

- 화면에서 벗어나 item을 unmount하여 메모리를 아껴주는 소중한 옵션이다.

- 사용하겠다고 true로 설정해주자.

3. initialNumToRender

- 최초의 몇개의  item을 몇개  render 할지에 대한 옵션이다.

- 컴퓨터도 마음의 준비를 할 수 있게 가능하면 설정해주자

-  number를 값으로 받는다.

4. legacyImplementation

- 리스트의 내부적으로 가상화 리스트를 사용할지, 리스트뷰를 할지를 정하는 옵션이다.

- 새것이 좋은것. 가상화 뷰를 사용하자. 그러기위해서는 값을  true로 설정하면 된다.

5. 그 외

- 각 item(Component)들의 크기를 최소화하자.

- 복잡한 item(Component)는 작성하는 우리도 힘들지만 컴퓨터도 힘들어한다.

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

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

http://self-made.cloud