min

오늘은 useInfiniteQuery에 대해서 살펴보려고 한다. 즉 만약에 데이터 10,000개를 가지고 무한 스크롤 구현시에 가장 중요하게 고려해야 할 점은? 이라는 질문에 하나의 방법이 될 수 있는 useInfiniteQuery에 대해서 살펴보려고 한다. 1. 만약에 데이터 10,000개를 가지고 무한 스크롤 구현시에 가장 중요하게 고려해야 할 점은? : 위 답을 내리기 위해서는 먼저 무한 스크롤에 대해서 살펴봐야한다. 무한 스크롤에 경우에는 사용자가 스크롤을 맨 밑하단으로 내렸을 때 데이터를 계속 fetching을 해오면서 무한정 스크롤을 내릴 수 있도록 해주는 기술이다. 이 기술에서 중요한 부분은 어떻게 DOM을 최적화 시킬 것인가?이다. 즉 사용자 입장에서 무한정 스크롤을 밑으로 내릴 때 어떻게..

오늘은 react-query에 대해서 알아볼려고 한다. 정확히 말하자면 react-query가 무엇이고 왜 사용하는 지에 대해서 알아볼려고 한디. 1. react-query가 무엇인가? : react-query는 서버용 상태관리 툴이다. 여기서 서버용 상태라는 것은 클라이언트가 주도권을 잡고 있는 상태가 아니라 제3자 즉 데이터베이스에 있는 상태를 의미한다. 2. react-query를 왜 사용하는가? : react-query를 왜 사용하는지를 알기 위해서는 먼저 서버용 상태를 왜 관리해야 하는지를 먼저 알아야 한다. 서버용 상태는 클라이언트가 주도권을 잡고 있지 않다. 이 말은 즉 데이터베이스 서버에 저장되고 있고 만약 이를 관리하지 않는다면 클라이언트가 가지고 있는 서버 사이트 상태와 데이터베이스에 ..

오늘은 redux에 대해서 같이 이야기를 나눌려고 한다. 정확히 말하자면 redux는 무엇이고 왜 사용하는지에 대해서 알아볼려고 한다. 1. redux 란? : redux는 전역 상태 관리를 도와주는 라이브러리입니다. 2. redux의 사용이유 : redux 의 사용 이유에는 여러가지가 있지만 그중에서 2가지만 보도록 하겠습니다. 첫번째는 단방향 통신입니다. redux의 경우 단방향 통신 즉 FLUX 패턴에 근거하여 상태 관리가 이루어집니다. 이는 복잡한 상황을 간단하게 만들고 예상치 못한 오류를 사전에 해결할 수 있습니다. 다음은 미들웨어를 지원한다는 점입니다. 리덕스에는 리덕스 미들웨어를 제공합니다. 이는 로그 관리 , 에러 핸들링 , 비동기 처리를 하는 데 있어서 굉장히 용이합니다. 이는 결과적으로..

1. 미들웨어 넌 도대체 머니? : 미들웨어는 중간다리 역할을 뜻한다. 즉 자세히 말하기 위해서 다음과 같은 예시가 있다고 하겠다. 액션 -> 리듀서 -> 스토어 이런 플로우를 가지고 redux의 상태관리가 진행된다고 하자. 여기서 미들웨어는 액션과 리듀서 사이에서 중간 다리로 액션에서 바로 리듀서를 거치지 않고 미들웨어에서 한번 중간 작업을 거치고 리듀서로 액션을 보내주는 역할을 의미한다.자 이제 미들웨어에 대해서 알게되었으니 그럼이제 redux 미들웨어를 언제 쓰는 지 살펴보자. 2. redux 미들웨어 그래서 언제 쓰는 데? : redux 미들웨어는 내가 액션을 리듀서로 보내기 전에 어떤 작업을 하고 싶을 때 사용한다. 그러면 어떤 작업은 어떤 것들이 있을까? 대표적인 예시로는 비동기 작업이다. 즉..

1. axios instance 도대체 왜 쓰는 거야? : axios instance를 쓰는 가장 큰 이유는 유지보수 때문이다. 그럼 여기서 드는 의문은 왜 유지보수 측면에서 axios instance를 쓰면 좋은지 이다. 이 이유를 설명하기 위해서 다음과 같은 예시가 있다고 하자 axios.get("https://localhost:3000") 이 코드를 보면 localhost 3000포트에 get 요청을 하는 것을 알 수 있다. 근데 만약에 통신을 300번 해야해서 저 코드가 300개 있다고 하자. 근데 만약에 저 localhost 3000포트가 3001포트로 바뀌면 어떻게 하나? 방법은 300개의 주소를 다 바꾸는 것이다. 여기서 우리는 유지보수가 떨어진다는 것을 알 수 있다. 그래서 이를 막기 위해..

1. json-server 도대체 너는 누구야?! : json-server 말 그대로 json으로 이루어진 서버를 의미한다. 하지만 이렇게 집고 넘어간다면 이 글을 읽는 독자 입장에서는 크게 도움이 되지 않을 것이다. 그래서 좀 더 자세히 설명하자면 이 때 server는 API 서버, DB 서버를 의미한다. 즉 API를 보내주거나 DB처럼 데이터를 저장할 때 사용하는 패키지다 2. json-server 그래서 왜 쓰는 거야?! : json-server에 대한 정의를 보았을 때는 이런 의문이 들었을 것이다. 이미 백엔드에서 API와 DB를 제공해주는데 구지 json-server를 쓰는 걸까?. 이 의문이 json-server를 사용하는데 필요한 핵심적인 키다. json-server를 사용하는 이유는 다음과..

1. Redux https://minprogramming.tistory.com/entry/redux%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC redux에 대하여... 오늘 나는 MVVM,FLUX에 대하여 다뤄보는 시간을 가졌다. 오늘 나는 MVVM,FLUX에 관점에서 redux를 어떻게 구현하는 지 살펴보도록 하겠다. 구체적으로 나는 MVVM,FLUX에서도 FLUX에 관점에서 리덕스를 설명 minprogramming.tistory.com https://minprogramming.tistory.com/entry/MVVM%EA%B3%BC-FLUX%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC MVVM과 FLUX에 대하여... 오늘 나는 cs 스터디로 MVVM과 F..

오늘 나는 MVVM,FLUX에 대하여 다뤄보는 시간을 가졌다. 오늘 나는 MVVM,FLUX에 관점에서 redux를 어떻게 구현하는 지 살펴보도록 하겠다. 구체적으로 나는 MVVM,FLUX에서도 FLUX에 관점에서 리덕스를 설명하겠다. 이 구조가 redux가 돌아가는 구조다. 나는 이 구조에서 각각의 역할 들을 간단하게 설명하고 각각이 어떻게 연결되는지에 대해서 설명하겠다. 예를 들어서 버튼을 누르면 숫자가 올라가고 내려가는 프로그램이 있다고 하자 이때 view는 버튼과 숫자를 보여주는 페이지를 의미한다. import React from "react"; const Counter = ({ number, onIncrease, onDecrease }) => { return ( {number} +1 -1 ); }..