팜팜팀 개발로그 1. 프론트 개발 시작: NextJS 폰트, svg 파일 import 에러 해결

팜팜(palm-farm)팀 프론트엔드 개발 팀원 최자연입니다.

작년(2023년) 말 팀에 합류하여 기획, 디자인, 데스크리서치, 사용자 인터뷰 등에 함께 참여하고 이번주에서야 개발에 착수했습니다. 개발하며 발생하는 여러 이슈들과 성과들을 디스콰이엇에 공유해보려 합니다.

팜팜 프론트엔드 개발 스택

언어: Javascript(Typescript)

프레임워크: NextJS

부끄럽지만 개발이 너무 오랜만이라 깃헙 기본적 사용법 복습 후 작업 시작..😅

NextJS 개발 Debugging

오랜만에 Next로 개발을 하려 하는데 이전에 못 보던 부분들이 생기기도 했고

이전까지는 회사에서 세팅해준 걸 기반으로 개발을 했어서 알게 모르게 수월했던 부분들이 있었는데 이번에는 혼자 다 해내야 한다.

1. Cannot use JSX unless the '--jsx' flag is provided

처음 create-next-app할 때 typescript 안 쓴다고 해서인가 이런 에러가 떴는데 다행히 구글링으로 쉽게 해결됐다.

2. 폰트 관련

import { Inter } from 'next/font/google' 
const inter = Inter({ subsets: ['latin'] })

근데 한국어 폰트는 적용이 안 된다.으으 굴림체 어쩔 거야..

구글링하다가 이 포스트 따라 적용해봤다. 더 나은 방법이 있을 것 같지만 일단 이대로 가는 걸로

3. SVG

SVG 파일을 사용할 수가 없다..

찾아보니 NextJS에서 svg 파일 import해서 쓰려면 @svgr/webpack을 설치해야 한다고 한다.

npm install --save-dev @svgr/webpack

그래도 여전히 같은 에러ㅠㅠ

우여곡절 끝에 거의 3시간만에 해결하긴 했는데 왜 되는지 모르겠다

근데 일단 되니까 안 건드릴래ㅠㅠ

구글링, 챗지피티, 예전 코드들, 공식문서 다 짜집기된 코드라 어디서 해결이 된 건진 모르겠지만

일단 안 됐을 적이랑 달라진 부분들은 아래와 같다.

Icon.tsx : icon svg 파일 import해 모아둔 파일

import ArrowLeft from 'public/assets/icons/icon-arrow-left.svg';
import ArrowRight from 'public/assets/icons/icon-arrow-right.svg';
...
export const Icon = {
 ArrowLeft,
 ArrowRight,
 ...
};

next.config.mjs : nextConfig 안에 아래 추가

webpack(config) {
    config.module.rules.push({
      loader: '@svgr/webpack',
      options: {
        prettier: false,
        svgo: true,
        svgoConfig: {
          plugins: [
            {
              name: 'preset-default',
              params: {
                overrides: { removeViewBox: false },
              },
            },
          ],
        },
        titleProp: true,
      },
      test: /\.svg$/,
    });
    return config;
  },

package.json : 이래도 되는 건지 모르겠지만 이전 코드 참고해서 수동으로 수정해줌

"@svgr/webpack": "^8.1.0", # devDependencies에 들어와있던 걸 dependencies로 옮겨줌

"webpack": "^5.72.0" # devDependecies에 추가

tconfig.json : 이전 프로젝트 코드 참고해 아래와 같이 수정

{
  "compilerOptions": {
    "target": "es2020",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "incremental": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "baseUrl": ".",
  },
  "include": [
    "global.d.ts",
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "next.config.mjs"
  ],
  "exclude": [
    "node_modules"
  ]
}

팜팜 프론트엔드 개발 스택

NextJS 개발 Debugging

1. Cannot use JSX unless the '--jsx' flag is provided

2. 폰트 관련

3. SVG

댓글