반응형 개발 및 알고리즘36 [JS/typescript] Null 병합 연산자 ?? (물음표 2개) Javascript 또는 Typescript에서 어떤 변수를 사용할 때 조건에 따라 사용하고 싶으면 if문을 사용한다.if (var1 == true) { let var2 = 0;} else { let var2 = 1;}다만 if문 안에서 변수를 선언하는 경우 블록 밖에서는 해당 변수를 사용할 수 없기 때문에 필요한 경우 이런 식으로 응용한다.let var2 = 1;if (var1 == true) { var2 = 0;}조금 더 간단하게 사용하려면 삼항 연산자를 사용하면 된다.let var2 = var1 == true ? 0 : 1;조건 ? 조건이 참인 경우 값 : 조건이 거짓인 경우 값 그러나 조건과 사용하려는 값이 같아지는 경우엔 똑같은 부분을 쓰느라 코드가 중복된다.let va2 = var1... 2024. 7. 23. [React Native] 리액트 네이티브에서 스플래시 스크린에 애니메이션 구현하기 (lottie + react-native-bootsplash) 앱의 첫인상이 앱 아이콘이라면 스플래시 스크린은 앱을 만나러 가는 길이라고 정의할 수 있다. (중요하단 뜻이다.)이번에는 react-native-bootsplash 모듈을 통해서 스플래시스크린을 지정하는 방법을 알아보려 한다. 우선 스플래시스크린이 무엇인가? 앱에 처음 접속했을 때 뜨는 로딩화면으로서 프론트단에서의 앱 로딩 - 백엔드에서 정보를 가져오는 등 복잡한 구동이 진행되고 있을 때 사용자에게서 그것을 숨기고 덜 지루한 느낌(ux)을 주기 위해 구현한다. 로고만 있는 정적인 화면부터 누구나 아는 넷플릭스 스크린같은 동적인 화면도 많다.다만 아무리 검색해봐도 정적인 화면이 1초도 안 나오고 애니메이션부터 시작하는 스플래시 스크린을 구현하는 방법을 찾지는 못했다.그럼 어떻게 할까? 애니메이션의 배경색.. 2024. 7. 12. [React Native] 리액트 네이티브에서 기기 설정 언어 확인하기 (react-native-localize) 다양한 국가에서의 출시를 노리고 있는 어플리케이션이라면 초기 언어 설정을 위해 사용자 기기의 언어 설정을 받아올 필요가 있다.react-native-localize 모듈을 활용할 것이다. npm i react-native-localizecd iOSpod install 구현은 아주 간단하다. 빌드 세팅도 필요 없다.import {getLocales} from “react-native-localize”console.log(getLocales()); 사용자가 기기에 다운받아놓은 언어 목록이 다음과 같이 출력된다.type getLocales = () => Array;// output example[ { countryCode: "GB", languageTag: "en-GB", languageCode: "e.. 2024. 7. 11. [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. 이전 1 2 3 4 5 6 다음 반응형
