Web&Hybrid/React Native

개요지금까지는 부모 컴포넌트에서 자식 컴포넌트에게 props를 통해 데이터를 전달하는 것만 써왔어서 매번 깊숙히 있는 자식들에게 데이터를 전달하려면 큰 고생을 해야했다... 이거를 Prop Drilling이라고 하는데 이게 유지보수도 어렵게 했고 코드도 상당히 지저분해진다! 이것을 해결하려면 앱 전역에서 접근할 수 있는 상태 저장소가 필요하고 이것을 만들어주는 라이브러리 중에 하나가 Zustand가 있다. 오늘은 Zustand에 대해 정리해볼 계획이다. 1. 상태 관리란?여기서 상태(State)라는 것은 앱의 '데이터'를 의미한다. 로그인했는지 여부(isLoggedIn), 로딩 중인지 아닌지(isLoading), 사용자 데이터(User) 모두 상태에 해당한다. 그렇기에 상태 관리라는 것은 앱 전체에서 ..

개요프로젝트 작업을 할 때, 아직 백엔드 API 개발이 안된 상태에서는 서버 통신 코드만 구현해놓고, 목업을 통해서 작업을 진행했었다. 그래서 백엔드 API 작업이 완료된 후에 그때 내 코드가 정상적으로 서버 통신을 통해 데이터를 받아올 수 있는지에 대해 확인하고 오류가 있을 때 수정하는 방식으로 작업을 두 번하게 되는 상황이 많이 있었다.제로초님의 React Native 강의를 들으면서 Mirage JS로 단순 JSON 파일이 아닌, 데이터베이스와 라우팅이 있는 모의 서버로 서버 통신 로직을 테스트 할 수 있다는 것을 알게됐고, 그 내용을 정리해보려고 한다. 1. Mirage.js란?Mirage JS는 위에 개요에도 언급했다시피 프론트엔드 개발을 위한 API 모킹 라이브러리이다. 클라이언트 사이드에서 ..

개요기존에 프로젝트에서는 HTTP 통신에 있어서 fetch API 방식을 사용했었다. JavaScript 내장 되어 있어서 따로 설치할 필요가 없었고, 아무래도 첫 프로젝트이다 보니 단순하게 사용했던 것 같다. 그런데 또 다른 HTTP 통신 방법으로 axios라는 라이브러리가 있고, fetch API에 비해 편리한 점이 있기 때문에 앞으로 axios를 주로 사용할 것 같아서 얘에 대해서 정리하려고 한다. 1. Axios란?브라우저와 Node.js 환경 전체에서 사용할 수 있는 Promise 기반!의 HTTP 클라이언트 라이브러리이다.Axios를 통해 서버와 데이터를 주고받는 HTTP 요청을 편리하게 만들어 준다. 위에 개요에서 언급한 것처럼 fetch API와 비교했을 때의 axios가 갖는 장점은 다음..

개요토이 프로젝트를 진행하는데 애니메이션이 필요하다! 기존 React Native의 Animated가 있긴 한데 더 성능이 좋은 라이브러리 중에 Reanimated라는게 있어서 이거를 한번 써보고 정리해보려고 한다 1. Reanimated란?Reanimated는 고성능의 애니메이션을 위한 라이브러리다!기존에 Animated라는 라이브러리가 있지만 얘는 성능의 한계점이 있다. 왜 한계가 존재하냐??전에 살펴본 것처럼 React Native는 JavaScript 스레드와 네이티브 UI 스레드 두 개로 나누어 동작을 한다. 그 사이에서 메시지를 주고받도록 하는 역할이 '브릿지'인데 애니메이션을 실행시키기 위해 JavaScript 스레드에서 매 프레임마다 UI 스레드에게 브릿지를 통해 '한 이 정도 움직여 줄래..