728x90 Pre Onboarding7 [PreOnboarding] RTK Query 사용법 정리 (진행중) RTK Query는 리더스 기반의 api 페칭 캐시관리 라이브러리 입니다. 장점으로는 리덕스의 보일러 플레이트와 캐시관리가 많이 줄어들었다는 것입니다. 기본 사용 contents.js RTK 쿼리는 핵심 Redux Toolkit 패키지 설치에 포함되어 있습니다. 둘중 하나를 import해 사용하시면 됩니다. import { createApi } from '@reduxjs/toolkit/query' // OR import { createApi } from '@reduxjs/toolkit/query/react' 일반적인 사용을 createApi위해 서버의 base URL과 상호 작용하려는 endpoint를 나열하는 "API 슬라이스"를 가져와 정의하는 것으로 시작합니다. import { createApi, .. 2022. 3. 4. [RTK Query] 캐싱 포스팅을 너무 RTK Query만 사용하는 것 같긴한데 너무 매력적이라 다른 분들이 혹시라도 보게 되신다면 사용해보셨으면 좋겠다. 과제에서 주로 맡은 파트가 어쩌다보니 리덕스를 자주 맡게되어서 해당 과제를 해결할 때 얻었던 새로운 지식을 정리한다 과제에서 로컬 캐싱과 만료시간을 구현을 해야했다. 일단 직접 리덕스로 구현을 하는 방법과, RTK Query를 사용해서 호다닥해버리는 방법이 있는데, RTK Query를 사용하면 금방하니 직접구현 시도를 하다가 실패한다면 RTK Query를 사용하려 일단 만들어는 보았다. "XX초가 지나면 캐시에 있는 데이터를 삭제해야 한다" RTK 쿼리의 주요 기능은 캐시된 데이터의 관리인데, 서버에서 데이터를 가져오면 RTK 쿼리는 Redux 저장소에 데이터를 '캐시'로 저.. 2022. 3. 3. RTK Query 엔드포인트 url 변수로 변경하기 및 데이터 조작하기 엔드포인트 url 변수로 변경하기 기업과제를 하던 중 api에서 데이터를 몇개를 받아 올 것인가에 대해 정해야 할 일이 있었다. 두 가지가 있는데, 1. 데이터를 받아올 개수를 정한다. 2. 페이지 번호를 정한다. 페이지는 10개의 데이터가 들어있다. 요구사항은 10개씩 무한 스크롤을 통해 데이터를 렌더링을 해야 했다. 1번같은 경우에는 처음엔 10 두번째는 20.. 30.. 이런식으로 진행이 되어야 했는데 생각해보니 결국 100000개 100000000개 이런 데이터를 받아오는건 혈압만 오르고 효율도 좋지 않다. 그래서 정한건 페이지 번호별 데이터를 받아 상태를 관리하는 것이다. import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/rea.. 2022. 2. 28. [PreOboadring] CANVAS 는 처음에는 src 및 alt 속성이 없다는 점만 제외하면 요소처럼 보입니다. 실제로 요소에는 width와 height의 두 속성만 있습니다. 이것들은 모두 선택사항이며 DOM 프로퍼티를 사용하여 설정할 수도 있습니다. width 및 height 속성을 지정하지 않으면 캔버스의 처음 너비는 300 픽셀이고 높이는 150 픽셀입니다. 요소는 CSS에 의해 임의로 크기를 정할 수 있지만 렌더링하는 동안 이미지는 레이아웃 크기에 맞게 크기가 조정됩니다. CSS 크기 지정이 초기 캔버스의 비율을 고려하지 않으면 왜곡되어 나타납니다 . 만약 렌더링이 왜곡된 것처럼 보이는 경우 CSS를 사용하지 않고 width 및 height 속성을 명시적으로 지정하자! canvas.width = 60vw; canvas.heigh.. 2022. 2. 24. [PreOnboarding] 번들링과 웹팩 웹팩이란 여러 개 파일을 하나의 파일로 합쳐주는 모듈 번들러입니다. 모듈 번들러란 html, css, js, json, svg 등의 자원을 모두 각각의 모듈로 보고, 이를 조합해서 하나의 결과물로 번들링하는(빌드하는) 도구입니다. 모듈 번들러가 필요하게 된 이유는 최근 복잡한 웹 애플리케이션의 등장과 관련이 있습니다. 거대한 자바스크립트 소스코드와 대규모 의존성 트리를 가지고 있는 대형 웹 애플리케이션이 등장함에 따라, 각각의 세분화된 모듈 파일이 무작위로 늘어나게 됩니다. 이 모듈 단위의 파일들을 호출하여 브라우저에 띄워야 하는데, 자바스크립트의 특성에 따라 발생하기 쉬운 각 변수들의 스코프 문제를 해결해야 하고, 각 자원을 호출할 때 생겨나는 네트워크 쪽의 코스트도 신경써 줘야 합니다. 모듈 번들러는.. 2022. 2. 23. [PreOnboarding] RTK Query를 사용해보자 과제를 하던 중 전역으로 상태관리를 해야할 부분이 있어 리덕스를 사용하게 되었습니다. 자료를 찾던 도중 리덕스 툴킷에서 제공하는 RTK query를 보게되었고 익혀두면 좋을 것 같아서 공부를 시작햇습니다. API 서비스 생성하기 import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react"; export const contentApi = createApi({ reducerPath: "contentApi", baseQuery: fetchBaseQuery({ baseUrl: "api 베이스가 될 주소!", prepareHeaders: (headers) => { headers.set("헤더에 추가하고 싶은 이름", "값"); return he.. 2022. 2. 23. 이전 1 2 다음 728x90
