개발블로그

React Navigation은 react native에서 화면이동(routing) 시 사용되는 라이브러리로, 페이지가 쌓이는 구조(stack 구조)를 제공한다. Stack 뿐만 아니라 Tab(하단탭), Drawer(옆에서 열리는 전체메뉴) 등의 화면 이동 방식(네비게이터)도 가지고 있다. 네비게이터들은 서로 중첩이 가능하다. 우리 프로젝트에서는 Stack과 Tab 네비게이터를 사용했고, Stack 내 하나의 화면에 Tab을 중첩하여 사용했다. 📘 기본사용방법Stack 네비게이터를 생성 - 리액트 네비게이션은 내에서 실행할 수 있다.Stack.Screen은 화면의 이름과 렌더링되는 컴포넌트를 지정한다.네비게이터 타입의 키는 Stack.Screen의 name이 될 수 있다. 키의 타입이 undefin..

이번에 새로 만들어야 하는 페이지의 조건은 당근어플처럼상단탭이 있어 이동이 가능하고아이템이 무한스크롤로 정렬되고스크롤 시 탭이 상단에 고정되고중간에 랜덤 아이템이 나오는페이지였다. 조건이 많아 어떻게 구조를 짜야할지에 대해 고민을 많이했다. 1. FlatList vs ScrollView1) 무한 스크롤을 쓰다보니까 처음에는 FlatList로 작업했다- renderItem에서 분기처리해서 각 탭에 맞는 아이템을 렌더링- 고정될 탭 아래에 스크롤은 되지만 공통적으로 들어가는 컴포넌트가 있어 리스트 가공- 고정될 탭은 stickyHeaderIndices로 설정- 랜덤 아이템은 리스트를 또 새롭게 가공이렇게 되다보니 가공에 가공에 가공을.. 데이터가 티기고 티겨지는.. 너무 복잡해졌다또한 리스트는 state로..

문제현상이미지 아이템이 많으면 스크롤 시 버벅거림이 심해져 사용자 경험에 좋지 않은 영향을 주고 있으므로 수정이 필요했다 컴포넌트 구조* 페이지 : MainShop, BrandShop, ProductSearchResult -> 여기서 각각 ScrollView를 사용하고 있다* 컴포넌트 ProductList (FlatList 사용) -> 각 페이지의 ScrollView 안에 ProcudtList를 사용하고 있다 수정방법 1. 무한스크롤너무 많은 이미지를 한번에 보여주고 있어서 30개씩 아이템을 보여주는 무한스크롤을 사용했다. ScrollView의 onScroll 함수를 사용하여 화면의 끝에 닿을 경우 보여주는 아이템 개수(renderCount, renderList)를 수정하는 방식이었다.// Scrol..

api요청을 한 후 새롭게 적용된 데이터를 보여줘야할 때, 우리가 생각하는 것보다 늦게 데이터가 반영된다.이를 해결하기 위해 api 요청을 하면서 ui를 미리 반영하는 낙관적 업데이트라는 것을 한다. 대표적인 예로 좋아요 클릭 시 하트 색 또는 좋아요 개수를 변경시키는 것이 있다. (gif가 좀 이상하게 잘려서 아다리가 안맞음 ㅠ;) 이렇게 좋아요를 클릭해도 숫자가 늦게 반영이 되는 상황에서 낙관적 업데이트를 사용하면 좋아요를 클릭 시 개수를 바로 반영시킬 수 있다. 낙관적 업데이트 방법(두둥) 일단 나는 react-query를 사용하고 있고, 좋아요 클릭 시 post 요청을 보내고 있다. 1. useMutate의 onMutate에서 변경하고자 하는 쿼리를 queryClient.cancelQueries..

