일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 리액트쿼리
- async
- next.js
- 리액트네이티브
- 기본
- 목킹
- 아키텍처
- 비동기
- MSW
- 캐쉬
- SWC
- mockoon
- React
- amplify
- 개발자
- react-native
- thread
- link
- Cache
- styled-component
- Critical Rendering Path
- 최적화
- 동기
- CSS-in-JS
- react-query
- front-end mocking
- JavaScript
- Basic
- 컴포넌트
- next hydration
- sprinkles
- 기초
- 리액트
- 자바스크립트
- Babel
- Concurrent Mode
- mock service worker
- 쓰레드
- react server component
- vanilla-extract
- Today
- Total
목록아키텍처 (2)
Don’t worry about failures
어떠한 라이브러리 혹은 프레임워크를 제대로 사용하기 위해 해당 라이브러리가 어떻게 작동하는지에 대해 알아보는 것이 중요하다고 생각한다. 이에 react native가 어떻게 구동하고 있는지 파악하기 위해 이 글을 써내려가겠다. 리액트 네이티브의 구 아키텍처와 새로운 아키텍처에 대해 살펴볼것이다. 구 아키텍처 우선, 위의 사진으로 간단한 흐름을 파악해보자 1. 유저가 버튼을 클릭 2. 클릭에 의한 이벤트는 native threads에서 브릿지를 통해 js thread를 실행. 3. 해당 결과 값을 브릿지를 통해 다시 native threads에 전달하여 유저에게 해당 이벤트에 맞게 화면을 보여준다. 엄청 간단하게 흐름을 보면 이렇다. 이제 자세하게 파악해보자 ( 설명 후 위의 간단한 단계를 디테일하게 풀어..
어떠한 프레임에 갇히기 싫어 expo를 사용하지 않고 react-native cli를 통해 시작했기 때문에 구조를 잡기 위해 더 많은 고생을 했다. mvvm 패턴 구조를 잡기위해 하나의 모델링이 필요했다. 알아보면서 해당 패턴이 가장 작업하기에 혹은 유지보수하기에 명확하다는 생각이 들어 이를 반영하기로 했다. 최근 트렌드라고 하기엔 그렇지만 리액트도 그러고 많은 부분이 view단에서 정말 view의 역할만 하도록한다. 이 이유는 재사용성을 강조하고, 유지보수가 강조되고 있기 때문이라 생각한다. 이에 나 또한 mvvm패턴을 제대로 반영하기 위해 노력 중이다. 위의 구조로 구성하였다. 하나하나 살펴보자. 1. component View에 해당한다 우선, screen을 기반으로 해서 component dire..