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이므로 그 쿼리..

ISR을 알기 전 Next.js 선수지식 렌더링 CSR, SSR, SSG 렌더링이란 UI를 HTML로 나타내는 과정이다. 렌더링은 클라이언트에서 일어날 수도 있고 서버에서 일어날 수도 있다. 클라이언트에서 렌더링이 일어나는 것을 Client Side Rendering이라고 한다. 서버로부터 빈 HTML과 UI를 구성하기 위한 정보가 담긴 javascript 파일을 받아서 유저 디바이스에서 렌더링 작업을 시작한다. 이것과 대비되는 개념으로 서버에서 렌더링이 일어나는 것을 Pre-rendering이라고 한다. 클라이언트에 전송되기 전에 미리(Pre) HTML을 만들어서 전송한다는 의미이다. CSR을 사용하려면 useEffect나 useSWR을 사용해서 클라이언트에서 data fetching을 한다. Pre-..

상황 ../../.yarn/cache/keen-slider-npm-6.8.3-1dae0bc90d-b798545bd6.zip/node_modules/keen-slider/react.js:1:74 Module not found: Can't resolve 'react' Did you mean './react'? Requests that should resolve in the current directory need to start with './'. Requests that start with a name are treated as module requests and resolve within module directories (node_modules, /Us..

문제 상황 깃헙 credential이 osxkeychain으로 설정되어 있는데 이를 사용하지 않고자 하는 경우, credential.helper 값을 삭제해줘야 한다. 해결 방법 git config --local credential.helper, git config --global credential.helper, git config --system credential.helper 이 세 명령어를 쳐보면서 어느 스콥에 세팅이 되어있는지 확인한다. 나의 경우에는 시스템에 설정되어 있었다. 위 결과를 토대로 unset해준다. 나의 경우에는 system이었으므로 syatem option과 unset option을 함께 주었다. git config --system --unset credential.helper ..

자바스크립트는 새로운 피처를 계속 도입하며 진화한다. 하지만 일반적으로 자바스크립트 엔진은 더 느리게 이를 반영한다. 구형 엔진에서 새로운 자바스크립트 피처를 사용하고 싶으면 어떻게 해야할까? transpiler polyfills transpiler 소스코드를 구현 엔진이 이해할 수 있는 소스코드로 변형한다. 예를 들어 es2020로 쓰인 코드를 es5로 변경하여 es5만 지원하는 구형 엔진에서도 돌아갈 수 있도록 한다. // 트랜스파일러를 돌리기 전 height = height ?? 100; // 트랜스파일러를 돌린 이후 height = (height !== undefined && height !== null) ? height : 100; 가장 유명한 트랜스파일러는 babel이다. webpack 같은 ..

토큰이란 무엇인가? 웹개발에서 토큰이란 세션을 나타내는 임의 값일 뿐이다. 예를 들어 "abc123" 과 같은 문자열도 토큰이 될 수 있다. 토큰의 목적은 서버가 사용자를 기억하고 분별하게 하려는 것이다. JWT란 무엇인가? JSON Web Token은 웹에서 사용하기 쉽도록 일정한 형태로 구조화한 토큰이다. JWT는 JSON 데이터를 담고 있어서 JWT를 복호화하면 JSON 데이터를 얻게 된다. JWT는 헤더, 페이로드, 시그니처 3부분으로 구성돼있는데 특히 이 시그니처 부분은 서버에서 암호화한 서명으로, , 시크릿 키가 없으면 복호화할 수 없다. 그러므로 내가 다른 사용자의 ID를 훔쳐서 나에게 발급된 JWT에 훔친 ID를 페이로드로 수정하여 서버에게 보낸다하더라도, 시그니처가 내 정보에 기반해서 돼..

canonical tag란 비슷하거나 중복된 페이지들에 대해 서치 엔진에게 어떤 페이지가 메인 버전 (canonical version) 이라고 알려주는 태그이다. 그럼 어떤 것이 중복된 페이지일까? 같은 컨텐츠를 가졌음에도 불구하고 검색 엔진이 다르게 취급하는 url들이 많이 있다. http://site.com https://site.com https://site.com/index.html https://www.site.com http 프로토콜이 다르거나, 뒤에 pathname이 붙거나, 앞에 www가 붙거나, 쿼리 파라미터가 붙는 등 모두 같거나 비슷한 페이지를 서빙함에도 불구하고 검색 엔진은 다른 것으로 취급하고, 이 때 중복 컨텐츠의 문제가 생긴다. 중복 컨텐츠 문제는 왜 문제일까? 검색 엔진이 인..

commonJS commonJS는 Node.js의 디폴트 모듈 시스템이다. require(), module.exports 문법을 사용한다. commonJS 문법은 런타임에 파싱되므로 require 는 코드 어디에서나 사용할 수 있다. if 문 안에서도, loop 안에서도 사용할 수 있다. commonJS는 sync하게 하나씩 순차적으로 모듈을 로드하기 때문에 큰 어플리케이션에서는 퍼포먼스 이슈가 있을 수 있다. ES module (ESM) ES module은 자바스크립트 공식 모듈 시스템이고 거의 모든 모던 웹 브라우저가 ES module을 지원한다. 다만 Node.js에서는 commonJS가 디폴트였고, ESM은 실험적으로만 제공하다가 v13.2.0 에서부터 ESM을 stable로 제공하기 시작했다. ..