All

react-query staleTime vs cacheTime

최근 tanstack사의 react-query가 버전 4를 정식 릴리즈 했다. 그리고 공식 이름을 tanstack-query로 변경하고 하위 패키지로 react-query를 제공한다. 이름을 변경한 이유는 react-query v4부터 react 뿐만 아니라 vue, solid, svelte도 지원하기 때문이 아닐까 추측해본다. 회사에서 진행하는 프로젝트에 활발하게 react-query를 도입 중이다. react-query에는 비슷하지만 다른, 헷갈리는 개념들이 몇 개 있다. isFetching과 isLoading, staleTime과 cacheTime이 그러하다. 이번 글은 staleTime과 cacheTime의 개념과 차이점을 정리한 내용이다. staleTime stale의 뜻은 "신선하지 않은"이다..

react-query props drilling 피하기

react-query는 상태 관리 도구이다. 상태 관리 도구를 사용하는 이유 중 큰 부분을 차지하는 것이 props-drilling을 피하기 위해서일 것이다. 이 포스트는 react-query를 사용할 때 props drilling을 피하기 위해 고민했던 내용을 다룬다. 서버에 부담 주지 않기 react-query는 동일 키의 쿼리를 동시에 여러 개 요청하면 내부적으로 하나의 요청으로 만든다. export default function App() { const { data: posts1 } = useQuery(['posts'], fetchPosts); const { data: posts2 } = useQuery(['posts'], fetchPosts); const { data: posts3 } = use..

react-query로 클라이언트 상태 관리 하기

'서버 상태 관리'라는 멋진 키워드로 등장한 react-query는 리액트 생태계에 큰바람을 불러일으키고 있다. 많은 프로젝트에서 redux + redux-saga 조합을 사용한다. 이 조합은 UI와 비동기 작업의 관심사 분리에 있어 해법처럼 사용되곤 했다. 하지만 프로젝트 규모가 커짐에 따라 redux 본연의 가치가 redux-saga의 거대한 덩치에 가려지기 일쑤이다. 그리고 이 조합은 리액트의 학습 곡선을 가파르게 한 주범이기도 하다. 그래서 redux + redux-saga 조합을 새로운 패러다임인 react-query로 대체하려는 움직임이 많이 보인다. 마이그레이션 과정에서 클라이언트 상태 관리 방법에 대한 고민이 늘 따랐다. 이번 포스트는 해당 고민을 정리한 글이다. 서버 상태, 클라이언트 상..

부스트캠프 웹 풀스택 6기 후기

2021년 7월 19부터 2021년 12월 3일까지, 138일간 주중 주말할 것 없이 달렸다. 이 글에서 138일간의 회고와 다음 기수를 위한 정보를 두서없이 작성했다. 왜 했을까? 지금 생각해보면 부스트캠프에 지원하는 것은 정말 대책 없는 행동이었다. 수료 이후 바로 진행되는 '네트워킹 데이'에서 기업이 채용 설명을 한다. 선착순으로 기업별 개인 상담도 진행했다. 그리고 수십 개의 회사가 부스트캠프 수료생을 대상으로 채용을 진행한다. 대부분 기업은 졸업 예정자 또는 졸업자에게만 지원 자격을 준다. 하지만 나는 졸업 예정은커녕 3학년 1학기를 수료한 그냥 대학생이다. 기업들의 채용 공고가 올라오고 지원조차 못 할 때마다 졸업장 없는 설움을 절실히 느꼈다. 부스트캠프를 지원한 주목적이 취업이 아니었음에도,..

타입스크립트에서 prop-types를 사용할까?

리액트에서 prop-types 라이브러리를 사용해 props의 타입을 체크할 수 있다. 그리고 타입스크립트를 사용해 props의 타입을 체크할 수 있다. 같은 일을 하는 것 같지만 다른 일을 한다. 각각 무슨 일을 하는지 알아보고 타입스크립트에서 prop-types를 사용할지 체크해보길 바란다. 타입스크립트 타입스크립트는 동적 언어인 자바스크립트를 정적 언어로 사용하기 위한 언어이다. 정적 언어는 컴파일 시에 타입이 결정되고, 동적 언어는 런타임에 타입이 결정된다. 타입스크립트는 런타임에 타입 체크를 하지 않는다. 이는 타입스크립트 Design Goals 3번 '실행한 프로그램에 런타임 오버헤드를 부과하지 않는다.'에 부합한다. 타입스크립트로 Props의 타입을 체크하기 위해 일반적으로 아래와 같이 작성..

부스트캠프 웹 풀스택 6기 멤버십 스프린트 4회차

부스트캠프 웹 풀스택 6기 멤버십 스프린트 3회차 부스트캠프 웹 풀스택 6기 멤버십 스프린트 2회차 부스트캠프 웹 풀스택 6기 멤버십 스프린트 1회차 부스트캠프 웹 풀스택 6기 멤버십 합격 챌린지에 입과한 모든 캠퍼가 멤버십에 입과 하는 것 blog.hyunmin.dev 😸 TL;DR 마지막 스프린트는 팀 프로젝트로 진행했다. 2인 1조로 랜덤 하게 팀이 구성되어 2주간 협업했다. 하루에 많으면 10시간씩 얘기하며 협업하다 보니 부스트캠프 활동 처음으로 지친다는 생각이 조금 들었다. 하지만 다행히도 좋은 팀원을 만나서 2주를 잘 마무리할 수 있었다. 🏀 미션 React 이번 미션부터는 React 라이브러리 사용이 허용됐다. 바닐라 JS로 SPA를 구현 후에 React를 다시 보니 이전에 보이지 않던 부분..

부스트캠프 웹 풀스택 6기 멤버십 스프린트 3회차

부스트캠프 웹 풀스택 6기 멤버십 스프린트 2회차 부스트캠프 웹 풀스택 6기 멤버십 스프린트 1회차 부스트캠프 웹 풀스택 6기 멤버십 합격 챌린지에 입과한 모든 캠퍼가 멤버십에 입과 하는 것은 아니다. 특정 기준으로 멤버십에 입과할 자격을 blog.hyunmin.dev 😸 TL;DR 구현의 집착을 버리고 한결 가볍게 개발했다. 학습해야 할 키워드가 끝도 없이 제공돼서 2주 만에 엄청나게 성장해버린 기분이다. 이 정도면 튼 살이 생길 지경이다. 🏀 미션 SPA 바닐라 JS로 SPA를 구현하는 것은 항상 머리가 아프다. 저번 미션까지는 준일님의 블로그를 참고하여 SPA 모듈을 설계했다. 하지만 이번에는 양방향 데이터 바인딩, 관찰자 패턴을 도입해 Vue.js 스럽게 탈바꿈하여 기술 독립을 했다. 자바스크립트..

자바스크립트의 Data Binding

Angular React Vue 단방향, 양방향 단방향 단방향, 양방향 프론트엔드 프레임워크 및 라이브러리 삼대장은 모두 데이터 바인딩을 지원한다. 그만큼 필요하다는 뜻이라고 생각한다. 이번 포스트에서 데이터 바인딩에 대해서 알아보겠다. 이 포스트는 데이터 바인딩 개념 자체를 알아보는 글이다. vue에서의 데이터 바인딩을 알아보고 싶다면 v-model, angular에서의 데이터 바인딩을 알아보고 싶다면 Binding syntax 을 참고하면 된다. 사전 지식 Observation pattern 클래스 Data Binding 컴퓨터 프로그래밍에서 데이터 바인딩은 제공자와 소비자로부터 데이터 원본을 결합시켜 이것들을 동기화하는 기법이다. (위키백과) 여기서 소비자와 제공자는 뷰와 데이터이다. 즉, 데이터와..