react
-
우아한 타입스크립트 with 리액트 리뷰 :: 마이구미책 리뷰 2024. 10. 10. 11:36
이 글은 우아한 타입스크립트 with 리액트 책을 리뷰한다.본인은 평범한 프론트엔드 개발자이다. 개인적인 생각과 해석이 들어가 있을 수 있다.책 링크 - https://m.yes24.com/Goods/Detail/123049083 개인적으로 다른 회사들은 어떻게 개발하고 있지? 이런 것들은 어떻게 사용할까? 이 고민은 어떻게 생각하고 해결했을까? 등 항상 궁금하고 관심이 있는 주제이다.그래서 목차도 보지 않고... "배민 개발 사례" 라는 키워드만을 가지고 구매하였다. 책을 직접 받고나서야 목차를 보게 되었다.조금은 기대보다 재미없겠다... 라고 생각이 들었다.그리고 도입부에서부터 책의 대상을 주니어 개발자로 언급하여 기대를 덜하게 되었다. 전체적으로 실제 배민의 개발 사례를 예시로 들어주었다.그리고..
-
[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 응답으로 활용할 수..