khakha's dev log

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

사이드 프로젝트를 하면서 여느때와 같이 Axios 인스턴스를 만들어서 사용하고 있다. 칸반 리팩토링을 하면서 Generics을 사용해 서버에서 만들어주는 응답값 인터페이스를 만들고, 각 api 함수를 선언시 Generics에 들어갈 타입을 지정해주도록 수정해서 pr을 올렸었다. // apis/kanban.ts interface IResponse { success: boolean; error: any; data: T; } export const fetchKanbanList = async (): Promise => { const data: IResponse = await goHigerApi.get('/v1/applications/kanban'); return data; }; 첨엔 나름 괜찮은것같다고 생각했지..

입력과 출력 모든 함수는 입력과 출력이 있습니다. 입력은 함수가 계산을 하기 위한 외부정보, 출력은 함수 밖으로 나오는 정보나 어떤 동작입니다. 함수를 호출하는 것은 어떠한 결과(출력)가 필요하기 때문이며 이를 얻으려면 입력이 필요합니다. 명시적 입/출력과 암묵적 입/출력 입력과 출력은 명시적이거나 암묵적일 수 있습니다. var total = 0; // 전역변수 function add_to_total(amount) { // amount : 인자는 명시적 입력입니다. console.log("Old total: " + total); // total : 전역변수를 읽는 것은 암묵적 입력, 콘솔을 찍는 것은 암묵적 출력입니다. total += amount; // 전역변수를 수정하는 것은 암묵적 출력입니다. re..

게발하는 애플리케이션의 크기가 커지면서 파일을 여러 개로 분리하게 되는데 이때 분리된 파일 각각을 '모듈(module)'이라고 부릅니다. 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성됩니다. 스크립트의 크기가 점차 커지고 기능도 복잡해지자 자바스크립트 커뮤니티에서 특별한 라이브러리를 만들어 필요한 모듈을 언제든지 불러올 수 있게 해준다거나 코드를 모듈 단위로 구성해 주는 방법을 만드는 등을 통해 모듈 시스템을 개발하게 되었습니다. AMD - 가장 오래된 모듈 시스템 중 하나로 require.js라는 라이브러리를 통해 처음 개발 CommonJS - node.js 서버를 위해 만들어진 모듈 시스템 UMD - AMD와 CommonJS와 같은 다양한 모듈 시스템을..

함수형 프로그래머는 액션과 계산, 데이터를 구분하여 개발과정에서 적용할 수 있습니다. 데이터 이벤트에 대한 사실. 일어난 일의 결과를 기록한 것입니다. e.g. 구입하려는 음식 목록, 이름, 전화 번호, 음식 조리법 데이터는 데이터 자체로 할 수 있는 것이 없기 때문에 데이터 그대로 이해할 수 있는 것이 장점입니다. 해석하지 않아도 실행할 수 있는 계산에 비해 해석이 반드시 필요하다는 점은 단점입니다. 데이터를 언제나 쉽게 해석할 수 있도록 표현하는 것이 함수형 프로그래밍에서 중요한 기술입니다. 계산 입력값으로 출력값을 만드는 것. 순수 함수, 수학 함수라고 부르기도 합니다. e.g. 최댓값 찾기, 이메일 주소가 올바른지 확인하기 실행 시점과 횟수에 관계없이 항상 같은 입력값에 대해 같은 출력값을 돌려줍..

컴포넌트 렌더링 중에 상태를 업데이트하려고 시도했기 때문에 발생한 경고이다. 워닝 문구 마지막에 Github issue에서처럼 에러가 발생한 부분을 확인하라고 알려주고 있다. Kanban.tsx const { data, isLoading, isSuccess } = useQuery('fetchKanbanList', fetchKanbanList); if (!isLoading && isSuccess) { const kanbanList = data.data; dispatch(setApplications(kanbanList)); } useQuery훅이 렌더링중에 호출되고, 데이터가 잘 받아와지면 dispatch를 호출하여 스토어 상태를 업데이트하도록하였다. 이는 렌더링 중에 상태를 업데이트하는 것인데, 잘못된 패..

코드 분할 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...