Today, What I learned? 리액트 네이티브에서 중첩 라우터로 Stack을 만들어두고, 내비게이션을 지정했을 때 아래와 같은 에러를 만났다. 중첩 라우터에서는 네비게이션을 어떤 식으로 지정해주어야 하는지 정리해보려고 한다. 내비게이션 구조 우선 네비게이션 구조는 Root라는 스택에서 스택과 탭을 하나로 묶어주고 있는, 중첩된 구조다. 중첩된 네비게이션 위 에러 메시지에도 있는 navigation 관련 링크로 이동해서 보면 일반적인 내비게이션 지정은 아래와 같이 할 수 있다. navigation.navigate('페이지 컴포넌트명'); 중첩된 내비게이션에서는 먼저 상위 내비게이션을 지정해 주고 screen이라는 속성으로 페이지명을 지정한다. navigation.navigate('Root', {..

Today, What I learned? 리액트 쿼리를 이용해서 무한스크롤을 적용해 보았다. 무한스크롤로 데이터를 받아오는 것은 아직까지 시도해보지 못했던 기능이었는데 useInfiniteQuery 훅을 사용해서 생각보다 쉽게 적용할 수 있었다..! FlatList 먼저 FlatList에서 무한스크롤을 위해 필요한 두 가지 속성을 추가해야 한다. onEndReached 끝점에 도달했을 때 실행시킬 함수가 들어가는 속성 onEndReachedThreshold 스크린 높이에 도달하기 전에 얼마큼 먼저 fetch 함수를 빠르게 실행시킬 것인지에 대한 속성. 숫자로 들어간다. 1일 경우엔 끝에 도달했을 경우 실행된다. 로직의 구성 무한 스크롤이 어떤 방식으로 이루어지는지를 간략하게 정리하면 이렇다. 기존 배열 ..

Today, What I Learned? 리액트 네이티브 공식문서의 ScrollView를 보다가 와의 비교하는 부분이 있어 정리해 보고, 현재 만들고 있는 영화 앱의 ScrollView 부분을 FlatList로 바꿔보는 작업을 기록해두려 한다. vs 위 캡처는 리액트 네이티브 공식 문서에서 발췌해온 부분이다. 살펴보면 대략 이런 내용이다. ScrollView는 렌더 시에 모든 자식 컴포넌트들을 한 번에 가져와서 성능이 저하된다. FlatList는 렌더 시에 보이는 것들만 lazily하게 가져오고, 스크롤을 내려야 볼 수 있는 아이템들은 지워버리기 때문에 메모리와 처리 시간을 절약할 수 있다. FlatList는 여러 기능을 내장하고 있다. 헤더 / 푸터 지원 horizontal mode 지원 내려 당겼을 ..

Today, What I learned? 커스텀 훅에 익숙해져 보기 위해 투두리스트를 리팩터링 해보기로 했다. 기존의 코드 중에서 투두리스트를 추가하는 부분을 커스텀훅으로 만들어 보았다. state와 dispatch, submitHandler 까지 모두 가져왔다. useInput import { useState } from 'react'; import { useDispatch } from 'react-redux'; import { nanoid } from '@reduxjs/toolkit'; import { __addTodos } from '../redux/modules/todoSlice'; const useInput = () => { const [title, setTitle] = useState('');..

12월 다섯째 주를 보내며 새해에 작성하는 WIL! 프로젝트를 무사히 끝내고 리액트 네이티브를 배우기 시작하니 한 주가 금방 지나갔다. 또 새로운 팀으로 프로젝트를 곧 시작하게 될 텐데 열심히 해봐야지 🥺 👀 Fact 프로젝트가 다행히 배포까지 잘 마무리되었다. 새로운 팀에서도 팀장을 자원했다!.. 😇 리액트 네이티브를 새롭게 배우기 시작했다. 🙂 Feeling 프로젝트가 발표까지 마무리 잘 마무리되어서 다행이다. 팀원들과도 많이 친해졌는데 아쉽..🥺 새로운 팀에서도 팀장을 맡게 되었다. 또 열심히 해봐야지! 지금까지 웹만 하다가 네이티브로 앱을 다루니까 재밌다. 🔍 Finding React Native Expo로 시작하기 React Native로 Todolist CRUD env 환경변수 적용하기 Rea..

Today, What I learned? 웹이나 앱이나 어떤 정보들을 로컬 데이터베이스에 저장해야 하는 경우가 있다. 투두리스트를 왕창 만들고 있으니 이걸 예시로 들자면, 새로고침하거나 종료 후 다시 실행했을 때 전에 작성했던 리스트가 남아있는 것이 필수! 브라우저에 로컬 스토리지가 있다면, React Native에서는 AsyncStorage를 이용해서 저장해볼 수 있다. Async Storage 공식 문서에 들어가 보면 아래와 같은 내용이 있다. Data storage system for React Native. 리액트 네이티브를 위한 데이터 스토리지! 저장하거나 불러오는 방식이 Local Storage를 사용하는 방식과 거의 흡사하다. https://react-native-async-storage.g..

React Native 리액트 네이티브는 리액트로 모바일 앱을 만들 수 있는 프레임워크다. 모바일 앱을 만들 수 있는 다양한 언어와 프레임워크들이 있지만, 리액트 네이티브를 사용하는 이유는 크게 두 가지다. 비용 절약 리액트 네이티브는 안드로이드, iOS 네이티브 앱을 One Source, 즉 하나의 코드로 동시에 만들 수 있기 때문에 여러 비용, 시간 측면에서 크게 절약된다. 낮은 러닝커브 네이티브 역시 리액트를 기반으로 하기 때문에 기존에 리액트를 사용할 줄 아는 사람이라면 빠르게 배울 수 있다. 리액트 네이티브의 최근 아키텍처는 아래와 같이 변경되었다. React Native 프로젝트 만들기 리액트 네이티브로 프로젝트 만드는 방법은 여러 가지가 있다. 공식 문서에서는 크게 두 가지를 소개하고 있다...

프로젝트 술렁을 마무리하며 지난 22일부터 오늘 발표에 이르기까지 짧은 시간 동안 프로젝트를 진행했고 완성하는 데에 성공했습니다. 🙌 좋았던 점도 아쉬운 점도 있지만 프로젝트를 마무리하며 각자의 KPT 회고를 취합해 보았습니다. Keep 일정관리를 잘한 점 팀원 간의 소통이 잘 된 점 서로 부족한 점이 있다면 함께 도와주려는 분위기 노션으로 프로젝트를 관리한 점 서로 잘 안 되는 부분이 있다면 질문해서 해결하기 실력과 관계없이 계속 도전하고 시도해 보기 코드 컨벤션 및 데이터 구조에 대해 세부적으로 의논한 점 Problem PR에서 코드리뷰를 하지 못한 점, 주석이 부족하여 다른 팀원의 코드를 이해하기 어려웠던 점 일부 팀원의 경우 주어진 기능을 온전히 소화해내지 못한 것에 대한 아쉬움 배포 전 필요 없..

프로젝트를 마치며 주말을 낀 크리스마스를 포함한 딱 7일!.. 정확히는 6일간의 프로젝트가 끝이 났다. 무사히 배포까지 마쳤다는 점에서 아주 다행스럽게 생각하고 우리 팀원들 모두 고생했다. 이번 프로젝트도 역시 개인적인 회고를 해보려 한다! 우리의 프로젝트는 아래 링크에서 확인해볼 수 있다. https://soolung-project.vercel.app/ 술렁술렁 soolung-project.vercel.app 개인적으로 아쉬웠던 점 이번에도 개인적으로 아쉬웠던 점을 튜터님의 피드백을 바탕으로 정리해 본다. 게시글 작성 후 갱신 담당파트는 아니었지만 함께 로직이 짜이는 것을 지켜보고 참여했던 입장으로서.. 작성된 후 글이 바로 1페이지에 뜨지 않고 마지막 페이지로 들어간다는 것을 알게 되었다. 확인해보니..