Persistence

모노레포를 구축하는 도구에는 yarn, lerna, turborepo, nx, pnpm 등이 있다. 이 중에서도 yarn에 대해 알아보자. yarn의 workspaces 필드를 사용하여 모노레포를 구성할 수 있다. yarn link를 통해 node_modules에 워크스페이스에 대한 심볼릭 링크를 생성할 수 있는데 워크스페이스는 이를 더 선언적인 방식으로 사용하는 방법이다. // in package.json { "workspaces": ["packages/*"] // packages 폴더 내에 있는 모든 폴더들을 전부 워크스페이스로 만든다. }note: 워크스페이스: 패키지, 워크트리: child 워크스페이스를 갖고 있는 워크스페이스 위 예제에서 packages는 워크트리이다. workspace rang..

Ref 커밋을 참조하는 ref에 대해 알아보자. Hash 커밋을 참조하는 가장 직접적인 방식으로, SHA-1 해시를 통해 참조할 수 있다. 이는 각 커밋의 고유한 id이며, git log 명령을 통해 각 커밋의 해시를 확인할 수 있다. Refs 커밋을 참조하는 간접적인 방식이다. 커밋 해시에 붙이는 alias 같은 것이라고 생각하면 된다. .git 폴더에 보면 refs라는 폴더가 있다. 그 안에 보면 heads, remotes, tags 등 또 하위 폴더가 존재한다. heads는 레포의 로컬에 있는 모든 브랜치를 정의하고 있는 폴더이다. heads의 내부를 보면 로컬에 있는 브랜치들이 폴더로 존재하고, 그 안에는 해당 브랜치의 가장 끝에 있는 커밋 해시를 저장하고 있다. cat .git/refs/head..

detached HEAD 브랜치가 아닌 커밋에 체크아웃했을 때 'detached HEAD' 상태에 있다고 한다. 예를 들어 git checkout 이렇게 브랜치로 체크아웃하는 것이 아닌 git checkout 이렇게 특정 커밋으로 체크아웃할 수 있다. git checkout git checkout HEAD~3 // 현재 헤드에서 3번째 전 커밋 HEAD는 해당 브랜치의 가장 최신 버전을 가리키는데, 커밋으로 체크아웃한 상태인 detached HEAD(분리된 HEAD)는 레포의 HEAD를 보고 있지 않다는 뜻이다. detached HEAD 상태에서는 안전하게 해당 커밋에 여러가지 변경을 가할 수 있다. 이 변경을 저장할 수도 있고, 버릴 수도 있는데, 저장하기 위해서는 새로운 브랜치를 만들어야 한다. gi..