🐞 문제상황푸시 알람으로 페이지 진입한 후 댓글 작성 시 작성한 댓글이 반영되지 않음댓글 작성후에는 리액트 쿼리의 쿼리 무효화로 댓글 정보가 리패치 된다 const { mutate: postComment } = useMutation({ // .. onSuccess() { queryClient.invalidateQueries({ queryKey: [type, 'detail', idx, isLogin], }); queryClient.invalidateQueries({ queryKey: ['comment'] }); }, }) 💡 해결과정이것저것 시도해보다가1. 푸시 알람으로 페이지 진입 시 queryClient.getQueryData가 unde..

이전부터 리액트 네이티브 프로젝트에서 ios 시뮬레이터를 실행시키면 절대 한번에 실행되는 법이 없었다. 그래서 그때도 어떻게 에러를 해결했는지 기록해놨었는데, 그걸 참고해도 실행이 안되더라는😂 그래서 또 다시 작성한다. npm run ios로 스트레스 받지 않는 그날을 위해1. pod install깃에서 프로젝트를 받고 npm run ios를 하기 전 pod install(프로젝트에 필요한 라이브러리 설치)을 했다. 하지만 언제나 여기부터 막혔었다. 항상 다른 이유로..😇 이번에는 아래와 같은 에러가 떴다rbenv: pod: command not foundThe `pod' command exists in these Ruby versions:2.7.53.2.2 pod 명령어를 사용할 수 없다는 것은1...

React-hook-form에 대해서는 input 입력 시 렌더링을 최소화하는 라이브러리 정도로만 알고 있었다. 현 회사에 입사해서 계속 리액트 훅 폼을 사용하고 있는데, 기계적으로 붙여넣기(..)만 하다가 제대로 공부해야겠다는 생각이 들어 작성하는 리액트 훅 폼 정리 글이다. 1. 제어 컴포넌트 vs 비제어 컴포넌트제어/비제어 컴포넌트는 리액트가 실시간으로 state를 제어할 수 있는지 없는지에 따라 나눠진다. 제어 컴포넌트를 사용하게 되면 과도한 리렌더링이 발생하게 되는데 이러한 특성을 보완하기 위해 비제어 컴포넌트인 리액트 훅 폼 라이브러리를 사용하기 시작했다. 🔗 제어 컴포넌트기존 리액트에서 input창에 입력을 하면 onChange함수에 state 변경 함수를 연결하여 실시간으로 상태 변화가..

🐞 문제상황axios에서 interceptor를 사용해서 데이터를 바로 리턴해주도록 설정했다. 그런데 axios에서 리턴 받은 데이터 객체의 속성을 바로 사용하려고 하니 타입에러가 발생했다. 그리고 인터셉터를 적용하지 않은 것처럼 data.data.속성명을 작성했더니 타입에러가 뜨지 않았다. // utils/api.tsconst api = axios.create({ baseURL: 'http://baseurl', timeout: 1000 * 30,})api.interceptors.response.use( (response) => { return response.data // 응답으로 받은 response의 data를 리턴값으로 },) 배경지식 1. interceptor인터셉터란?axios..

🐞 문제상황리스트 정렬 변경 시 변경된 리스트가 바로 적용되는 것이 아니라 변경 탭을 한번 더 클릭하면(modalVisible 상태가 변경되면) 그때 리스트가 변경된다💡해결과정기존 코드 const [modalVisible, setModalVisible] = useState(false); // 모달보기 const [order, setOrder] = useState('time'); // 정렬방법 useEffect(() => { if (pickList) { let sortedList; if (order === 'time') { // 최신순 sortedList = pickList.sort( (a, b) => new Date(b.CREA..

1. sentry 란?Sentry provides end-to-end distributed tracing, enabling developers to identify and debug performance issues and errors across their systems and services. 센트리는 분산 추적을 제공하여 개발자들이 시스템과 서비스 전반에 걸쳐 성능 문제와 오류를 식별하고 디버깅할 수 있도록 도와준다. 쉽게 말해 에러 분석 및 모니터링 도구다.에러 발생 시 다양한 정보를 설정하여 기록할 수 있고, 사용자의 이벤트가 타임라인으로 기록되며, 발생한 에러들을 시각화 도구로 쉽게 분석할 수 있음 2. 도입계기어플 리뷰와 모니터링 시 종종 앱 크래시가 있음을 알고 에러를 해결하기 위해 도입..