Redux

  • Web Programming/React

    RTK Query를 이용하여 데이터 최신으로 관리하기(& Redux Toolkit)

    시작하며 Redux Toolkit(RTK)과 RTK Query를 프로젝트에 적용하며 검색을 해보다 SWR과 React Query에 관한 글을 종종 찾을 수 있습니다. 하지만 아직까지는 둘에 대해서는 관련 글들도 많지 않아 원하는 내용을 찾기 쉽지 않은 것 같습니다. Redux Toolkit은 이전 글에서 간단하게 설명했듯이 Redux의 복잡성을 해결하기 위해 만들어졌으며, RTK Query는 Redux Toolkit 패키지에 추가 기능(optional addon)이라고 할 수 있습니다. RTK Query는 데이터를 가져오기와 캐싱 문제 해결을 위해 개발되어 앱의 API 인터페이스 계층을 간결하게 정의할 수 있습니다. Redux를 비롯하여 Redux Toolkit과 RTK Query의 공식 문서는 설명이 ..

  • Web Programming/React

    React 3. Redux, Redux Toolkit - Global UI Component 만들기

    안녕하세요, 씨앤텍시스템즈 이나연 연구원입니다. 지난 글에서는 리스트 스타일링까지 진행했습니다. 이번 글에서는 redux에 대해 기본적인 내용을 살펴본 후, Redux를 사용하여 리스트의 데이터를 store에 저장하여 사용해 보겠습니다. 이어지는 글 React 1. Component 렌더링 React 2. Emotion을 이용한 React component 스타일링 (with. CSS-in-JS) React 3. Redux, Redux Toolkit - Global UI Component 만들기 목차 Redux 시작하기 Redux React Redux Redux Toolkit Redux를 사용하여 global component list 만들기 수정 버튼 추가 모달 컴포넌트 생성 슬라이스 작성 스토어 연결..

  • Web Programming/Angular

    Angular Ngrx 활용하기 - Part1. Ngrx란?

    안녕하세요 씨앤텍 시스템즈의 김준형 입니다. 이번 포스트는 Ngrx란?에 대해서 정리해 보았습니다. ngrx.io/docs 문서를 참고하여 작성하였습니다. 1. Ngrx 란? Ngrx는 Angular에서 반응형 애플리케이션을 구축하기 위한 프레임 워크입니다. 페이지를 이동할때 변수를 그대로 가져가서 사용하고 싶을때 사용하거나, Java와의 Rest통신 후 결과값을 저장할 때 많이 사용합니다. 예를들어, 밑에 그림과 같이 Store에 값을 저장해 놓고 다른 페이지에서 가져다 쓸 수 있는 편리한 기능입니다. 이러한 과정을 상태관리라고 합니다. Angular 1버전인 AngularJS에서는 State를 이용하여 상태관리를 하였으나, Angular의 버전이 높아지면서 상태관리를 더 편하게 할 수 있는 Ngrx를..