Code/React-Native

Code/React-Native
[React native] FlatList 자동 스크롤 슬라이더 / 캐러셀 구현하기
오늘의 결과물 회사 앱이 런칭되고 나서 react native에서 캐러셀을 활용한 디자인을 구현해야 하는 상황이 자주 발생했다. 참으로 다양한 캐러셀과 슬라이더를 만들었는데 이번에 메인 페이지 개편 작업을 하며 5가지 종류의 새로운 캐러셀을 추가로 작업했다. 가만히 생각해보니 리액트 네이티브를 만진 지 얼마 되지 않았을 때.. 잡힐 듯 잡히지 않는 듯한 FlatList로 캐러셀과 슬라이더를 구현하느라 상당히 진땀을 뺐던 기억이 났다. 캐러셀 자체를 만드는 것은 어렵지 않았으나 추가로 들어가는 로직이라던가 슬라이더의 전체 스타일을 잡는 과정에서 마음대로 되지 않았던 문제가 있었다. 그 당시에는 pm과 기획의 부재로 구두상으로 계속 디자이너님께 물어보며 재량껏 구현을 해야 했던 상황이라 더 고되었던 것으로 ..
→2022.03.27
Code/React-Native
[React native / 리액트 네이티브] Grid 구현 방법, FlatList, numColumns, nativeEvent
자사 서비스는 웹을 기반으로 작업이 되어있었다. 그 후 어플을 런칭하면서 서비스 확장을 기대했고 1차적으로 webVeiw를 통해 안드로이드, ios 에서 볼 수 있도록 리액트 네이티브를 사용했었는데 webView로는 ux적인 경험이 부드럽지 못하다는 내부 결론이 도출되었고, 리액트 네이티브 (react-native)로 서비스를 모두 옮기는 작업을 진행하고 있는 단계이다. 완전히 몰두해서 일하기까지는 일주일 정도의 적응기를 가졌는데, 네이티브를 셋팅하는 데 너무 많은 변수 + xcode의 버릇없음 + 맥북의 대환장 먹통 파티에 3일정도를 썼고, 나머지 이틀은 ui가 복잡하지않은 페이지들을 작업하면서 공식문서를 계속 읽어가면서 작업했다. 그렇게 간단한 페이지 작업을 끝낸 후 grid 형태의 디자인을 구현했어..
→2021.07.17

• 이전
• 1
• 다음