사건 발생 Figma에서 사용한 아이콘을 svg 파일로 다운받아 사용하려고 했다. 어떻게 하면 깔끔하게 사용할 수 있을까? Install svgr loader를 설치한다. npm install @svgr/webpack --save-dev next.config.js 설정을 변경한다. // next.config.js /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, webpack(config) { config.module.rules.push({ test: /\.svg$/, use: ['@svgr/webpack'], }); return config; }, }; module.exports = nextConfig..

CSS에서 색상값을 변수로 지정하여 사용해보았다. 티웨이 홈페이지를 리액트로 클론하는 프로젝트를 진행하며, 색상값을 공통적으로 사용할 수 있으면 좋을 것 같아 알아보게 되었다. CSS에서 색상값을 변수로 사용하는 법 :root { --main-bg-color : brown; } 이후에 .one { background-color: var(--main-bg-color); } 와 같이 사용할 수 있었다. 반복 코드를 줄일 수 있고 가독성을 높일 수 있다. 리액트에서 색상값을 변수로 사용하는 법 theme와 createGlobalStyle을 사용하는 법이 있다. 그 중에서 theme를 이용해보도록 하겠다. 사용할 변수들을 다음과 같이 저장한다. 따로 파일로 저장하지 않고 같은 파일 내에 변수로 선언해줘도 괜찮다..

상태 관리 라이브러리인 Redux를 배웠다. 아직은 익숙하지 않지만 확실한 것은 Redux에서 Reducer의 함수의 경우 Redux의 state 업데이트는 불변하는(immutable) 방식으로 변경해야 한다. 그 중 Object.assign을 소개한다. mdn Object.assign()에서는 객체 2개를 합치기도 하고 {}에 합치기도 한다. Reducer함수를 작성할 때 immutable하게 하려면 어떻게 써야 할까? 답은 이 사이트에서 확인할 수 있다. 이 사이트에는 다음과 같이 나와있다. 실험을 해보자. 사용할 객체는 다음과 같다. newData는 state의 cartItems에서 0번째 index의 quantity만 수정해준 값이다.! const state = { "items": [ { "id"..