현재 진행 중인 프로젝트에서 안드로이드 기기의 사진을 대량으로 서버로 전송해야 한다. 일단 이미지 50개 정도로 테스트를 해봤는데, 로딩이 생각보다 너무 느렸다. 실제 사용자는 최소 1000장 이상의 사진을 가지고 있을텐데, 최적화가 시급해보인다. 일단 현재 상태를 console.time()을 이용해서 측정해 보았다. 아래는 이미지들을 보내고, 서버로부터 success를 응답 받는데 걸린 시간이다. 두번 측정해 봤는데 대략 10~11초 정도 걸리는 것 같다. (실제로 측정해보니 너무 오래 걸린다..ㅜㅜ) 최적화 시작! 일단 이미지 용량을 줄이는 방법을 가장 먼저 적용해보기로 했다. react-native-image-resizer를 사용해보자 bamlab/react-native-image-resizer: ..
[React Native] 입력 창 연속해서 이동하며 focus 하기(1), 컴포넌트로 ref 넘겨주는 문제! (tistory.com) [React Native] 입력 창 연속해서 이동하며 focus 하기(1), 컴포넌트로 ref 넘겨주는 문제! 로그인이나 회원가입처럼 연속된 입력이 주어질 때, 자동으로 이동 되지 않는다면 사용자는 불편하게 느낄 수 있다. 별거 아닌 것 같아도 사용성 측면에서 좋지 않으므로 개발 중인 서비스에 적 sosohan-it-log.tistory.com 위에서 useRef()를 사용해서 연속해서 입력할 수 있는 기능을 구현했다. 그러나 회원가입에 해당 기능을 넣기 위해서는 6개나 되는 useRef를 선언해야 한다. 중복된 코드가 너무 많아지므로 useRef를 배열로 선언해 보자!..
로그인이나 회원가입처럼 연속된 입력이 주어질 때, 자동으로 이동 되지 않는다면 사용자는 불편하게 느낄 수 있다. 별거 아닌 것 같아도 사용성 측면에서 좋지 않으므로 개발 중인 서비스에 적용했다. 다음으로 focusing 될 컴포넌트를 지정하기 위해 useRef()를 사용했다. useRef는 js에서 element를 지정하는 getElementById()와 비슷한 기능으로 사용할 수 있다. Hooks API Reference – React (reactjs.org) Hooks API Reference – React A JavaScript library for building user interfaces ko.reactjs.org 사용자가 키보드에서 입력을 눌렀을 경우에 이벤트가 발생해야 하므로 TextInp..
개발 중인 서비스에 캘린더 기능이 있다. RN에서 캘린더 하면 다들 아는 유명한 라이브러리가 있지만, 해당 라이브러리가 원하는 기능을 다 포함하지 못해서 캘린더를 직접 구현했다. 해당 캘린더는 date-fns만 있다면 구현할 수 있다! date-fns - npm (npmjs.com) date-fns Modern JavaScript date utility library. Latest version: 2.29.3, last published: 7 months ago. Start using date-fns in your project by running `npm i date-fns`. There are 13644 other projects in the npm registry using date-fns. www..
recoil selector란? 간단하게 정리하자면 selector는 atom을 구독하고 있다가 atom이 변하면 그에 따라 실행되는 함수이다. 또한 atom 외에 또 다른 selector를 구독할 수 있다. 아래에 더 자세한 내용이 있으니 꼼꼼히 읽어보면 도움이 될 것이다. 주요 개념 | Recoil (recoiljs.org) 주요 개념 | Recoil 개요 recoiljs.org 아래는 현재 진행 중인 프로젝트에서 selector를 사용한 예제이다. 받은 메일 list(ReceiveMailsState)를 구독하고, 해당 list가 변할 때마다 실행되어 안 읽은 메일의 개수를 업데이트 한다. get() 함수를 통해 ReceiveMailsState(Atom) 에 접근하여 바뀐 상태를 체크하여 연산할 수 ..
recoil을 사용하면서 atom의 값을 서버의 데이터로 초기화 하고 싶다는 생각을 했다. 검색해보니 atom 대신 selector를 사용하거나, atom이 생성될 때 서버와 먼저 연결될 수 있도록 atom의 effects를 사용하면 된다! 참고로 recoil 공식 사이트의 데이터 동기 예제를 보면 selector를 사용하고 있다. Asynchronous Data Queries | Recoil (recoiljs.org) Asynchronous Data Queries | Recoil Recoil provides a way to map state and derived state to React components via a data-flow graph. What's really powerful is that..
react-native로 만든 앱에서 로딩 바를 넣으려고 한다. react-native에서 제공하는 컴포넌트인 ActivityIndicator를 사용해보자! ActivityIndicator · React Native ActivityIndicator · React Native Displays a circular loading indicator. reactnative.dev 사용법은 아주 간단하다 ActivityIndicator 를 import 한 후 사용하기만 하면 된다. 지금 만들고 있는 앱에는 Loading 컴포넌트가 따로 있어서 그 부분에 추가했더니 바로 앱 전체에 적용되었다. 이렇게 간단하게 끝!
optimistic update란? optimistic, 말 그대로 낙관적이라는 뜻으로 서버의 요청이 처리되기 전에 미리 성공함을 가정하고 UI를 빠르게 업데이트 하는 방식이다. 만약 서버의 요청이 실패하면 롤백을 통해 동작을 철회한다. ! 예를 들면 페이스북 같은 경우 좋아요 버튼을 눌렀을 때 매우 빠르게 동작하는데, 이는 optimistic update를 통해 구현 할 수 있다. # 적용 마침 하고 있는 프로젝트에서 태그를 추가하는 기능이 있는데, 서버의 응답을 기다렸다 태그를 생성하자니 UI가 약간 느리게 동작하여 답답함을 유발했다. onMutate 함수를 이용하여 빠른 동작을 할 수 있도록 해보자! 아래는 원래의 코드이다. // 태그 추가 api const {mutate: addFavorite} ..
1. react-native-recoil-persist 사용하기 2. async-storage와 연동하여 사용하기 recoil을 사용하던 중 잘 바뀌지 않는 데이터는 매번 서버에서 불러오는 것 보다 데이터를 유지 시키는 편이 좋겠다고 생각했다. 1. react-native-recoil-persist 먼저 react-native-recoil-persist를 이용하는 방법이다. 라이브러리를 사용하는 방법이 훨씬 간단하여 현재 프로젝트도 이 방법을 사용 중이다! 하지만 현재 시점에서 react-native-recoil-persist가 아직도 버전 0.0.6을 지원하는 것을 보아 업데이트가 잘 되지 않는 걸로 보인다. 지금은 사용하지만 지켜보다가 나중에는 2번 방법으로 돌아가는 게 좋을 수도 있다는 생각이 든다..
# 문제 react-native-image-picker를 사용해서 이미지를 서버로 보냈는데 계속해서 null로 보내지는 현상이 나타났다. 서버는 spring boot로 작업 중! → network request를 본 결과 프론트에서는 파일을 formData에 object형태로 정상적으로 보낸 것이 확인 된 상태이다. # 해결 원래는 image-picker에서 이미지를 선택하면 자동으로 받아오는 이미지의 정보 객체 파일을 그대로 넘겼었다. 아래와 같은 형태이다. 이 중 fileName을 name으로 변수명을 수정하여 보냈더니 성공했다. 검색 결과 무조건 uri, name, type이 정확히 명시되어야 한다고 한다. # 후기 지금까지 node.js와 프로젝트를 할 때는 그냥 uri만 보내서 몰랐는데 앞으로 ..
