진행 중인 프로젝트에 서버에서 처리해줘야 하는 부분이 생김에 따라 react에서 Next.js의 pages router로 마이그레이션 해야 하는 상황이 왔다. 원래의 코드를 그대로 옮기는 작업을 하는데도 문제가 몇 가지 있었는데 마이그레이션 하면서 겪은 문제들을 하나씩 기록해 보자
svgr
React 프로젝트 일 당시 CRA(create react app)이 아닌 vite 번들러를 통해 프로젝트를 생성했었다.
그래서 svgr 관련 설정이 vite.config.ts에 되어있었다.
import react from "@vitejs/plugin-react";
import { resolve } from "path";
import { defineConfig } from "vite";
import svgr from "vite-plugin-svgr";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react(), svgr()],
resolve: {
alias: {
"@src": resolve(__dirname, "src"), // 절대 경로 설정
},
},
});위와 같이 간단한 설정으로 돼있었고 큰 문제없이 svgr을 통해 조건부에 따른 이미지 색상 변경 등을 편리하게 사용했다.
그런데 Next.js로 마이그레이션 하면서 갑자기 프로젝트 전체의 이미지 크기가 작아지는 현상이 발생했다.
개발자 도구로 살펴보니 react일 때는 네비게이션 바의 각 icon의 width와 height 값이 본인의 기본 width, height 값으로 잘 렌더링 되고 있었고, next에서는 본인의 기본값과 다른 크기로 렌더링 되고 있었다.
무엇이 문제인지 알아보니
next.config.js
/**
* @type {import('next').NextConfig}
*/
const nextConfig = {
reactStrictMode: true,
webpack(config) {
config.module.rules.push({
test: /\.svg$/,
use: [
{
loader: "@svgr/webpack",
options: {
icon: true,
},
},
],
});
return config;
},
};
module.exports = nextConfig;options안에 icon:true로 설정돼 있던 게 문제였고, 각 icon의 width, height을 지정해주지 않았을 때, 기본 width와 height을 따라가게 하는 설정을 해줬어야 했다.
icon: true
- width/height를 제거하고 1em 크기로 강제 설정됨
- SVG를 아이콘처럼 취급하여 원본 크기 정보를 무시함
dimensions: true
- 원본 width/height 값을 유지함
- icon: true가 기본값으로 적용되어 있다면 icon 설정이 우선적으로 적용되어 dimensions 설정을 덮어쓰게 됨
이런 이유 때문에 두 개의 속성을 같이 적용해줘야 한다.
options: {
dimensions: true,
icon: false,
},그리하여 options 안에 이 속성을 추가하고 각 icon 파일들이 지정해주지 않아도 본인의 기본 width, height를 따라가도록 하니 문제가 해결됐다!