반응형

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

 

 

반응형

'개발, 코딩 > App - React Native' 카테고리의 다른 글

expo ios 빌드파일 업로드  (0) 2019.09.02
react-native overflow 이슈  (0) 2019.09.02
expo - GCP token error  (0) 2019.08.13
expo, certificates 확인  (0) 2019.08.07
react-navigation-transitions 소개  (0) 2019.08.06
반응형

mysql은 기본적으로 외부접속을 막는다

 

GRANT ALL PRIVILEGES ON *.* TO '아이디'@'%' IDENTIFIED BY '비밀번호'

 

위의 명령어로 특정계정의 모든 ip로부터의 접근을 허용할 수 있다.

반응형
반응형

collection - object - key를 제거하고 싶을 때가있다.

예를들어, users컬렉션에서.

user: { ..., clients: { ..., name: 'kee', nickname: 'kee', }}

아래와 같은 구조에서 name과 nickname 둘중 하나만 쓰기위해 하나를 버리는 경우이다.

 

다음과 같이 없앨수있다.

1. collection 내 모든 데이터를 업데이트 할 경우

db.users.update({}, { $unset: { "user" { "clients": { "nickname": 1 } } } }, false, true)

 

2. collection내 특정 데이터를 업데이트 할 경우

db.users.findOneAndUpdate({ "_id" : ObjectId("5d239192cb6e9d1c11b8ddb8") }, { $unset: { "user" { "clients": { "nickname": 1 } } } }, false, true)

반응형
반응형

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

 

 

반응형

'개발, 코딩 > App - React Native' 카테고리의 다른 글

react-native overflow 이슈  (0) 2019.09.02
react-native list 성능 최적화  (0) 2019.08.28
expo, certificates 확인  (0) 2019.08.07
react-navigation-transitions 소개  (0) 2019.08.06
expo, icon 에러  (0) 2019.08.02
반응형

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

 

react-navigation-transitions

Custom transitions for react-navigation

www.npmjs.com

 

 

 


웹사이트 개발 / 홈페이지 제작 / 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

반응형
반응형

react에서 state는 immutable하게 쓰여야 한다고 얘기한다.

이것은 무슨말인가.

간단한 예시를 통해 쉽게 확인해보자

 

state={ lucky_number: 7, };

이와같이 state가 설정되어 있을떄

this.state.lucky.number = 4

혹은

this.state.lucky_number += -3

과 같이 값에 변화를 주는 행위를 하면 안된다는 말이다.

그렇다면 lucky_number의 값을 바꿔주려면 어떻게 해야할까 ?

this.setState({})를 통해 새로 값을 업데이트 해줘야한다.

 

this.setState({ lucky_number: 4});

or

this.setState(prevState => ({

  lucky_number: prevState + 3

}});

이러한 방식이 react에서 제시하는 올바른 state 관리라고 할 수 있다.

 

그렇다면 state중 object가 있다면 어떨까

state={

  firend: {

    phone: 99,

    age: 12,

    birth: 0011-02-02

  }

};

이런 상황에서 prevState를 통해 phone넘버를 정상적으로 갱신해주고 싶다면?

this.setState(prevState => ({

  friend: {

    ...prevState.friend, // 혹은, ...this.state.friend

    phone: 010-0000-1111

  }

}));

반응형

'개발, 코딩 > React' 카테고리의 다른 글

Input focusout - redux/react  (0) 2019.10.29
html - hash / react- ?  (0) 2019.10.29
create-react-app 에러  (0) 2019.07.30
redux입문 - (1)  (0) 2019.06.22
React의 Ref  (0) 2019.06.01