Feature/158 팀페이지 이미지 최적화 #168
Conversation
- next.config.mjs, tsconfig, svgr.d.ts 를 추가 혹은 수정하여 svgr 관련 설정 추가
- squoosh 를 사용하여 svg 형식을 사용할 필요가 없는 이미지 파일에 대해 webp 로 변환
- Next.js Image 컴포넌트의 priority 속성 추가하여 이미지 로딩 성능 개선
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for coworkers-colla ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| }, | ||
| }; | ||
|
|
||
| export default nextConfig; |
There was a problem hiding this comment.
코드 리뷰:
-
ESLint 비활성화 주석은 일시적인 해결책으로 사용될 수 있지만, 안전하지 않은 코드를 허용하는 것이므로 주의가 필요합니다. 실제로 안전하지 않은 코드를 사용하는 이유가 명확하다면 주석에 이유를 명시하는 것이 좋습니다.
-
webpack 설정 부분에서 SVG 파일 로더 규칙을 수정하는 부분이 있습니다. 기존 규칙과 새로운 규칙을 추가하는 방식으로 처리하였는데, 잘못된 규칙을 추가할 수 있는 위험이 있습니다. 규칙을 정확히 파악하고 추가해야 합니다.
-
해당 코드에 대한 종단간 테스트가 필요하며, 모든 케이스에 대해 테스트를 진행하여 예기치 않은 동작을 방지해야 합니다.
개선 제안:
- 안전하지 않은 코드 사용 이유를 명확히하고, ESLint 비활성화 주석을 삭제하고 대안을 찾는 것이 좋습니다.
- webpack 설정 부분을 보다 정확하게 구성하고, 규칙을 신중하게 추가하여 예기치 않은 동작을 방지해야 합니다.
- 코드의 각 부분에 주석을 추가하여 이해하기 쉽게 작성하는 것이 좋습니다.
| "@svgr/webpack": "^8.1.0", | ||
| "@types/node": "^20", | ||
| "@types/react": "^18", | ||
| "@types/react-circular-progressbar": "^1.1.0", |
There was a problem hiding this comment.
이 코드 패치에서 @svgr/webpack 패키지가 추가되었습니다. 이 패키지가 사용된 목적과 영향을 확인해야 합니다.
의존성 업데이트가 필요한 경우, "@types/node", "@types/react" 등의 타입 정의를 최신 버전으로 업데이트하는 것이 좋을 수도 있습니다.
또한, 패키지 버전을 명시적으로 특정한 것보다는 범위로 지정해주는 것이 더 안전합니다.
코드 리뷰를 통해 이러한 측면들을 고려하여 개선할 수 있습니다.
| <rect width="181" height="64" fill="white"/> | ||
| </clipPath> | ||
| </defs> | ||
| </svg> |
There was a problem hiding this comment.
이 코드 조각은 SVG 형식으로 이미지를 만드는 것을 보여줍니다. 코드는 마스킹을 사용하여 이미지를 처리하며 선형 그라데이션을 배경으로 사용합니다. 개선을 위한 몇 가지 제안은 다음과 같습니다:
- 코드를 읽기 쉽게 하기 위해 주석을 추가하고 각 섹션을 설명하는 주석을 추가합니다.
- SVG의 마스크 및 클립 경로를 정의하는 이름이 이해하기 쉽지 않습니다. 더 명확한 이름을 사용하는 것이 좋습니다.
- 코드에 잠재적인 오류는 발견되지 않았지만, 모든 요소가 예상한 대로 정확히 잘 동작하는지 확인하는 단위 테스트를 작성하는 것이 좋습니다.
코드는 잘 작성되어 있지만 가독성을 향상시키고 명확성을 높이기 위해 일부 변경이 필요할 수 있습니다.
| src={member.userImage ? member.userImage : '/icons/Member.webp'} | ||
| alt="user" | ||
| width={32} | ||
| height={32} |
There was a problem hiding this comment.
이 코드 패치의 일부는 멤버 속성의 이미지가 비어 있거나 유효하지 않은 경우에 대비하여 이미지를 따로 제공하는 데 의미가 있습니다. 그러나 코드의 중복이 존재하며 DRY 원칙(Do not Repeat Yourself)을 준수하면 코드 유지보수성이 향상될 수 있습니다. 두 번째 경우의 이미지 경로를 변수로 추출하고 이를 재사용하는 방법을 고려할 수 있습니다. 또한, 이미지 확장자로 .svg 대신 .webp를 사용하고 있지만 모든 브라우저가 .webp를 지원하지 않을 수 있으므로 브라우저 호환성을 고려하여 처리하는 것이 중요합니다.
| src="/icons/Gear.webp" | ||
| alt="setting" | ||
| width={24} | ||
| height={24} |
There was a problem hiding this comment.
이 코드 패치는 이미지 파일의 확장자를 변경하여 WebP 형식으로 수정하는 것입니다. WebP는 이미지 압축이 뛰어나고 웹 성능이 향상되는 형식이지만 브라우저 호환성에 따른 문제가 있을 수 있습니다. 이 점에 주의해야 합니다.
개선 제안:
- WebP 이미지를 사용하는 것은 좋지만, 호환성 문제를 고려하여 fallback 이미지를 고려하는 것이 좋습니다.
- alt 속성은 누락되지 않도록 모든 이미지에 추가하는 것이 웹 접근성에 좋습니다.
잠재적인 버그 위험:
- WebP 이미지 호환성 문제 때문에 일부 사용자들이 이미지를 보지 못할 수 있으므로 테스트와 모니터링이 필요합니다.
| declare module '*.svg?url' { | ||
| const content: any; | ||
| export default content; | ||
| } |
There was a problem hiding this comment.
이 코드 패치는 SVG 파일에 대한 모듈 선언을 하는 것으로 보입니다.
개선 제안:
- 첫 번째 모듈의 경우 FC와 SVGProps를 import하여 SVG 컴포넌트의 props를 정의하고 있는데, 좀 더 구체적인 prop 타입을 지정하면 더 명확하고 안정적일 수 있습니다.
- 두 번째 모듈의 경우 content의 타입이 any로 지정되어 있는데, 가능한한 구체적인 타입을 명시하는 것이 좋을 것입니다.
- 두 번째 모듈의 이름이 '*.svg?url'인데, 어떤 의도로 사용되는지 충분한 주석을 달아놓는 것이 좋을 것입니다. 이렇게 함으로써 다른 개발자들이 코드를 더 쉽게 이해할 수 있을 것입니다.
버그 리스크:
- 첫 번째 모듈에서 SVGProps를 사용하고 있는데, 실제로 필요한 타입인지 확인해야 합니다. 만약 다른 타입이 필요하다면 이 부분을 수정해야 할 수 있습니다.
| "svgr.d.ts", | ||
| "next-env.d.ts", | ||
| "**/*.ts", | ||
| "next.config.mjs", |
There was a problem hiding this comment.
코드 리뷰를 시작하겠습니다.
1.이 코드 패치에서는 "svgr.d.ts" 파일이 추가되었습니다. 이 파일이 필요한지 여부를 확인해야 합니다. 만약 필요하다면 괜찮지만, 필요하지 않은 경우에는 삭제하는 것이 좋습니다.
2."next.config.mjs" 파일이 포함되어 있는데, 해당 파일이 실제로 사용되는지 확인해야 합니다. 필요하지 않다면 제거하는 것이 좋습니다.
3.더 자세한 정보를 얻기 위해 코드의 전체 내용을 살펴보아야 할 것입니다. 또한 코드의 목적과 환경에 따라서 다른 개선점이 있을 수 있습니다. 코드 리뷰를 진행할 때는 다양한 측면을 고려하여야 합니다.
작업 내용
이번 PR에서는 팀 페이지의 이미지 최적화를 위해 여러 변경 사항을 적용하였습니다.
관련 이슈