![]()
배경 1) next에서 svg파일을 Image태그로 감싸서 사용하고 있었다. 2) 그러던 중 색상을 props에 따라 변경해줘야하는 상황이 발생했다. (isClick에 따라서 색상 변경) 3) 조건에 따라 다른 색을 가진 svg파일을 렌더링하는 방법도 있었겠지만 색상으로 컨트롤 해보고 싶었다. 검색 결과.. svgr을 통해 svg 파일을 컴포넌트처럼 사용할 수 있다는 걸 알았다. 사용 방법 1. 설치 yarn add -D @svgr/webpack 2. next.config.js 수정 /** @type {import('next').NextConfig} */ const nextConfig = { // 웹팩을 통해 svg 파일을 리액트 컴포넌트로 변환하는 설정이다 webpack: (config) => { co..
![]()
리액트쿼리 도입기 1. 리액트쿼리를 왜 써야할까? - 우선적으로 클라이언트 단에서 사용하는 데이터는 크게 2가지로 나눌 수 있다. 첫번째는 클라이언트 단에서 사용자에게 받는 데이터와 두번째는 서버에서 받아와 사용하는 데이터이다. 클라이언트는 2가지의 성격을 가진 데이터를 사용하기 때문에 혼용을 겪을 수 있다. 가령, 신청 폼에 입력한 값을 클라이언트가 서버에 post 해주었지만, 새로고침 했을 때 서버에 패치된 즉, update된 값이 아니라 이전에 클라 단에서 가지고 있던 이전 값을 뷰에 띄울 수 있는 문제 상황이 발생할 수 있다. 이러한 혼용을 막기 위해 서버의 데이터를 클라이언트를 가져올 때 사용할 수 있는 대안이 있는데, 그것이 리액트쿼리이다. 기본적으로 클라/서버 단의 데이터를 분리할 수 있다는..
