반응형 개발 및 알고리즘/개발18 [React Native] Flatlist에 onScrollToIndexFailed 설정하기 React Native에서 Flatlist를 사용하다 보면 scrollToIndex 함수를 설정할 일이 많다.그러나 flatlist에 들어간 데이터를 로드하는 데 딜레이가 생길 경우,scrollToIndex 함수가 제대로 작동하지 않아 자동 스크롤이 자연스럽지 못하거나 아예 중간에 끊기는 경우가 많다.이때 사용할 수 있는 onScrollToIndexFailed 함수를 설명하고자 한다. 원리는 간단하다.scrollToIndex 함수가 스크롤에 실패하는 경우 500ms (설정 가능) 정도의 짧은 시간 동안 기다렸다가 다시 스크롤하게 하는 것이다. const flatlistRef = useRef(null);... { const wait = new Promise(resolve => setTimeout(.. 2024. 7. 8. [React Native] 리액트 네이티브에서 가로모드/세로모드 제한/허용하기 모바일 어플리케이션을 제작할 때 가로 모드와 세로 모드를 모두 고려하여 제작하면 참 좋겠지만, 어쩔 수 없이 가로모드/세로모드 중 한 가지로 제한해야 하는 경우가 있다. 각 상태의 이름은 다음과 같다. 가로모드와 세로모드를 제한/허용하는 것은 모듈을 따로 설치할 필요 없이, 각 OS별로 설정만 해주면 된다. - Androidandroid/app/src/main/AndroidMenifest.xml 파일을 열고 다음 위치에 코드를 추가한다. - iOSios/projectName/Info.plist 파일을 열고 다음 위치에 코드를 추가한다.아마 default로 여러 줄이 있을 텐데 허용하고 .. 2024. 7. 5. [React Native] 리액트 네이티브에서 NetInfo로 인터넷 연결 상태 확인하기 (RN 0.73) 모바일 어플리케이션에서 인터넷 연결 상태를 지속적으로 확인하는 일은 꽤 중요하다.많은 경우, 특히 서버와 인터넷을 통해 통신하는 경우 인터넷 상태가 좋지 않으면 속도가 매우 느려지거나 결국 닿지 않는데, 사용자에게 이것이 어플리케이션 때문이 아니라 네트워크 때문인 것을 알려야 하기 때문이다. @react-native-community/netinfo 모듈을 이용하면 쉽게 구현할 수 있다. npm i @react-native-community/netinfocd iOSpod install 이 모듈은 사용법이 매우 간단하다. 컴포넌트, 즉 앱이 마운트될 때 구독하고, 마운트 해제될 때 구독을 취소하면 된다. 그런데 심지어 더 간단한 훅을 사용할 수도 있다. import {useNetInfo} from '@rea.. 2024. 7. 5. [SQL] Trigger: 이벤트를 감지하여 DB에 자동으로 TriggerTrigger는 특정 테이블에 INSERT, DELETE, UPDATE 등의 이벤트가 발생하였을 때 데이터베이스상에서 자동 동작하도록 하는 기능이다. 서버/백엔드 개발자가 호출할 필요 없이, DB의 변화를 감지하여 자동으로 호출된다는 큰 장점을 가지고 있다. 필자는 trigger를 로깅에 사용하였다. 주문 정보를 담은 order 테이블에 변화가 감지되는 경우 logging 테이블에 이를 기록했는데, 특히 status에 관심을 가지고 기록하였다. (코드 전체)CREATE OR REPLACE FUNCTION log_order_status_trans()RETURNS TRIGGER AS $$BEGIN INSERT INTO public.order_status_trans_log(order_id, .. 2024. 6. 28. [SQL] Cascade: 참조 무결성을 지키기 위한 방법 관계형 데이터베이스를 사용하다 보면 FK, 다른 테이블의 값을 그대로 저장하는 참조형 키를 사용하는 경우가 많다. 한 테이블의 PK를 참조하는 FK가 있을 경우, 해당 PK를 수정/삭제하여 그 값을 받아오던 FK가 갈 곳을 잃는 사태를 방지하기 위해 FK가 참조하는 키는 수정/삭제가 불가능하다. 참조 무결성을 위반한다는 에러가 발생하기 때문이다. 해당 키를 수정/삭제하기 위한 방법은 크게 2가지가 있다. 참조하는 FK의 값을 삭제하여 연결을 끊은 후 해당 키를 삭제한다.CASCADE를 활용한다. 1의 경우 어떤 FK가 해당 키를 참조하고 있는지 전부 알고 꼼꼼히 지워야 하고, 혹시라도 FK에 not null 조건이 걸려 있으면 이조차도 불가능하다는 단점이 있다.이때 사용하는 것이 CASCADE 옵션이다... 2024. 6. 28. [React Native] 리액트 네이티브에서 Lottie 사용하여 애니메이션 넣기 (RN 0.73) Lottie는 에어비앤비에서 제공하는 라이브러리로, 많은 사람들이 공유한 애니메이션을 무료로 이용할 수 있고 커스텀까지 가능하다.무게가 큰 gif 파일에 비해 가벼운 json 파일만으로 웹, 앱 등 다양한 곳에 멋진 애니메이션을 넣을 수 있다.하지만 react native 0.73의 최신 버전을 활용하는 필자는 호환되는 버전을 찾는 데 어려움을 느꼈기 때문에 사용 방법을 정리해 보려 한다. 1. 설치로띠를 이용하기 위해서는 2가지의 모듈을 설치해야 한다. 사실상 버전 정보 때문에 이 글을 쓰는 것과 다름없다. 버전이 맞지 않으면 오류가 난다...어떤 오류인지는 밑에서 설명하겠다. 아래 command를 통해 두 모듈을 설치한다.npm i --save lottie-react-native@6.7.2npm i .. 2024. 4. 17. 이전 1 2 3 다음 반응형
