Persistence

Q. 왜 자바는 JDK, JRE와 같은 것을 설치해야 하고, 자바스크립트는 설치가 필요없는걸까? 이것에 대해 이해하려면 일단 Java와 Javascript의 언어 차이를 이해해야 한다. 자바스크립트는 인터프리터 언어이고 자바는 컴파일 언어이다. 인터프리터 언어와 컴파일 언어의 차이는 무엇일까? "인터프리트"는 사전에 머신코드나 바이트코드로 변경하는 일 없이 "line by line"으로 읽고 실행한다는 뜻이다. "컴파일"은 런타임 전에 머신코드나 바이트코드로 변경하는 중간 스텝이 한번 더 추가되고, 이 컴파일된 코드를 머신이나 가상 머신이 실행한다. 자바스크립트의 런타임 환경은 웹 브라우저이다. 그리고 웹 브라우저 내에는 JS engine (e.g. 크롬 V8)이 내장되어 있다. 이 엔진이 자바스크립트 ..

Nested Navigator 네비게이터는 own 히스토리를 갖는다. 뒤로가기를 하면 parent 네비게이터가 있더라도 nested stack 내부의 전 스크린으로 이동한다. 네비게이터는 own 옵션을 갖는다. title 옵션을 child navigator에서 지정하더라도 parent에게는 영향을 주지 않는다. 네비게이터는 own param을 갖는다. nested 네비게이터 안의 스크린에 패스된 파라미터는 parent나 child 네비게이터의 라우트 파라미터에 접근이 불가능하다. 네비게이터 액션은 현재 네비게이터에 의해 핸들링되고 만약 핸들링 불가능한 경우 버블링된다. 예를 들어 nested 네비게이터의 첫번째 페이지에 있는 경우 뒤로가기를 하면 부모 네비게이터로 이동한다. 예를 들어 아래 구조에서 Fe..

키보드가 올라와있을 때는 원래는 버튼을 클릭할 수 없다. 키보드가 올라와있을 때 화면을 터치하면 키보드를 dismiss하는 것만 가능하다. 다만 키보드가 올라와있는 상태에서 버튼을 클릭하게끔 하고 싶다면 ScrollView로 해당 컴포넌트를 감싼 다음, keyboardShouldPersistTaps를 handled로 주면 된다. handled는 ScrollView의 children에서 tap이 있을 때는 키보드를 dismiss시키지 않고 tap을 허용한다. 다만 ScrollView가 nested돼 있다면 parent ScrollView에도 해당 prop이 동일하게 적용돼있어야 정상 작동한다.

const proxy = require('http-proxy-middleware'); module.exports = function(app) { app.use( proxy('/posts', { target:'https://target.domain.com', changeOrigin: true }) ); };흔히 cors 문제를 해결하기 위해 프록시를 사용할 수 있는데, http-proxy-middleware를 사용해서 위처럼 설정하면 /posts로 시작하는 API는 target 필드에 설정한 서버로 호출하게 된다. 즉 /posts/1 을 호출하면, https://target.domain.com/posts/1 을 호출하게 된다. const proxy = requir..

리렌더: 이미 스크린에 그려진 컴포넌트가 다시 렌더링되는 것 리렌더링은 언제 일어나는가? 컴포넌트의 state이 변했을 때, 해당 컴포넌트가 리렌더링됨 부모가 리렌더링됐을 때, 자식 컴포넌트도 리렌더링됨 (엣지 케이스가 있으나 일반적으로 그러함) Context Provider 값이 바뀌었을 때 그 컨텍스트를 사용하는 모든 컴포넌트가 리렌더링됨. 훅 내부에서 state 변동이 있거나 context 값 변동이 있으면 그 훅을 소비하는 컴포넌트가 리렌더링 됨. function Parent() { const [state, setState] = useState(); // state이 변하면 Parent 컴포넌트 리렌더링됨 // Parent 컴포넌트가 리렌더링되면 Child 컴포넌트도 리렌더링됨 return } 반..

export const useTodosQuery = (select) => useQuery({ queryKey: ['todos'], queryFn: fetchTodos, select }) export const useTodosCount = () => useTodosQuery((data) => data.length) function TodosCount() { const todosCount = useTodosCount() return {todosCount.data} }위 쿼리는 백그라운드에서 refetch할 때마다 두번씩 컴포넌트 리렌더링을 트리거한다. { status: 'success', data: 2, isFetching: true } { status: 'success&..

usePrevious const usePrevious = value => { const ref = useRef(); useEffect(() => { ref.current = value; }) return ref.current; } react docs에 보면 이런 코드에 대한 힌트를 얻을 수 있다. 이 훅은 전(Previous) state나 props의 값을 저장한다. 하지만 이 코드가 어떻게 전 value를 저장하는 결과를 가져오는 것일까? 첫 번째 포인트는 ref 값의 변화는 re-render를 트리거하지 않는다는 점이다. 반면 state의 변화는 re-render를 일으킨다. 예를 들어 const Counter = () => { const ref = useRef(0); const [counter, s..

상황 React Native에서 react navigation 스택을 사용함 퍼널 앞에서 호출한 쿼리를 퍼널 뒤에 새로운 화면에서 호출했는데 refetch하지 않고 기존 데이터를 재사용함. 캐시타임 내에 호출이 되어서 그런 줄 알고 cacheTime을 0으로 주고 했는데 동일한 현상 발생. 이유 일단 cacheTime은 inactive한 쿼리에 대해서만 의미가 있는데, 그 쿼리는 계속해서 active한 쿼리였다. 왜냐하면 스택 네비게이션에서는 계속해서 컴포넌트가 마운트된 상태로 쌓이기 때문이다. 챰고로 inactive 쿼리는 옵저버가 없는 쿼리를 의미하며, devtool로도 확인할 수 있고 Query Cache를 조회해서 옵저버 필드를 확인해볼 수도 있다. stale time은 디폴트가 0이므로 그 쿼리..