문제 현상 vscode에서 쉬프트 커맨드 p로 shell command: Install code command in PATH 를 실행해서 code . 로 프로그램을 실행하면 맥을 재부팅했을 때 사라진다. 그러면 또 vscode를 켜서 uninstall 해주고 install을 다시 해주는게 너무 귀찮다. 그러므로 .zshrc 파일에 저장해서 재부팅에 관계없이 계속 커맨드를 사용할 수 있도록 한다. How vs code docs 에 보면 터미널에서 하는 방법이 나와 있는데, .bash_profile이나 .zshrc 파일을 켜서 path에 추가해주면 된다. 추가한 후 echo $PATH로 확인해보면 vscode path가 추가돼있다. 다만 여기서 주의할 점이 있다. vscode가 Applications(응용 ..

일반적으로 mutate를 하고나서는 쿼리를 invalidate해서 refetch해오게 되는데, 이때 사용하는 것이 invalidateQuries이다. // return이 있을 때 onSuccess: () => { return queryClient.invalidateQueries(['posts', id, 'comments']) } // return이 없을 때 onSuccess: () => { queryClient.invalidateQueries(['posts', id, 'comments']) } invalidateQuries는 프로미스를 리턴하기 때문에 return을 시켜주면 해당 state가 업데이트 될떄까지 loading state가 유지된다. ..

useState, useReducer 모두 상태를 관리하는 훅이기 때문에 어떤 상황에서 어떤 것을 쓰는게 나을지 궁금했다. useState는 관리할 상태가 간단할 때 일반적으로 사용하면 좋다. useReducer는 간단하게 만들더라도 useState보다는 보일러플레이트가 길어서 verbose해보인다. 반면 관리할 상태가 여러개이고, 서로가 의존하고 있으며, 상태를 조작할 동작이 여러개일 때는 useReducer를 사용하는 것이 낫다. 상태가 변하는 로직을 reducer 한 군데 몰아넣음으로써 상태 간의 관계를 한 번에 파악하기 용이하고, reducer에 로직을 몰아넣음으로써 훅을 깔끔하게 유지할 수 있다. 액션이 여러 개일 때 위 이유와 마찬가지로 리듀서 한 군데에서 액션을 관리할 수 있다. 액션을 us..

현상 로컬 빌드 시 Module not found 에러가 나면서 깨지는데, 동료들은 깨지지 않았음. 시도해본 것 yarn cache clean & yarn yarn npm login node_modules 삭제 해결 .next 디렉토리를 날리고 yarn 하니까 node_modules가 새로 생성되면서 정상적으로 돌아옴. 해결이 좀 느려진 원인에는 .next 파일이 vscode 디렉토리에서 보이지 않았기 때문. .vscode의 settings.json을 확인해보니, files.exclude 설정에 .next가 포함돼있었다. 팀 전체가 사용하는 설정이라서 별로 들여다보지 않았었다. Toggle Excluded Files라는 vscode 익스텐션을 설치해서 혹시나 안보이는 파일들을 확인하고 싶을 때 쉽게 할 ..

react의 에러 바운더리는 렌더링 도중 생기는 에러가 UI 전체를 깨뜨리는 것을 막기 위한 용도이다. 그래서 처음에는 막연하게 try catch 대신 선언적으로 에러 핸들링을 도와주는 컴포넌트로 인식하고 있었다. 그런데 어느날 onClick에서 에러를 던지는데 에러 바운더리에서 핸들링이 되지 않았다. 찾아보니 에러 바운더리는 다음과 같은 에러를 잡지 않는다. 이벤트 핸들러 비동기적 코드 서버 사이드 렌더링 자식이 아닌 에러 바운더리 자체에서 발생하는 에러 이벤트 핸들러에서 발생하는 에러는 렌더링 도중에 발생하는 것이 아니므로, UI가 깨지지 않기 때문에 에러 바운더리에서 잡지 않는다고 한다. 대신 try catch를 써주라고 문서에 쓰여있다. 그리고 또 하나 의아했던 점은 비동기 코드의 에러 또한 잡지..

Blob Blob 객체는 파일류의 불변하는 미가공 데이터를 나타낸다. 텍스트와 이진 데이터 형태로 읽을 수 있으며, ReadableStream으로 변환해서 스트림 메서드를 사용할 수도 있다. File이 Blob에 기반한 인터페이스로, Blob 인터페이스를 상속해 확장한 것이다. File File 인터페이스는 파일에 대한 정보를 제공하고 자바스크립트가 접근할 수 있는 메서드를 제공한다. 서버에서 파일을 다운로드하려면 단순히 파일을 응답으로 보내주는 것뿐만 아니라, 헤더에 Content-Disposition 필드가 필요하다. Content-Disposition 헤더의 타입에는 inline, attachment 2가지 종류가 있는데, inline은 컨텐츠를 display하는 것이고 attachment는 다운로..

Browsing Context 브라우저가 Document를 표시하는 환경이다. 모던 브라우저에서 이는 보통 tab 단위이지만 window나 iframe, frame이 될 수도 있다. 각 브라우징 컨텍스트는 특정한 오리진, active document의 오리진, 여태까지 전시한 도큐먼트를 기억하는 히스토리를 차례대로 저장하고 있다. 브라우징 컨텍스트 간의 소통은 매우 제한적이지만, 같은 오리진을 가진 브라우징 컨텍스트 사이에서는 BroadcastChannel을 오픈해서 사용할 수 있다. BroadcastChannel 같은 오리진의 브라우징 컨텍스트끼리 소통할 수 있는 방법이다. 채널을 오픈한 다음 메세지를 보내면, 해당 채널을 구독하는 컨텍스트에서 메세지를 받아볼 수 있다. 아래처럼 채널을 생성할 수 있다..

react query의 캐시는 in memory라서 브라우저 탭 간에 공유되지도 않고 새로고침할 때마다 새롭게 생성된다. (The cache is in-memory and only exists within the life of the javascript context for a tab.) in memory라는 단어의 사용은 솔직히 헷갈린다. 보통 인메모리 캐싱은 하드디스크 말고 메모리에 캐시를 저장하는 걸 의미하는데, 여기서의 맥락은 그런 in memory가 아닌 것 같고 그저 자바스크립트가 실행되고 있는 동안에 가지고 있는 상태라는 의미인 것 같다. (localStorage 처럼 지속 저장하는 형태가 아니라는 뜻) 리액트 쿼리에서 탭 간에 캐시가 공유되지 않다보니, invalidateQueries를 했..

box-shadow vs outline box-shadow랑 outline은 둘 다 border랑 달리, 물리적인 공간을 차지하지 않는다는 공통점이 있다. 즉 border는 2px 잡히면 그 만큼 다른 레이아웃에 영향을 주게 되는데, box-shadow랑 outline은 비슷한 시각적 효과를 주지만 다른 레이아웃에 영향을 주지 않는다. 두 속성은 값의 형태가 좀 다르다. outline은 border와 거의 유사한 반면 box-shadow는 좀 어렵다. /* color| style | width */ outline: green solid 3px; /* offset-x | offset-y | blur-radius | spread-radius | color */ box-shadow: 2px 2px 2px 1p..

justify-content: end vs flex-end end는 CSS Box Alignment Specification에 정의돼 있다. flex-end는 Flex-box Specification에 정의돼 있다. flex box 속성은 알겠는데 CSS Box Alignment가 뭔지 모르겠어서 찾아보니 CSS 에 존재하는 여러 디스플레이 모델들(flex, grid, block 등)에 공통적으로 적용되게 하려고 만든 속성이라고 한다. 아직 working draft 상태(2022.01.24 기준)이므로 유효하게 적용되지 않는 브라우저가 존재할 수 있다. 플렉스 컨테이너에서 justify-content: end를 사용했더니, 특정 환경의 크롬에서는 적용돼지 않았다. 지원 스펙을 찾아보니(https://ca..

flow 레이아웃이 요소들 간 겹치지 않도록 했다면 포지션 레이아웃에서는 가능하다. 포지션 레이아웃은 다음과 같은 종류가 있다. static (그냥 디폴트) relative absolute fixed sticky position relative 특정 자식을 제한한다 추가적인 css 프로퍼티를 사용할 수 있다 포지션 레이아웃을 사용하면 top, left, right, bottom 속성 등을 사용할 수 있다. relative로 설정된 상태에서는 이런 값들은 원래의 자리 에서 상대적인 위치를 의미한다. 예를 들어 left: 10px은 오른쪽으로 요소를 10px만큼 이동시킨다. 하지만 요소 이동은 마진으로도 가능한데 왜 이걸 사용해야 할까? 마진과 포지션의 가장 큰 차이는, 포지션은 레이아웃에 영향을 주지 않는..

Data fetching Traditioanl Approach vs Suspense 데이터 fetching과 관련해서 3가지 접근방법이 있다. Fetch-on-render 이 방법의 문제점은 'waterfall' 이라고 불린다. 이 코드를 보면, App 컴포넌트가 마운트하고나서 todos를 fetching하기 시작하고, 데이터를 받아오는 도중에는 loading jsx를 리턴한다.즉 여러개의 async 리퀘스트들이 병렬적으로 수행되지 못함으로써 UI 렌더링하는데 시간이 오래 걸리게 된다. 만약 Tasks 컴포넌트가 또 다른 async 요청을 할 예정인데, todos를 fetch하는데 5초가 걸린다면 이 Task 리퀘스트는 5초가 지난 다음에야 시작할 수 있는 것이다. 왜냐면 fetch on ..