프로그래밍/사이드 프로젝트4 일곱 번째 프로젝트. Tinder UI Clone 설명: https://reactnativeexample.com/a-tinder-clone-app-with-react-native/ 위의 프로젝트를 참고해서 만들었다. 사실 위의 프로젝트를 리팩토링한 게 전부다. 내부를 들여다보면 Swiper 라이브러리를 사용한 걸 제외하고는 FlatList, ScrollView, View, Text, Image 등을 사용한 게 전부다. 그럼에도 그럴듯한 앱 UI를 만들었다는 점이 신기하다. 스크린은 Explore, Match, Chat, Profile 이렇게 네 개로 나누어져 있고 그래서 당연히 Tab Navigation을 사용한다. Explore 화면에서는 카드를 넘길 수 있게 되어 있고, Match 화면에서는 매칭된 유저를 보여준다. Chat 스크린에서는 유저와의 채.. 2019. 12. 3. 여섯 번째 프로젝트. Awesome Project Timeline App 설명: 예전부터 내가 작업한 프로젝트를 관리할 수 있는 앱을 만들고 싶었다. 그러던 중 timeline 라이브러리를 알게 됐고 이걸 사용해서 내가 작업해온 프로젝트를 한 눈에 볼 수 있는 앱을 만들기로 했다. https://reactnativeexample.com/timeline-component-for-react-native-app-work-for-android-and-ios/ 이 라이브러리인데.. 사실 선 그려주고, 시간 혹은 날짜 그려주고, 동그라미 그려주는 게 전부인 리액트 라이브러리. 옵션을 전부 떼니까 정말 단순한 라이브러리가 되었고, 나는 타임라인 자체를 수정할 일은 없기 때문에 옵션을 전부 뗀 상태로 파일 하나를 프로젝트 안에 넣었다. 또한, 로그인 과정을 참고해서 만들었다. 이번 프로젝트.. 2019. 11. 26. 다섯 번째 프로젝트. Awesome Instagram UI Clone 설명: 처음엔 https://reactnativeexample.com/react-native-instagram-ui-clone-steemit-app/ 여기에 있는 코드를 보고 구현을 하려고 했는데, https://busy.org/@anpigon/react-native-ui-1 이 블로그가 있는 걸 보고 쉽게 따라할 수 있었다. 설명이 잘 되어 있다. - Stack Navigation으로 MainScreen과 네이버 쇼핑 아이템 웹뷰, 그리고 프로필 피드 드 상세 내용을 구현하였다. - Tab Navigation으로 홈 탭, 프로필 탭.. 등의 탭 이동을 구현하였다. - 헤더와 카드, 아이콘, 버튼, 홈 탭의 팔로우 스크롤 뷰 등의 UI는 인스타그램 UI와 유사하게 구현되었다.(블로그 내용) - 홈 탭의 .. 2019. 11. 14. 4번째 프로젝트. Awesome Wise Saying App 앱을 실행하면 https://theysaidso.com/ 로부터 그날의 명언을 가져와서 보여준다. 이 api는 한 시간에 10번만 호출이 가능하기 때문에 react-native 모듈의 AsyncStorage를 사용하여 로컬에 그날의 명언을 캐싱한다. 매일 아침 7시 30분(임의로 지정)이 되면 firebase function 을 통해서 앱 실행시 알림 동의를 앱에 경우, 푸시 알림을 보내준다. github 주소: https://github.com/adler0311/awesome-wise-saying-app 스택: - React - React Hook - React Native - firebase(firestore, functions) 새로 익힌 혹은 더 연습한 기능/기술: - React Hook을 사용해.. 2019. 11. 5. 이전 1 다음 반응형
