Nagui.me
KimNagui
KimNagui
KimNagui
KimGwangHyeon

#FrontendDeveloper

[ReactNative] Launch Screen 과 Splash Screen

React Native 개발을 하면서 앱 실행 초기화면을 어디서는 Launch Screen 이라하고 어디서는 Splash Screen 이라고 하길래 다른 건가 싶어서 찾아보았다. github나 stackflow 검색결과를 통해 내가 내린 결론과 사용한 방법은 아래와 같지만, 몇몇 라이브러리나 국내외 블로그들에서는 그냥 앱실행시의 첫화면을 Launch Screen 혹은 Splash Screen 이라고 부르고, 어떻게 개발하냐의 차이이기 때문에 무조건 맞다고는 할 수 없다. Launch Screen 이란 ? 런치 스크린은 앱이 실행되기전 자동으로 보여지는 첫 화면 사용자가 앱을 실행하고 디바이스에서 해당 앱의 인터페이스를 불러오는 동안 공백화면이 나올 수 있는데, 이 공백화면을 이미지로 채워줘서 사용자는 앱 실행이 빠르다고 느낄 수 있음 별다른 처리가 이루어지는게 없이 앱이 불러와지면 바로 화면이 전환되기 때문에 빠르게 지나갈 수 있는 화면으로 앱 대표 이미지나 회사 로고 또는 간단한 문구만 보여주는게 대부분 Splash Screen 이란 ? 앱이 실행될때 나타나는 첫 화면 보통 스플래쉬 스크린이 나타나는 동안 앱실행에 필요한 데이터를 불러온다던가, 기존 로그인정보를 가지고 자동 로그인을 시도하는 등의 처리를 컨트롤함 여러개 넣을 수 있음 React Native 에서 Launch Screen 만들기 1. generator-rn-toolbox 설치 2. PSD 파일 준비 해상도 : PSD 파일의 해상도는 2208x2208px 이상을 준비해야하며 필수로 표시되야할 부분은 약 30% 이상의 margin을 가지고 있어야함 참고 : Android의 경우 iOS보다 적은 부분을 잘라내므로 같은 파일로 Launch Screen을 생성해도 iOS보다 이미지가 작아보일 수 있음 PNG를 PSD로 변환해주는 사이트 : photopea.com 3. Launch Screen 생성 이제 위에서 만든 PSD 파일을 이용해서 Launch Screen을 생성 * iOS * Android Android의 경우 아래와 같이 색상코드가 잘못 입력될 수 있으므로 확인 후 수정해야함 React Native 에서 Splash Screen 만들기 간단하다, React Native 의 Navigation 구성에서 앱실행의 첫화면을 만들어주면 끝. (1) SplashScreen 컴포넌트 생성 (2) react-navigation 설정 아래와 같은 구조에서 createAppContainer 하위의 createSwitchNavigator의 첫번째 인자 옵션에 스플래쉬 스크린 컴포넌트를 추가해주고, 두번째 인자 옵션으로 initialRouteName으로 스플래쉬 스크린을 지정

[ReactNative] FlatList의 onEndReached 이슈

React Native 에서 무한 스크롤을 구현할 수 있는 방법은 여러가지가 있는데 그 중 대표적인 한가지가 FlatList의 onEndReached를 이용해서 무한스크롤을 구현하는 방법이다. onEndReached : 스크롤이 목록의 하단에 도달할시 액션 지정 onEndReachedThreshold : 목록의 가장 마지막 아이템의 어느 높이에 도달시 onEndReached이 수행되는지 지정 (값 : 0 ~ 1, 높을수록 빨리 onEndReached가 수행됨) Issue 문제는 스크롤이 onEndReachedThreshold에서 설정한 위치에 도달하게되면 onEndReached가 수행이 한번만 되는게 아니라 연속적으로 두번 수행된다. ( github 이슈에서는 스크롤이 끝까지 내려갔을때 바운스되는 효과 때문이라고 하지만 경우에 따라 FlatList의 renderItem 속성의 컴포넌트를 Pure Component로 사용하면 해당 현상이 안일어날 수 있는듯.. ) Solution 따라서 한번만 실행되도록 처리해주어야되는데 여러가지 방법중 throttle 을 이용해서 onEndReached가 최대 1초에 1회만 수행할 수 있도록 했다.

[AWS] Codecommit unable to access 403

Issue 기존 잘되던 프로젝트 디렉토리에서 git pull을 받으려고하니 갑자기 unable to access 403 에러 발생 AWS CLI로 자격증명을 하고 있었음 [macos keychain 문제] 인듯함 Solution 🚀 급할때 임시 해결방법 사용자 홈디렉토리의 .gitconfig 와 프로젝트 디렉토리의 .git/config 에서 credential 항목 주석처리 후 재시도 [링크] 🌟 해결방법 Option 1 git client 를 macos 의 keychain 을 사용하지않는 버전으로 재설치 Option 2 keychain 에서 git-codecommit 을 검색해서 문제되는 키를 찾고 정보 가져오기 -> 접근제어 -> 다음 응용프로그램에서 접근시 항상 허용 에서 git-credential-osxkeychain을 제거 다시 git 명령어 작업시 패스워드를 묻는 창이 뜰때 거부 선택 ⚠ 그러나 매번 창이 뜨기때문에 매번 거부를 선택해야 하는 불편함이 있음 Option 3 🎯 AWS CLI 자격증명이 아니라 Git 자격증명으로 대체하기 ~/.gitconfig 파일에 credential 항목을 아래와 같이 수정 keychain 에서 git-codecommit 을 검색해서 해당되는 키를 삭제 해당 프로젝트 디렉토리에서 git 명령 수행하면 묻는 Username과 Password 입력 keychain 에서 git-codecommit 을 검색해서 해당되는 키의 정보보기에서 계정항목이 키가 아니라 Username으로 되있다면 성공 Conclusion Codecommit 서비스사용시엔 AWS CLI 자격증명쓰지말자..