개발 중인 서비스에 캘린더 기능이 있다. 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..
# 문제 Module AppRegisty is not a registered callable module... 위의 에러는 react native를 사용하면서 가끔 볼 수 있는 에러이다. # 해결 대표적인 해결 방법으로는 node를 kill 하기! 아래와 같이 하면 거의 해결된다. kill -9 node npm start --reset-cache react-native run-android 그런데 위의 방법으로도 해결이 되지 않을 때가 있었다.. 도대체 뭐가 문제인지 모르겠어서 꼼꼼하게 코드를 읽다가 발견한 어이없는 실수! 내가 정의해 놓은 함수 명과 export한 함수 명이 달랐다.. 함수명을 바꿀 일이 있어서 바꾸다가 export 코드까지는 미처 바꾸지 못한 것이다. 혹시 이런 에러가 갑자기 났다면 ..
recoil selector란? 간단하게 정리하자면 selector는 atom을 구독하고 있다가 atom이 변하면 그에 따라 실행되는 함수이다. 또한 atom 외에 또 다른 selector를 구독할 수 있다. 아래에 더 자세한 내용이 있으니 꼼꼼히 읽어보면 도움이 될 것이다. 주요 개념 | Recoil (recoiljs.org) 주요 개념 | Recoil 개요 recoiljs.org 아래는 현재 진행 중인 프로젝트에서 selector를 사용한 예제이다. 받은 메일 list(ReceiveMailsState)를 구독하고, 해당 list가 변할 때마다 실행되어 안 읽은 메일의 개수를 업데이트 한다. get() 함수를 통해 ReceiveMailsState(Atom) 에 접근하여 바뀐 상태를 체크하여 연산할 수 ..
# 문제 갑자기 스피커가 고장 나는 바람에 노트북을 초기화한 후.. 잘 되던 기기연결에 문제가 생겼다. adb devices 명령어를 입력하면 원래는 연결된 기기가 나타나야 하는데, 분명 기기 연결이 정상적으로 되어 있음에도 불구하고 아래와 같이 아무 것도 나타나지 않는다. 구글링을 하며 여러가지 방법을 시도해 보았지만 결국 해결한 방법은 아주 간단하다. 먼저 내가 시도한 방법들이다. 기기의 개발자 옵션 껐다 키기 기기의 개발자 모드에 USB가 허용되어 있는지 확인 USB옵션이 USB 테더링으로 되어있는지 확인 위의 방법들 중 2번 방법은 만약 기기가 목록에는 떴는데 unauthorized 되어 있다면 해결 방법이 될 수 있다. (하지만 내 경우는 아예 기기가 목록에 뜨지 않았기 때문에 소용이 없었다....
react와 react-native에서는 보통 react-navigation을 사용해서 페이지를 이동한다. 페이지를 이동을 위해서는 로 앱 전체를 감싸고, navigation을 props로 넘겨주며 사용한다. # 문제 현재 진행중인 프로젝트에서 axios intercepter에서 모든 api에 대한 예외 처리를 해줄 일이 생겼다. 모든 api에서 특정 에러가 발생하면 바로 로그인 페이지로 이동을 시켜야 하는데, axios intercepter에서는 navigaion props를 넘겨줄 수 없었다. 이럴 때는 useNavigation 이라는 hook을 이용하면 된다. useNavigation은 screen안에서 navigation props를 return하기 때문에 변수로 받아서 사용할 수 있다. (use..
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번 방법으로 돌아가는 게 좋을 수도 있다는 생각이 든다..
# 문제 2주간 들어가지 않던 프로젝트에 들어갔더니 갑자기 전체적인 에러가 발생했다. Cannot resolve symbol... 이라는 에러가 여러 개 발생했다. 프로젝트를 껐다 키고, 리로드 해도 해결되지 않는 에러들! 분명 마지막까지 잘 됐는데..? # 해결 구글링을 해보니 여러 방법이 잘 정리된 블로그가 있었다. 나는 여러 방법 중 3번째인 gradle refresh하기로 문제를 해결했다. View > Tool Windows > Gradle에 들어간다. 아래와 같이 화면에 오른쪽 바가 열리면 프로젝트에 마우스 우클릭을 한다. Refresh Gradle Dependencies를 클릭하고 기다린다. # 후기 자주 발생하는 에러라고 하니 해결방법을 알아두는게 좋을 것 같다.
