khakha's dev log

invalidateQueries는 POST, PATCH, DELETE, .. 등의 요청이 완료된 이후 새롭게 데이터를 페칭해야할 때 캐싱된 쿼리를 무효화하는 메서드입니다. 기본적으로 queryKey와 일치하는 모든 쿼리를 즉시 유효하지 않은 것으로 표시하고 active한 상태의 쿼리는 refetch합니다. 무효화시키고 싶은 queryKey를 매칭해주는 방식은 여러가지 존재합니다. 아래 방식으로 적절하게 키를 지정해줘야 정확하게 쿼리를 무효화할 수 있습니다. 키는 hierarchy 구조이기 때문에, 이를 활용해서 화면 영역을 분리하는 용도로도 키를 설정할 수 있습니다. 1. prefix 무효화하고 싶은 접두사로 시작하는 모든 쿼리를 무효화할 수 있습니다. import { useQuery, useQueryC..

코드 분할 Bundling 대부분 React 앱들은 Webpack, Rollup등을 사용하여 여러 파일을 하나로 병합한 "번들 된" 파일을 웹 페이지에 포함하여 한 번에 전체 앱을 로드할 수 있다. Code-splitting 번들링은 좋은 기능이지만, 큰 규모의 서드파티 라이브러리를 추가하게 되거나 앱이 점점 커질수록 즉, 번들이 커질수록 코드를 읽는 시간이 길어질 수 있다. 번들이 커지는 것을 방지하기 위해 좋은 방법은 번들을 "나누는" 것. Code-splitting이란 런타임환경에서 여러 번들을 동적으로 만들고 불러오는 것으로 Webpack, Rollup 등의 번들러가 지원하는 기능이다. 코드분할은 앱을 lazy loading(지연 로딩) 하게 도와주고 사용자에게 더 좋은 성능을 가져다줄 수 있다...

관심사의 분리(Seperation of Concerns) "관심사"란 간단히 말하면 하나의 모듈이 수행하고자 하는 목적이다. 여기서 모듈이란 함수, 클래스 등의 단위로 해석할 수 있다. 따라서, "관심사의 분리"란 각 모듈들이 한번에 여러 관심사를 처리하려고 하지 않고, 하나의 관심사만 처리하도록 분리하는 것을 의미한다. 이는 좋은 코드를 짜기 위한 가장 기본적인 원칙이며, 더 좋은 애플리케이션을 만들기 위한 여러 디자인 패턴, 기법, 아키텍쳐 등은 모두 이 SoC를 가장 기본적인 원칙으로 삼고 있다. 관심사를 분리하는 이유 관심사를 분리하는 이유는 소프트웨어의 특정 부분이 변경되는 이유를 한 가지로 제한하기 위해서이다. 관심사를 분리하면 하나의 모듈은 하나의 목적만 갖게 된다. 이 말은 곧 해당 코드가..

axiosInstance를 만든 경우 비동기 통신 성공, 실패(에러발생)시 공통적으로 처리해주는 로직을 interceptor에 작성할 수 있다. 아래는 response.error 쪽 코드이다. spamAxios.interceptors.response.use( response => { // 생략 }, error => { console.log(error, error.response, 'interceptor error'); if (error.status === 401) { const mail_url = localStorage.getItem('mail_url'); if (mail_url) { window.location.href = mail_url; localStorage.clear(); } else { win..

Suspense React.lazy와 함께 사용하면 가져오기가 로드되는 동안 폴백 로딩 상태를 렌더링하도록 리액트에 지시할 수 있다. props - children : 렌더링하려는 실제 UI - fallback : loading 상태일 때, 실제 UI 대신 렌더링할 대체 UI. 보통 로딩 스피너나 스켈레톤 UI로 대체한다. children 컴포넌트가 로딩이 완료될 때까지 fallback 컴포넌트를 보여준다. 아래와 같이 여러 Suspense 구성 요소를 중첩하여 로딩 시퀀스를 만들 수도 있다. 1. 가 loading 상태이면, 전체 콘텐츠 영역이 로 대체된다. 2. loading이 완료되면 는 사라지고, 로딩이 완료된 컨텐츠가 렌더링 된다. 3. 가 loading 상태이면, 와 영역이 로 대체된다. 4...

import axios from "axios"; const axiosInstance = axios.create(); let isRefresh = false; // access token을 refresh 했는지 여부 let failedQueue = []; // token 갱신을 대기 중인 요청을 모아두는 배열 // 실패한 요청을 다시 실행하는 함수 function processQueue(error, token = null) { failedQueue.forEach((fq) => { if (error) { fq.reject(error); } else { fq.resolve(token); } }); failedQueue = []; } axiosInstance.interceptors.request.use( fun..

1. CRA로 만든 프로젝트 eject하여 설정 살펴보기 npm run eject 를 실행하면 cra를 구성하는 숨겨진 모든 설정을 밖으로 내보내준다. 실행 이후에 변경되는 package.json을 보고 리액트 앱을 만드는데 필요한 모듈을 확인하여 직접 앱을 띄울 수 있다. # cra로 react app 만들기 npx create-react-app eject-test # eject npm run eject eject 이전 package.json { "name": "eject-test", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^..

React Query는 React app에서 데이터를 캐싱하고, 지속적으로 동기화하고 업데이트하여 서버 상태 관리를 도와주는 라이브러리이다. crypto tracker 를 개발하며 React Query로 서버 상태를 관리하였고, 이 라이브러리가 내부적으로 데이터를 어떻게 캐싱하는지 궁금했다. Query Queries React Query에서는 Query를 Query key로 연결된, 비동기 통신을 통해 불러온 데이터에 선언적 종속성 이라고 말한다. useQuery GET 요청과 같이 서버의 데이터를 불러올 때 사용하는 Hook이다. // 가장 기본적인 형태의 React Query useQuery Hook 사용 예시 const result = useQuery( queryKey, // 이 Query 요청에 ..

프리온보딩 인턴십 1주차 과제에서 Signup, Signin 페이지에 동일한 스타일을 사용했었다. 처음엔 이 두 페이지에 동일한 styled comonents를 각각 작성했는데, 이 두개를 합친 파일을 만들고 각 페이지에서 import해서 쓸 수 있도록 하고싶었다. 이런 경우 하나의 파일에 몰아서 작성하고 import하여 적용해주는 S-dot naming 방식이 있다는 것을 알게되었다. 아래와 같이 적용해보았다. styles/Sign.style.ts import styled from 'styled-components'; export interface FormData { email: string; password: string; } export const Title = styled.h1` margin-to..

원티드 프리온보딩 인턴십 1주차 과제로 사전 과제로 만든 todo list의 Best Practice를 선정하여 리팩토링하는 과제를 수행하였다. 내가 사전과제로 제출한 디자인 시스템을 따르게 되어서 나는 UI 개발(디자인 스타일링)을 맡기로 했다. 과제 자체가 간단했기 때문에 component도 구현할 것이 많지는 않았지만 팀원들이 css는 작성하지 않고, 스타일 관련된 props를 넘겨주는 것으로 재사용할 수 있는 component를 개발하는 것에 집중했었다. elements로 Button과 InputFiled를 구현하였는데 InputFiled는 크게 입력창과 체크박스 두가지로 나누어서 개발하였고, 체크박스 구현에는 react-icons를 가져다썼었다. 위의 이미지와 같이 할 일이 완료된 상태일 때 아..