짧은코딩

prefetching페이지네이션을 하고 다음 페이지로 넘어갈 때, prefetching을 하지 않으면 "로딩중..." 이런 메시지가 보이게 된다. 이는 사용자 경험에 좋지 않다. 그렇기에 prefetching을 해야 한다. prefetching은 데이터를 캐시에 추가하며 구성할 수 있지만 기본값은 stale(만료) 상태이다. 그러고 데이터가 필요할 때 stale 상태에서 데이터를 다시 가져오고 이때 캐시에 있는 만료되지 않은 데이터를 이용한다. 그렇기에 추후에 사용자가 사용할 법한 데이터를 prefetching 하면 좀 더 개선된 사용자 경험을 제공할 수 있다. 페이지네이션에서는 다음 페이지의 데이터를 prefetchig 하면 된다.사용 방법페이지네이션을 예시로 들면 다음 페이지로 넘어가는 버튼을 눌렀을..

리액트 쿼리에서는 key를 다르게 설정해야 다른 값으로 인지한다. 위 사진은 Blog Posts의 글을 클릭하면 각각 다른 comments를 보여주는 사이트이다. 잘못된 코드 const { data, isLoading, isError, error } = useQuery("comments", () => fetchComments(post.id) ); 이 코드에서는 트리거가 발생했을 때만 data를 업데이트한다. 그렇기에 다른 블로그 제목을 클릭해도 같은 댓글이 나오게 된다. 해결 방법 const { data, isLoading, isError, error } = useQuery( ["comments", post.id], () => fetchComments(post.id) ); 이 경우 key를 ["comme..

string 타입의 범위는 매우 넓다. string을 타입으로 선언하려면 더 좁은 타입이 있는지 확인해봐야 한다. string을 남발한 설계 interface Album { artist: string title: string releaseDate: string // YYYY-MM-DD recordingType: string // E.g., "live" or "studio" } 이 코드처럼 모두 string으로 선언하면 엉뚱한 값을 넣어도 타입 체커를 통과한다. 이렇게 string 타입이 남용된 코드는 문자열을 남발(stringly typed)했다고 한다. 더 좋은 타입 모델링을 하기 위해서는 타입의 범위를 좁혀서 선언해야 한다. 타입을 좁힌 설계 type RecordingType = 'studio' | ..

리액트 쿼리란 클라이언트에서 서버 데이터가 필요할 때, fetch나 axios를 사용하지 않고 리액트 쿼리 캐시를 요청할 수 있다. 즉, 리액트 쿼리는 해당 캐시의 데이터를 유지 관리하는 것이다. 데이터 관리는 리액트 쿼리가 하지만 새 데이터로 캐시를 업데이트하는 시기를 개발자가 설정할 수 있다. 클라이언트 캐시에 있는 데이터가 서버 데이터와 일치하는지 확인하는 방법은 2가지가 있다. 1. 명령형: 쿼리 클라이언트에 기존에 있던 데이터를 무시하고 새 데이터를 서버에서 가져와 교체하는 것 2. 선언형: 예를 들어 브라우저 창을 다시 포커스 하면 refetch하는 트리거 조건을 구성한다. 혹은 시간을 설정하여 그 시간이 지나면 다시 데이터를 불러올 수 있게 할 수 있다. 리액트 쿼리는 서버에 대한 모든 쿼리..

유니온의 인터페이스보다는 인터페이스의 유니온을 지향하는 것이 좋다. 사실 앞 문장만 딱 보면 좀 헷갈릴 수 있다. 하지만 막상 코드를 보면 익숙할 것이다. 백터를 그리는 프로그램 작성 예제 유니온의 인터페이스 interface Layer { layout: FillLayout | LineLayout | PointLayout; paint: FillPaint | LinePaint | PointPaint; } 이 코드는 유니온의 인터페이스이다. layout은 모양이 그려지는 방법, 위치를 제어하고, paint는 선의 스타일을 제어한다. 두 속성은 Fill, Line, Point 3개 중 하나를 통일해서 가져야 한다. 하지만 layout은 FillLayout, paint는 LinePaint로 하면 에러가 나게 될..

타입만으로 어떤 변수가 null이 될 수 있는지 없는지를 표현하기는 어렵다. B에서 A의 값이 나오는 거면 A가 null이 될 수 없을 때 B도 null이 될 수 없다. 반대로 A가 null이 될 수 있으면 B도 null이 될 수 있다. 값이 전부 null이거나 전부 null이 아닌 경우로 구분해야 모델링하기 쉽다. 최댓값, 최솟값 예시 잘못된 코드 function extent(nums: number[]) { let min, max for (const num of nums) { if (!min) { min = num max = num } else { min = Math.min(min, num) max = Math.max(max, num) // ~~~ Argument of type 'number | und..

최근 학교 수업에서 Recoil을 배웠다. 앞으로 진행하게 될 프로젝트에서 원래는 Redux Toolkit을 사용할 예정이었다. 하지만 Recoil을 배우고 난 뒤에는 생각이 바뀌어서 Recoil을 사용하기로 했다. 검색을 해보니 Recoil과 React Query를 같이 사용하면 더 좋다는 결과가 많아서 두 라이브러리를 같이 사용하여 프로젝트를 할 예정이다. 이 글에는 저 2가지를 사용해야 하는 이유를 적어보려고 한다. 파일구조 Recoil과 React Query를 사용하면 사진과 같은 파일 구조를 사용해야 할 것이다. 그리고 TypeScript를 사용하여 프로젝트를 진행 할 예정이라 typing 폴더를 따로 만들어 놓는다. recoil 폴더 recoil 폴더 안에는 atom과 selector을 구성하..

문제 https://school.programmers.co.kr/learn/courses/30/lessons/49189 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 코드 function solution(n, edge) { const list = Array.from({ length: n + 1 }, () => []); edge.map(([x, y]) => { list[x].push(y); list[y].push(x); }); const dis = [Infinity, 1]; const queue = [1]; while (queue.length) { cons..

타입을 잘 설계하면 코드를 직관적으로 작성할 수 있다. 타입을 잘 설계하기 위해서는 유효한 상태만 표현할 수 있는 타입을 만들어야한다. 웹 애플리케이션 예시 문제점이 있는 코드 -페이지를 렌더링 해주는 함수 interface State { pageText: string isLoading: boolean error?: string } declare let currentPage: string function renderPage(state: State) { if (state.error) { return `Error! Unable to load ${currentPage}: ${state.error}` } else if (state.isLoading) { return `Loading ${currentPage}....

http 상태 코드는 서버에서 클라이언트 요청의 처리 상태를 알려주는 기능이다. 그리고 http 상태 코드에는 100~500번대 에러가 존재한다. 100번대 100번대 상태 코드는 요청이 수신되어 처리 중이라는 의미이다. 100번대는 실무에서 거의 사용하지 않는다. 200번대 200번대는 클라이언트의 요청이 성공적으로 처리되었다는 것을 의미한다. 보통은 200이나 (200, 201) 이렇게 1~2개만 사용한다. 200 "OK"이며 요청 성공을 의미한다. 201 요청이 성공하고 새로운 리소스가 생성된 것을 의미한다. ex) 회원 가입이 성공하면 응답 Location의 필드에 "/members/50" 이런 식으로 온다. 202 요청이 접수되었지만 처리되지 않은 상태를 의미한다. ex) 요청 접수를 하고 1시..