ReactNative

웹으로 쓰고 있던 ToT를 app으로 옮기기로 결정하면서 UI부분도 많이 변경되었다. 그 과정에서 home에 weekly 캘린더를 넣게 되었는데 React-Native는 처음이기도하고 감이 잘 안 잡혀서 캘린더 라이브러리를 찾아보다가 사용하게 된 calendar-strip  구현이 필요한 기능weekly로 보여야함요일별로 클릭이 가능해야함요일이 클릭되면 해당 요일의 데이터들이 보여야함화살표를 클릭하면 주별로 이동이 되어야함데이터가 있는 요일은 요일에 표시가 되어있어야함   사용한 라이브러리 내가 필요했던 모든 기능이 손쉽게 구현이 가능하고 다양한 demo 버젼이 만들어져있어서 사용 방법이 상세히 설명되어있답니다  https://www.npmjs.com/package/react-native-calendar..

[React Native] React Nativgation 적용하기 - 1 react native cli로 빌드해서 expo로 install을 해도 되지만 npm이라는 자바스크립트를 위한 패키지 관리자를 사용했다. npm install @react-navigation/native npm install react-native-screens react-native-sa.. mindevlog.tistory.com 1편에 이어서 bottom tabs 메뉴와 stack 메뉴를 함께 사용하는 법을 설명하려고 합니다! 어플리케이션에서 두가지 메뉴가 따로따로 사용될 일은 없겠지요? 폴더구조 Nav -Tab -Stack Screen -Movie -Tv -Search NavigationContainer 에 두 메뉴를 모두..

react native cli로 빌드해서 expo로 install을 해도 되지만 npm이라는 자바스크립트를 위한 패키지 관리자를 사용했다. npm install @react-navigation/native npm install react-native-screens react-native-safe-area-context 공식 문서 (https://reactnavigation.org/docs/getting-started/) 를 보면 잘 설명되어있다! Mac에서 IOS 빌드를 위한 무언가를 설치해야하는데 나는 해당사항이 없어서 스킵! 1. NavigationContainer 상위 navigator를 감싸는 적어주는 container를 써줘야한다. navigator에 더해서 쓸 수 있는 props들이 있는데 나..

AppLoading 언제 쓰느냐? 사용자가 앱을 실행하면 데이터를 불러오기 시작하는데, 이때 시간이 많이 걸릴수도 있고 이 데이터를 기다리는 동안 사용자가 그 과정을 볼 수도 있을 것이다. 이런 부분을 보완하기 위해서 있는게 AppLoading이다 사용자 경험적인 부분을 보완하기 위해서 사용하는 것이다. 어떻게 보이느냐 로딩이 완료될 때까지 아이콘이라던가, 이미지라던가 대체를 할 수 있는 무언가를 보여준다. AppLoading Props 다양한 Prop이 있는데, 이를 이용해서 api호출 등 다양한 부분에서 활용할 수 있다. startAsync (function) : Promise를 반환하는 함수를 전달하는데 AppLoading이 시작될 때 실행된다. onError (function) : 데이터를 로드할..

리액트 네이티브란? 리액트 네이티브(React Native)는 iOS와 안드로이드 앱 개발을 위한 라이브러리입니다. 자바스크립트로 구현된 기존의 모바일 앱들은 웹뷰를 이용한 하이브리드 방식이였습니다. 하지만 리액트 네이티브는 자바스크립트로 개발하지만, 화면 인터페이스는 네이티브 위젯으로 컴파일하여 빌드됩니다. 리액트 네이티브는 네이티브 UI를 사용하여 빠른 사용자 경험을 제공합니다. 개발환경 안드로이드 앱을 만들고 있다면 안드로이드 스튜디오를 다운 받아야합니다. 그리고 컴퓨터에 java를 다운받아야합니다. 시뮬레이터도 다운받아야하고요. 정말 받아야하는 소프트웨어가 많습니다. IOS도 Xcode를 다운받아야하고요. 하지만 저는 다 생략을 하고 프로토타이핑과 테스트를 목적으로 만들어진 간단한 툴을 이용할 것..