일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- react server component
- 아키텍처
- 목킹
- thread
- JavaScript
- 리액트
- async
- 비동기
- 자바스크립트
- mockoon
- Babel
- SWC
- Concurrent Mode
- styled-component
- 기본
- 리액트네이티브
- sprinkles
- Cache
- mock service worker
- React
- Critical Rendering Path
- MSW
- next hydration
- 쓰레드
- 컴포넌트
- 개발자
- react-query
- amplify
- link
- vanilla-extract
- 기초
- CSS-in-JS
- 동기
- 캐쉬
- react-native
- Basic
- front-end mocking
- 최적화
- 리액트쿼리
- next.js
- Today
- Total
목록리액트네이티브 (2)
Don’t worry about failures
react-native-video 오픈소스를 사용하며, 가벼운 문제를 발견했다. 이 문제 때문에 기능에 제한이 생겼고 이를 발견한 나는 pr까지 올리는 경험을 하게 되었다. 문제 video filter 프로퍼티 값을 넘겨도 제대로 출력이 되지 않음. 원인파악 1. debuging Xcode를 통해 해당 라이브러리 디버깅을 한다. 2. not break 해당 부분을 디버그를 했지만, break가 되지 않는 것을 발견 3. 추적 react-native단에서 부터 추적해 나간다 4. 문제 발견 react-native-video는 자체적으로 typescript로 되지 않아 @types/react-native-video을 통해 type compile과정을 겪는다. 여기서 문제가 발생했다. 위의 사진을 보면 fil..
어떠한 라이브러리 혹은 프레임워크를 제대로 사용하기 위해 해당 라이브러리가 어떻게 작동하는지에 대해 알아보는 것이 중요하다고 생각한다. 이에 react native가 어떻게 구동하고 있는지 파악하기 위해 이 글을 써내려가겠다. 리액트 네이티브의 구 아키텍처와 새로운 아키텍처에 대해 살펴볼것이다. 구 아키텍처 우선, 위의 사진으로 간단한 흐름을 파악해보자 1. 유저가 버튼을 클릭 2. 클릭에 의한 이벤트는 native threads에서 브릿지를 통해 js thread를 실행. 3. 해당 결과 값을 브릿지를 통해 다시 native threads에 전달하여 유저에게 해당 이벤트에 맞게 화면을 보여준다. 엄청 간단하게 흐름을 보면 이렇다. 이제 자세하게 파악해보자 ( 설명 후 위의 간단한 단계를 디테일하게 풀어..