다섯 번째 프로젝트. 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와 유사하게 구현되었다.(블로그 내용)

- 홈 탭의 팔로우, 프로필 내용, 프로필 탭의 피드 글은 블로그 글의 anpigon 유저의 steemit 데이터를 그대로 사용하였다.

추가 구현 사항:

- 무한 스크롤을 구현하고 싶어서 홈 탭의 데이터를 네이버 쇼핑 데이터로 변경하였다.(페이징이 필요함)

- FlatList를 사용하여 홈 탭 카드를 무한 스크롤 및 위로 올렸을 때 새로고침하는 기능을 추가하였다.

- Floating Button을 클릭했을 때 스크롤 맨위로 올라가도록 했다.

- 네이버  쇼핑 카드의 '보러가기'를 클릭하면 웹 뷰로 해당 페이지로 이동하도록 했다.

- 프로필 탭의 첫 번째 섹션은 Pixabay 이미지를 보여준다.(블로그 내용) 이 부분도 마찬가지로 무한 스크롤 및 위로 올렸을 때 새로고침, Floating Button을 추가하였다.

- 프로필 탭의 개인 글 피드의 제목을 클릭하면 상세 화면으로 이동하도록 했다. 상세 화면에서는 markdown 및 html이 파싱되어 보여진다.(모듈 사용)

github 주소: https://github.com/adler0311/awesome-instaram-ui

 

스택:

- react

- react-native

- react-hook

- @testing-library/react-native (jest)

- typescript

 

새로 익힌 혹은 더 연습한 기술/기능:

- react-navigation: 이번에 주로 사용한 건 네비게이션이다. react-navigation을 사용해서 Stack Navigation, Tab Navigation을 구현했다.(물론 각각은 또 모듈을 깔아야 하긴 하다만..). 화면 이동을 위해서는 navigation을 전달해서 push 해준다. 

- @testing-library/react-native: 테스팅 라이브러리를 사용해서 비동기 테스팅을 진행했다. jest 기반이다. 처음에 셋팅이 잘 안되서 애를 먹었는데 결국 jest.confing.js에서 preset setupFiles을 설정해주니 제대로 동작했다. 테스팅 라이브러리는 렌더링한 결과를 보고 테스트를 하기 때문에 native는 @testing-library/react-native로 테스트를 진행해야 한다.(@testing-library/react 가 아니라). 스프링 부트에서처럼 expect를 사용하려면 setupTest.js 파일을 만들어서 jest-dom/extend-expect를 가져와야 한다.

- typescript: 이번에 처음으로 사이드 프로젝트에 타입 스크립트를 적용했다. 확실히 조금씩 편해진다. 편한 건 자동으로 타입이 뜬다는 점, 그리고 잘못 입력했을 때 빨간 줄이 생긴다는 점. 이건 그냥 자바에서 response 객체라든가 pojo 객체를 만들어서 변수를 정해주는 것과 비슷한 거라고 보면 될 거 같다. 대신 좀 더 간단한 버전이랄까. 모듈에 타입스크립트를 적용하기 힘든 경우엔 @types/{모듈명}을 깔아준다. 아직은 모듈의 타입을 찾는 게 힘들 때가 있다.

- react-hook: 이번에 두 번째로 사이드 프로젝트에서 사용. 좀 더 편해졌다. 이제 대부분의 컴포넌트를 함수로 만들고 react-hook을 사용해서 상태를 처리하고 있다. 지금까진 useState, useEffect, useRef 등을 위주로 사용했다.

- 네이티브 디자인: flex, justifyContent, alignItems은 이제 많이 익숙해졌다. 이번에 새로 익힌 건 native-base 모듈에서 다양한 컴포넌트를 사용할 수 있다는 점. Container, Content, Card, CardItem, Left, Body, Right, Thumbnail, Button ...

후기:

 아무래도 프로젝트가 UI 프로젝트이다보니까 UI그리는 것에 대한 경험을 쌓을 수 있었다.

무한 스크롤, native-base 모듈의 컴포넌트, 탭 등. 확실히 native-base 아이콘을 사용하니까 앱 같은 느낌이 들었다. 네비게이션 이동도 실제 앱처럼 자연스러워서 자주 사용해볼 거 같다. 다만 화면이 많아지는 경우, 네비게이션 설계를 하는 게 좀 복잡해질 거 같다. 지금도 탭 안에 섹션에서 이동을 하는 경우 메인 스택 네비게이션에서부터 navigation 객체를 갖고 들어오는데 이런 경우 redux로 처리를 할까 아니면 별도의 네비게이션을 생성할까.

웹 뷰도 처음 구현해봤는데 신기했다. UI에 화려한 색을 입히지는 않았지만 native-base의 Card, CardItem, Header를 사용하니까 여백이나 모양이 깔끔하게 구현이 됐다. Left, Body, Right 같은 컴포넌트도 알아서 위치를 잡아줘서 편하게 구현할 수 있었던 거 같다.

조금 아쉬운 점:

이번 프로젝트는 UI에 집중하느라 redux, mobx는 사용하지 않았다. 기억이 가물가물해지고 있다. 그 전에 사용해봐야 하는데.