웹으로 보긴 싫고 Expo 어플로 보는데 불편해서 Android Studio를 설치해서 작업해 볼까 함.. https://developer.android.com/studio?hl=ko Android 스튜디오 및 앱 도구 다운로드 - Android 개발자 | Android Studio | Android DevelopersAndroid Studio provides app builders with an integrated development environment (IDE) optimized for Android apps. Download Android Studio today.developer.android.comhttps://ella-devblog.tistory.com/187 Android Studi..
React Native의 동작 원리는 리액트의 Virtual DOM과 관련되어 있다. DOM 수정은 값비싼 동작이기 때문에 React는 변화를 바로 렌더링 하는 대신 메모리의 가상 DOM을 이용해 변화가 필요한 곳을 계산하고 최소한의 변경사항만 렌더링한다. React Native는 같은 원리를 이용해 브라우저의 DOM이 아닌 Objective-C API를 호출하여 IOS 컴포넌트를 렌더링하고, 자바 API를 호출하여 Android 컴포넌트를 렌더링한다. 이는 Bridge가 대상 플랫폼의 네이티브 UI 요소에 접근하는 인터페이스를 제공하기 떄문에 가능하다. React Native BridgeRN Bridge는 C++ / Java로 제작되어 네이티브와 자바스크립트 스레드 사이의 통신을 가능하게 해준다.메시지..
태그등.. 사용할 수 없음. 컴포넌트를 import 해서 사용.React Native에서 모든 텍스트는 컴포넌트에 사용해야 함.앱에 브라우저가 없기 때문에 , 등의 태그가 없음.import { StyleSheet, Text, View } from "react-native"; 컴포넌트에 텍스트를 적으면 에러가 발생한다.Text strings must be rendered within a component라고 에러를 띄움.위 사이트는 snack.expo.dev라는 React Native를 공부할 때, Test용도로 개발 후, 결과를 브라우저 혹은 핸드폰으로 바로 확인해 볼 수 있는 사이트이다. 는 기본적으로 Flex Container이고 Direction은 웹과 다르게 Column이다.Overflo..
React Native?React의 문법으로 안드로이드 iOS 앱을 개발할 수 있는 프레임워크이다. React를 배웠던 개발자라면 몇 시간 만에 익숙해질 수 있을 만큼 React와 거의 유사한 문법을 가지고 있으며, 실제로 차이나는 부분은 브라우저의 HTML Element를 사용하는 것이 아니라 View, Text 등의 자체 태그를 사용하는 점과 CSS를 사용하지 않고 오직 CreateStyleSheet를 이용한 스타일만 지원하고, 일부 속성이 가감되었다는 것 정도. 현재는 웹과 동일한 CSS 요소 사용을 위한 Styled Component 및 PostCSS를 지원하므로 웹개발자나 퍼블리셔도 무리 없이 UI구성이 가능하다.라고 한다.. 나도 아직 사용해보지 않아서 모르겠다. 기술면접을 공부하다가 모바일로..
React Query에서 캐싱 기능을 제대로 사용하기 위해 stale time, cache time 등에 대해 잘 알고 있어야 한다. 몇 번을 봤지만 자주 잊어버리기에 간단히 정리해 보고자 한다. Cache? React Query는 설정한 cacheTime 만큼 데이터를 메모리에 저장해 놓는다. React Query에서의 cache는 QueryCache 객체의 query 배열과 queriesInMap 객체에 Query 객체가 존재하는 것을 말한다. 여기서 cache가 존재한다고 해서 refetching을 하지 않는 것은 아니다(데이터가 stale 상태라면 refetching). Stale? stale의 사전적 정의는 위와 같이 '탁한', '신선하지 않은'이라는 뜻이다. 가져온 데이터가 stale 하다면,..
Selector selector는 recoil에서 함수 또는 파생된 상태(atom의 상태에서 파생된 데이터, 즉 atom의 상태에 의존하는 동적인 데이터), atom의 상태에 대해 항상 동일한 값을 반환하는 순수함수. 공식문서: https://recoiljs.org/docs/basic-tutorial/selectors/ selector를 사용하는 이유 최소한의 state만 atom에 저장하고 다른 모든 파생되는 데이터는 selector의 함수를 통해 효율적으로 계산함으로써 쓸모없는 상태의 보존을 방지할 수 있다. state 관리를 위해 recoil을 사용하고 화면과 분리하여 state를 관리하고자 recoil을 사용하는데, 화면에서 다시 state를 관리하는 로직이 있다면 본래 취지와 어긋나서 로직이 파..
React 컴포넌트의 역할 리액트에서는 화면에 보이는 인터페이스를 설계할 때 ‘컴포넌트’ 단위로 설계가 이루어진다. 컴포넌트는 선언 방식에 따라서 함수형 컴포넌트, 클래스형 컴포넌트로 나눠진다. 함수형(Function) 컴포넌트 자바스크립트의 함수 형태로 표현되는 컴포넌트이다. return 뒤에 JSX 코드를 넣어줘서 반환을 하게 된다. function about() { return ( Hello React ) } export default about; 자바스크립트에 익숙한 개발자라면 확실히 직관적이며, 메모리 지원도 클래스형 컴포넌트보다 덜 사용하게 된다. 빌드 후 배포할 때도 함수형 컴포넌트가 파일크기도 더 작아진다. 클래스형(Class) 컴포넌트 import React, {Component} fro..
저번 브라우저의 레더링 과정 포스팅에서 DOM이 HTML을 파싱 한 결과물이란 것을 알게 되었다. 그렇다면 Virtual DOM이 무엇이고 왜 등장한 건지 정리해보려고 한다. Virtual DOM DOM은 노드 하나를 조작할 때마다 리플로우나 리페인트가 수행되면서 브라우저의 성능 저하를 유발하기 때문에 동적인 UI를 구성하는 것에 적합하지 않다. 이러한 문제점을 해결하기 위해 Virtual DOM이 등장하게 되었는데 이 Virtual DOM은 실제 DOM을 모방하는 형태로 메모리 상에서만 존재하는 가상의 DOM을 의미한다. 실제로 화면에 렌더링 하는 과정을 거치지 않고 메모리 상에서만 그려지는 DOM이기 때문에 오버헤드(어떤 처리를 하기 위해 들어가는 간접적인 처리 시간/메모리 등)가 훨씬 작다는 특징이..