mystery

https://tkdodo.eu/blog/practical-react-query Practical React Query Let me share with you the experiences I have made lately with React Query. Fetching data in React has never been this delightful... tkdodo.eu 2018년경 GraphQL과 아폴로 클라이언트가 핫하던 시기에 사람들은 리덕스를 대체할 것이라며 난리법석이었다. 나는 전혀 이해하지 못했다 '데이터 패칭 라이브러리가 어떻게 전역상태 관리라이브러리인 Redux를 대체하지?' 아폴로는 데이터 패칭 기능뿐만 아니라, 서버 데이터 캐싱도 지원했다. 여러 컴포넌트에서 동일한 쿼리를 사용하면 캐싱..

라이브러리를 학습하다보면, 공식문서만큼 해당 라이브러리에 대한 철학이 잘 드러난 곳이 있다. 바로 컨트리뷰터의 블로그...! 아무래도 잘 알려진 컨트리뷰터들은 개인의 철학보다는 해당 라이브러리의 철학을 기반으로 글을 작성하는 경향이 있다. 자신이 곧 라이브러리가 되어버렸다고도 할 수 있겠다.(Dan Abramov형 처럼...) 인간 Tanstack Query, TkDodo형의 블로그에 총 23편의 장편으로 구성된 실전 압축 팁이 모여있다. (도도형이 직접 언급) 도도형은 어떤 생각을 가지고 라이브러리를 만들었으며, 각 꿀팁들에 대한 생각을 흡수해보자. 이번 시리즈는 도도형의 꿀팁들을 읽고 정리하며 내실을 다지는 포스팅이 될 것 같다. 시작!

이번 포스팅에서는 진행중인 프로젝트의 Page 단위 컴포넌트를 리팩터링 하는 과정과 느낀점을 담아보겠습니다. 도메인이 듬뿍 담긴 컴포넌트의 리팩터링 과정을 담다보니 다소 복잡합니다. 코드를 이해하기 보다는 가볍게 느낌만 봐주세요. (느낌만 봐도 충분히 복잡합니다..ㅎ) 과정과 설명 없이 Page컴포넌트의 Before / After 만 보고 싶으시면 아래 접힌글을 펼쳐서 코드를 확인해 주세요. 맨밑으로 가서 느낀점만 보셔도 됩니다... 더보기 Before After 1. Page 컴포넌트의 문제점 우선 리팩토링 대상 컴포넌트 코드를 살펴봅시다. 미리 주요 관심사들에 대해 주석으로 표시해 두었습니다. 코드를 하나하나 이해하는 것 보다는, 주석 부분만 읽으면서 '관심사가 이렇게 많구나~' 정도만 파악하시면 좋..

이번 포스팅에서는 react의 key props에 대해 탐구하는 시간을 가져보겠습니다. 1. Key란 ? React 구 공식문서에는 이렇게 나와 있습니다. Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다. React 신 공식문서에는 이렇게 나와있구요. key는 각 컴포넌트가 어떤 배열 항목에 해당하는지 React에 알려주어 나중에 매칭할 수 있도록 합니다. 이는 배열 항목이 (정렬 등으로 인해) 이동하거나, 삽입되거나, 삭제될 수 있는 경우 중요해집니다. 잘 만들어진 key는 React가 정확히 무슨 일이 일어났는지 추론하고 DOM 트리를 올바르게 업데이트하는 데 도움이 됩니다..

우아한테크코스 5기를 준비하는 과정에서 프리코스 과제들을 접하게 됐습니다. 프리코스의 모든 과제들은 바닐라 자바스크립트로만 구현하여 제출해야하는데..... 바닐라 자바스크립트만으로 무언가를 만들어본 경험은 개발을 처음 배우기 시작했을 때 밖에 없는 것 같아 자신감이 떨어졌슴다! 아니나 다를까! 역대 지원자들의 코드를 찬찬히 살펴보던 중.... 처음 보는 코드가 있더라구요...? createDocumentFragment() 이게 무엇인고 ? 바로 공부 들어갔습니다! 0. DocumentFragment 에 대한 이해! 아래는 DocumentFragment에 대한 설명입니다. DocumentFragment은 웹 문서의 메인 DOM 트리에 포함되지 않는, 가상 메모리에 존재하는 DOM 노드 객체입니다. Docu..

타입스크립트에서 객체의 type을 지정해주는 방법에는 2가지가 있다. 하나는 type 키워드를 통한 기본적인 방법이고, 나머지 하나는 Interface 키워드를 통한 방법이다. 1. type의 쓰임새 type 키워드는 여러가지 방법으로 다양하게 사용 가능하다. 객체 외의 다른 자료형의 타입도 지정 가능하다. 1-1. 기본적인 타입 지정 ( ailas ) type Dmg = number type Name = string type Player = { name: Name, dmg : Dmg, } const bob : Player = { name: 'bob', dmg: 10 } 1-2. 타입이 특정 값을 가지도록 제한 type Team = 'red' | 'green' | 'yellow' type Health =..

1. constructor - 프로퍼티 초기화 자바스크립트에서 처럼 this.X = X 형태의 문법은 더이상 사용하지 않는다. 타입스크립트에서는 constructor에서 한 번에 선언할 수 있다. 접근 제한자도 붙여줄 수 있다. class Player { constructor( private firstName: string, protected lastName: string, public nickName: string ){} } 1-1. 프로퍼티 메뉴얼 초기화 클래스의 프로퍼티가 constructor에 의해 바로 초기화 되지 않도록 할 수 있다. type Words = { [key: string]: string; }; class Dict { private words: Words; constructor() ..

제네릭이란? 선언 시점이 아닌 생성 시점에 타입을 명시하여 하나의 타입만이 아닌 다양한 타입을 사용할 수 있도록 하는 기법이다. 한번의 선언으로 다양한 타입에 재사용이 가능하다는 장점이 있다. 는 제네릭을 선언할 때 관용적으로 사용되는 식별자이며, 타입 파라미터(Type parameter)라 한다. ( 'T' 외의 값을 사용해도 된다고 하는데 대부분 'T' 를 쓰는것 같다.) 함수에서의 제네릭 type SuperPrint = { (arr: T[]): void; }; const superPrint: SuperPrint = (arr) => { arr.forEach((item) => console.log(item)); }; superPrint([1, 2, 3]); // superPrint (arr: numbe..

함수 오버로딩이란? 타입스크립트 에서는 여러 개의 Call signature를 갖는 함수를 하나의 이름으로 정의하는 것, 즉 여러 타입의 매개변수를 받지만 그에 의한 함수의 동작은 같아 하나의 함수 명으로 표현하고 싶을 때 사용할 수 있는 함수 정의 기술입니다. * 객체 지향 프로그래밍의 특징 중 다형성( polymorphism ) 의 구현입니다. call signature의 파라미터 수가 같을 때 type Add = { (a: number, b: number): number; (a: number, b: string): number; }; const add: Add = (a, b) => { if (typeof b === "string") return a; return a + b; }; console.lo..

Call Signatures란? 함수 매개변수와 return값의 Type을 미리 정하는 문법입니다. 함수선언 안에서 타입을 명시한 코드 function hello(name: string): void { console.log(`hello ${name}`); } Call Signatures를 사용한 코드 type Hello = (name: string) => void; const hello: Hello = (name) => { console.log(`hello ${name}`) } hello('bob') //"hello bob" Call Signatures를 사용하면 함수의 구현과 타입선언을 분리하여 구현할 수 있습니다. 타입 체커는 hello 함수의 타입을 이미 알기 때문에 에러없이 실행됩니다.