React Native [React Native] CodePush를 이용한 앱 업데이트 1. 서론 Play store는 조금 덜한 편이지만 App store의 심사는 정말 까다롭다. 물론 까다로운 심사 절차에는 많은 장점도 있지만, 당장 배포가 리젝트된 나에게 있어서는 정말 짜증나는 일이 아닐 수 없다. 심지어 저번 심사에서는 언급조차 없던 부분이 다음 심사에서는 갑자기 리젝트 요인이라니... 까라면 까야하지만 정말 힘들다. 이런 짜증들을 해결할 수 있는 방법을 찾아보다가 CodePush라는 것을 알게됐다. 마이크로소프트에서 서비스 중인 오픈 소스인데 javascript 부분에 한해서 심사 없이 배포를 진행해준다. 이미지 등도 함께 지원해주긴 하지만 정확한 정보는 여기서확인하면 된다. 당연한 얘기겠지만 Native를 수정하게 되면 업데이트 한 앱에서 무수한 크래쉬가 날 것이기 때문에, Na.. 더보기 [React Native] 다른 앱(play store, instagram 등) 열기 1. 서론 아래의 화면은 Antodo개발 1.0 초기 버전의 설정 페이지다. 어플을 개발하고 배포하고 나면 앱 리뷰 남기기와 앱 인스타그램 등의 타 어플을 바로 열 수 있는 코드가 필요하다. 처음에는 방법을 몰라서 webview로 띄웠는 데 너무 불편해서 1.0.2 버전에서 방법을 찾고 수정했다. 생각보다 간단하니 잘 따라오기 바란다. 2. 방법 매우 간단하게 Linking이라는 react native 내장 함수를 사용하면 된다. 2-1. iOS 설정 내가 진행한 프로젝트의 경로로 진행하도록 하겠다. ~/Antodo/ios/Antodo/info.plist 파일을 연다. ~/[만든 프로젝트 명]/ios/[만든 프로젝트 명]/info.plist 아래의 코드를 추가한다. app store, instagram,.. 더보기 [Antodo] 첫 어플리케이션 릴리즈 프로젝트 계기 처음에는 학교 동기와 함께 아이디어 회의를 도와주는 화이트보드와 포스트잇 어플을 만들려고 했지만... 이미 나와있는 프로젝트가 빠방했던 관계로... 접게 됐다. 그러던 와중 함께 하게 된 디자이너 친구까지 셋이서 다시 아이디어 회의를 시작했고, 게으른 사람들을 위한 투두를 만들어보기로 했다!! 기술 스택 - React Native - TypeScript - SQLite 사용한 툴 - Notion - Visual Studio Code - GitHub 회의 방식 회의는 매주 수요일에 진행됐다. 시간은 다소 유동적이었다. 사이드 프로젝트 형태로 진행됐기 때문에 각자의 일정이 있으면 협의 후 다른 날로 조정했다. 시작 전 항상 회의 안건을 미리 노션에 작성했고, 그 안건에 대한 회의 진행 후 다음 회의까지.. 더보기 [React Native] 특정 화면에서 화면 고정하기 1. 서론 지난번과 같이 지인의 스타트업 애플리케이션을 react native로 구현하다가 생긴 일이다. 특정 화면에서만 가로 모드로 고정하고 싶어서 이것저것 오픈 소스를 살펴보다가 발견한 모듈이 바로 react-native-orientation이다. 사용법은 매우 간단하므로 아래에서 코드를 보면 이해할 수 있을 것이다. 2. 개발 환경 react-native @0.62.2 typescript @4.0.3 react-native-orientation @3.1.3 3. 구현 방법 나는 아래와 같이 특정 화면에서 가로 모드로 고정하는 코드를 작성했다. 만약 세로 모드를 고정하고 싶다면 아래의 참고 홈페이지를 방문해서 portrait와 관련된 함수를 찾으면 된다. 반드시 useEffect 내에서 return .. 더보기 [React Native] Bottom tab bar 특정 화면에서 안 보이게 설정하기 1. 서론 지인의 스타트업 애플리케이션을 React Native로 제작해주다가 특정 화면에서만 바텀 탭 바가 사라지게 해야 하는 상황이 왔다. 공식 문서를 뒤져봐도 비슷한 코드는 있어도 내가 원하는 코드는 없고 여러 사이트들을 뒤지다가 해결 방법을 찾았다. 해당 사이트에서도 버전 차이 때문인지 문제가 생겨서 응용만 하고 디버깅하며 다시 코딩을 했다. 2. 개발 환경 react-native @0.62.2 typescript @4.0.3 @react-navigation/native @5.7.4 @react-navigation/stack @5.9.1 @react-navigation/bottom-tabs @5.9.0 3. 구현 방법 내가 원하는 플로우는 stack navigation들로 bottom tab ba.. 더보기 [React Native] Dimensions.get('window')와 Dimensions.get('screen')의 차이점 1. 서론 리액트 네이티브 개발 중 모바일 기기의 해상도를 가져올 수 있는 API인 Dimensions를 사용할 일이 있었는 데, 굳이 왜 window와 screen으로 나뉘어 있는지 모르겠어서 검색하고 알아낸 내용을 적고자 한다. 2. 차이점 사실 IOS에서는 window와 screen 둘 중 어떤 것을 쓰더라도 동일하게 적용된다. 다만, Android에서는 다르다. Dimensions.get('window') 위에 보이는 그림 1의 빨간색으로 표시된 부분을 포함하지 않고 영역을 추출한다. Dimensions.get('screen') 위에 보이는 그림 1의 빨간색으로 표시된 부분을 포함하고 영역을 추출한다. [참고] stackoverflow.com/questions/44978804/whats-the-d.. 더보기 [React Native] 커스텀 로딩 애니메이션 스크린 구현하기 1. 서론 배달의 민족 등과 같은 어플을 보면 로딩 중 커스터마이징 한 로딩 화면을 볼 수 있다. 이런 화면을 만드려면 어떻게 해야 할까 생각을 하다가 직접 setInterval 함수를 사용해서 구현해봤다. 2. 결과 화면 5초 짜리 GIF 파일이어서 다소 끊기는 느낌이 나지만 실제 동작 과정은 훨씬 자연스럽다. 3. 환경 설정 react native 0.62.2 버전을 typescript와 함께 설치한다. 또한, 아래와 같은 파일 경로를 생성한다. 필요한 이미지 파일은 이 파일을 설치해서 압축을 풀어 사용하면 된다. 📦src ┣ 📂Assets ┃ ┗ 📂Images ┃ ┃ ┣ 📜0.png ┃ ┃ ┣ 📜1.png ┃ ┃ ┣ 📜10.png ┃ ┃ ┣ 📜11.png ┃ ┃ ┣ 📜12.png ┃ ┃ ┣ 📜13... 더보기 이전 1 다음
