react
-
[svgr] SVG 아이콘 컴포넌트 생성 :: 마이구미알아두면 좋은 라이브러리 2022. 1. 28. 22:56
이 글은 svg 아이콘과 관련된 라이브러리 SVGR 을 다룬다. 리액트에서 아이콘을 svg 파일로 관리하는 경우 도움을 줄 수 있는 라이브러리이다. 글에서 소개하는 예제들은 각 tag 를 checkout 을 통해 확인할 수 있다. 예제 - https://github.com/hotehrud/svgr-example 조금이나마 도움을 줄 수 있는 라이브러리들을 소개하는 카테고리로 분류된 글이다. 알아두면 좋은 라이브러리 SVGR 은 svg 파일을 React 컴포넌트로 변환시켜주는 라이브러리이다. 원본 svg 와 svg 를 React 컴포넌트로 변환한 코드를 각각 확인해보자. // icon.svg // Icon.tsx import * as React from "react"; const SvgAc = (props..
-
Redux 에 reselect 적용해보기 :: 마이구미React 2020. 6. 7. 19:03
이 글은 reselect 라이브러리를 다룬다. 대다수의 경우 redux 를 사용하면서 reselect 를 도입하게 된다. 왜 사용하는지, 어떤 개선점이 있고, 주의해야하는 사항은 무엇인지 알아본다. 관련 문서 - https://github.com/reduxjs/reselect redux 공식문서에서 제공하는 기본 예제를 기반으로 연결되는 점들이 많다. 글을 읽기 전에 먼저 훑어보면, 이해에 더 도움이 될 것이다. https://redux.js.org/basics/example 우리는 상태 관리를 효율적으로 하기 위해 Redux 와 같은 상태 관리 라이브러리를 사용한다. 기본적으로 리덕스 스토어있는 state 를 가져오는 방법은 다음과 같다. todoList 가 존재하고, todo 들의 완료 여부를 필터링..
-
리덕스 Normalizing State Shape :: 마이구미React 2020. 6. 4. 23:21
이 글은 "리덕스를 어떻게 사용할 수 있는가?" 를 나타낸다. 여러 방법 중에 "Normalizing State Shape" 를 다룬다. 공식 문서에서 언급된 것으로, 리덕스를 활용하는 패턴의 하나라고 볼 수 있다. 전반적인 내용과 이를 프로젝트에 적용해본 후기를 작성하려한다. 관련 문서 - https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape 글을 다루기에 앞서, 개발 시나리오를 생각해보자. 프로젝트 진행에 앞서, 서버쪽 API 가 아직 개발되지 않은 상태라면 프론트는 사전 작업을 먼저 하면 된다. 우선 마크업을 미리 진행하면 된다. 그리고 더 나아가 대략 추측 가능한 구조를 기반으로 더미 데이터를 API 응답으로 활용할 수..