Skip to content

Feature/158 팀페이지 이미지 최적화 #168

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wonsik3686 merged 4 commits into from
Mar 7, 2025
Merged

Feature/158 팀페이지 이미지 최적화 #168

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3e2f6bc
chore: svgr/webpack 추가 #158
wonsik3686 Dec 2, 2024
06ba494
chore: svgr 관련 설정 추가 #158
wonsik3686 Dec 2, 2024
58bdebc
refactor: 팀페이지 불필요한 svg 형식을 webp 로 변경
wonsik3686 Dec 2, 2024
ce7a166
feat: 팀 페이지 이미지 로딩 최적화
wonsik3686 Mar 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 28 additions & 0 deletions next.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
/* eslint-disable @typescript-eslint/no-unsafe-return */
/* eslint-disable @typescript-eslint/no-unsafe-call */
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
Expand All @@ -13,6 +16,31 @@ const nextConfig = {
},
],
},
webpack: (config) => {
// 기존 SVG 파일 로더 규칙을 찾습니다.
const fileLoaderRule = config.module.rules.find((rule) =>
rule.test?.test?.('.svg')
);

config.module.rules.push(
// 기존 규칙을 재적용하되, ?url 로 끝나는 SVG 파일에만 적용합니다.
{
...fileLoaderRule,
test: /\.svg$/i,
resourceQuery: /url/, // *.svg?url
},
// 나머지 *.svg 파일을 React 컴포넌트로 변환합니다.
{
test: /\.svg$/i,
issuer: fileLoaderRule.issuer,
resourceQuery: {
not: [...fileLoaderRule.resourceQuery.not, /url/],
}, // *.svg?url 제외
use: ['@svgr/webpack'],
}
);
return config;
},
};

export default nextConfig;
Copy link

@github-actions github-actions bot Mar 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

코드 리뷰:

  1. ESLint 비활성화 주석은 일시적인 해결책으로 사용될 수 있지만, 안전하지 않은 코드를 허용하는 것이므로 주의가 필요합니다. 실제로 안전하지 않은 코드를 사용하는 이유가 명확하다면 주석에 이유를 명시하는 것이 좋습니다.

  2. webpack 설정 부분에서 SVG 파일 로더 규칙을 수정하는 부분이 있습니다. 기존 규칙과 새로운 규칙을 추가하는 방식으로 처리하였는데, 잘못된 규칙을 추가할 수 있는 위험이 있습니다. 규칙을 정확히 파악하고 추가해야 합니다.

  3. 해당 코드에 대한 종단간 테스트가 필요하며, 모든 케이스에 대해 테스트를 진행하여 예기치 않은 동작을 방지해야 합니다.

개선 제안:

  1. 안전하지 않은 코드 사용 이유를 명확히하고, ESLint 비활성화 주석을 삭제하고 대안을 찾는 것이 좋습니다.
  2. webpack 설정 부분을 보다 정확하게 구성하고, 규칙을 신중하게 추가하여 예기치 않은 동작을 방지해야 합니다.
  3. 코드의 각 부분에 주석을 추가하여 이해하기 쉽게 작성하는 것이 좋습니다.

Loading