Next.js @svgr/webpack 사용시 스타일로 svg 크기 조절 안되는 현상

@svgr/webpack 설치 후 svg 크기를 스타일로 조절하려고 했는데 안되는 증상이 있었다.

코드를 살펴보니 기존 svg 태그에서 viewBox 속성이 사라지는 것을 확인했다.

 

https://stackoverflow.com/questions/64376001/pass-options-to-the-builtin-svgo-from-svgr-webpack/70360615#70360615

 

Pass options to the builtin svgo from svgr/webpack

Is there an option to pass in svgo options to the svgr/webpack loader ? I want to remove the width & height attributes and keep the viewbox, by default it removes those. { test: /\.svg$/, ...

stackoverflow.com

 

 

웹팩 설정을 아래와 같이 고치면 해결할 수 있다.

{
  test: /\.svg$/,
  use: [
    {
      loader: '@svgr/webpack',
      options: {
        svgoConfig: {
          plugins: [
            {
              name: 'preset-default',
              params: {
                overrides: {
                  removeViewBox: false
                },
              },
            },
          ]
        }
      }
    },
  ],
}

Framer Motion은 리액트 기반의 모션 그래픽 구현 라이브러리이다.

회사에서 리액트 + 리액트 네이티브를 사용해서 웹뷰 앱을 만드는데, 인터렉션 구현에 Framer Motion을 사용하고 있다.

이번에 연차를 쓰면서 쉬는김에, 한번 Framer Motion에 대해 다양하게 써보려고 한다.

 

Framer Motion은 React 환경에서만 사용할 수 있다

 

Framer Motion 설치하기

$ yarn add framer-motion

 

설치만 완료했다면 추가적으로 해야할 작업은 없다.

다음 포스팅부터 자세하게 사용해보도록 해보자.

리액트에서 디버깅을 해보자

나는 옛날에 다른 언어로 코딩할 때, 문제가 생기면 break point를 걸어 디버깅을 자주 했었는데,
웹에서는 아무 생각 없이 그냥 console.log를 찍어가면서 디버깅을 하고 있었다.

이번에 공부를 하다가 문득 디버깅도 제대로 못하면 안된다고 생각해서 리액트에서는 어떻게 break point를 걸어서 디버깅을 할 수 있을지 알아보았다.

우선, 가장 기본적인 리액트 프로젝트 생성해서 실행하자.

[실행 및 디버그] 탭으로 이동 해서 [실행 및 디버그] 버튼을 눌러준다.

디버거 선택이 나오면 웹앱(Chrome)을 골라준다

그럼 .vscode 폴더가 생기면서 그 안에 launch.json이 생기는데, 여기서 파일에 내용을 설정한다

url을 3000(리액트) 포트로 변경, webRoot에 "/src"를 붙여준다

[이전 이미지]

[이후 이미지]

그 이후, "디버깅 시작"을 누르면 새로운 브라우저 창이 열리면서 디버깅 가능한 상태가 된다.

이후, 브레이크 포인트를 걸고 브라우저를 새로고침 해보면 브레이크 포인트에 실행이 걸리면서 노란색 표시가 뜨는 것을 확인할 수 있다.

useState를 적용하여 변수를 만들면 브레이크 포인트 시점에서의 변수 상태도 확인할 수 있다.

앞으로는 console.log를 줄이고, breakpoint를 활용한 디버깅을 좀 자주 활용하는 버릇을 들여야 할 것 같다.