cra
-
[monorepo] hot reload 적용 :: 마이구미React 2022. 9. 13. 20:16
이 글은 모노레포 환경에서 핫 리로드를 적용하는 글을 다룬다. 모노레포에 대해서는 다루지 않는다. 예제는 CRA 를 기준으로 작성된다. CRA 를 사용하지 않더라도, 도움을 얻을 수 있는 정보가 있을 것이라 생각한다. 예제 코드 - https://github.com/hotehrud/monorepo-react 참고 자료 - https://muguku.medium.com/fix-go-to-definition-and-hot-reload-in-a-react-typescript-monorepo-362908716d0e 개발 환경을 모노레포로 구성하는 경우에 핫 리로드 기능의 확장을 원할 수 있다. 기본적으로 CRA 로 환경을 구성하면 핫 리로드는 기본적으로 적용되어있다. 코드를 수정하고 저장하면 자동적으로 업데이트..
-
[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..
-
[detect-port] 사용 가능한 포트 찾기 :: 마이구미알아두면 좋은 라이브러리 2022. 1. 4. 22:20
이 글은 사용 가능한 포트 번호를 찾는 라이브러리 detect-port 을 다룬다. CRA(create-react-app) 에서는 이미 사용 중인 포트 번호가 아닌 사용 가능한 포트 번호로 서버 실행을 도와준다. 관련 기능에 대해 어떻게 동작되는지 알아본다. 조금이나마 도움을 줄 수 있는 라이브러리들을 소개하는 카테고리로 분류된 글이다. 알아두면 좋은 라이브러리 detect-port 와 같은 라이브러리는 현재 사용 가능한 포트 번호를 찾아주는 용도로 사용된다. 우리는 이러한 기능을 필요로 하거나, 이미 자연스럽게 사용하고 있다. 이 라이브러리를 사용하고 있는 대표적인 예는 CRA(create-react-app) 로 들 수 있다. 그 외에도 익숙한 곳들에서도 많이 사용하고 있는 README.md 에서 확인..