오늘도 맑음

⭐ 문제화면의 첫번째 렌더링 후에 클릭 이벤트를 주어 state를 변경할 때 새로고침 된 것처럼 순간적인 깜빡임 현상이 있었다.개발자 도구의 네트워크 탭으로 확인했을 때 state가 변경될 때 폰트 파일을 다시 가져오는 것을 확인할 수 있었다. 빨간 밑줄 아래부분을 보면 첫번째 state 변경 시 폰트를 다시 불러와서 순간적으로 깜빡이는 것을 확인했다. ⭐ 해결기존에는 font.ts 파일을 만들어 style-components를 활용하여 폰트를 불러왔었다. -> 문제 발생!// font.tsimport { createGlobalStyle } from "styled-components";const GlobalFont = createGlobalStyle` @font-face { font-fam..

img 태그로 svg 아이콘을 화면에 보여준다면 여러 제약사항이 많다.1. 색상이나 크기를 동적으로 변경이 어렵다.2. 너비, 높이 외에는 속성을 변경할 수 없다. 따라서 다른 방법을 찾아야 했는데 지금 사용하는 vite의 vite-plugin-svgr를 사용하기로 결정했다. svgr의 장점은 다음과 같다.1. 색상, 크기를 동적으로 변경하기 쉽다.2. react-icons 처럼 으로 가져올 수 있어 가독성이 향상된다. 우선 설치한다.npm install --save-dev vite-plugin-svgr 초기 설정해야하는 부분이 있는데우선 vite 환경설정 파일인 vite.config.js에 svgr를 추가해준다.// vite.config.jsimport svgr from "vite-plugin-svg..

방법1. react-daum-postcode- Daum 우편번호 검색 서비스를 React환경에서 사용할 수 있도록 만든 라이브러리2. 공식 가이드를 보고 직접 구현이 중에서 2번째 방법을 택하였다.💡 리액트에서 동적으로 이 코드를 작성하기 위해서 단계1. 스크립트 생성2. document.head에 스크립트 삽입3. 버튼을 클릭햇을 대 new daum.Post().open() 실행전체 코드import styled from "styled-components";import Button from "../common/Button";import { useEffect } from "react";interface Props { onCompleted: (address: string) => void;}const SC..