ios (5) 썸네일형 리스트형 [React-native] useQuery와 suspense를 활용한 랜더링 처리 React를 활용해 서버에서 데이터를 fetching하고 이를 화면에 그리는 과정은 간단합니다. 하지만 하나의 컴포넌트에서 여러개의 데이터를 fetching한다면 어떻게 화면이 랜더링될까요? 또 그 데이터들이 불러오는 시간이 각각 다르다면 어떻게 랜더링이 되는 걸까요? const func1 = async () => { await new Promise((resolve) => setTimeout(resolve, 2000)); console.log('func1 complete!'); return 'func1';};const func2 = async () => { await new Promise((resolve) => setTimeout(resolve, 4000)); console.log('func2 .. [React-native] notifee, deeplink를 이용한 FCM 핸들링 FCM으로 메세지 수신React-native에서 fcm 알림을 받아보고, 추후 이벤트 처리까지 해보도록 합시다.# Install the ap modulenpm i @react-native-firebase/app # Install the messaging modulenpm i @react-native-firebase/message먼저, FCM을 수신할 수 있는 라이브러리를 설치해줍니다.Cloud Messaging | React Native Firebase나머지는 공식문서를 그대로 따라하면 됩니다. 공식문서가 제일 친절하게 설치 방법이 나와있습니다. 다른 블로그 글들을 참조하기 보단, 공식문서를 보는 습관을 들여 봅시다 :)FCM TOKEN 전달export const useFcmToken = (): [str.. [React] eslint/prettier를 활용한 코드 획일화 팀 프로젝트에서 팀원과의 코드스타일을 맞추는 것은 매우 중요합니다.코드스타일을 맞춰 획일화를 하는 것은 단순히 가독성이 좋아진라는 장점 뿐만 아니라 버그와 오류를 방지하고 코드 품질을 향상시켜줍니다. react에서는 prettier와 eslint를 활용하여 코드의 일관성, 품질, 가독성을 향상시키고 개발자 간 협업을 더 쉽게 만들어 줄 수 있습니다.우리 팀이 이를 지키기 위해 적용한 것들을 살펴보겠습니다. 1. Alias를 활용한 상대 경로 없애기import { roomState } from '../../recoil/recoil';import { useCreateRoom } from '../../../hooks/api/rooms';import { ErrorToastMessage } from '../.... [React] React의 hook이란? hook이란?리액트의 훅은 16.8 버전부터 새로 추가된 기능입니다. Hook은 함수형 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수입니다. Hook은 class 안에서는 동작하지 않으며, 대신 class 없이 React를 사용할 수 있게 해줍니다. hook의 규칙리액트 Hook은 반복문, 조건문 혹은 중첩된 함수 내에서 호출하면 안되며반드시 최상위(at the Top Level)에서만 Hook을 호출해야 합니다. 또한 Hook은 렌더링 시 항상 동일한 순서로 호출 되어야 합니다.Hook은React 함수 내에서만 호출 해야 합니다. 즉, 리액트 Hook은 함수형 컴포넌트(Functional Component) 에.. [React] React의 에러 처리 방식 무슨 프로그래밍이든 마찬가지로 에러를 잡기위해 노력해야합니다.프론트엔드에서는 사용자가 해결할 수 있는 에러, 해결할 수 없는 에러를 분리하여 사용자에게 에러마다 다른 화면이나 알림창을 보여줘야 합니다.에러 메시지가 명확하고 사용자 친화적이면 사용자는 문제를 빠르게 이해하고 대응할 수 있습니다. 반면, 불명확하거나 부적절한 에러 메시지는 사용자를 혼란스럽게 만들고, 애플리케이션의 신뢰성을 저하시킬 수 있습니다.우리 모두의 택시팀에선 어떻게 프론트엔드의 에러를 처리했는지 알아보겠습니다. react에서 에러를 처리하는 4가지 방법프로그래밍에 의한 실수로 발생하는 에러는 잠시 뒤로 미뤄두고, 프론트에서 우리가 가장 많이 접할 수 있는 에러는 역시나 서버와의 통신에서 발생하는 에러일 것입니다. React에서 네트.. 이전 1 다음
