Skip to content

fix: 이미지 변경 시 새로 렌더링 되도록 수정#126

Merged
sudosubin merged 5 commits intodevelopfrom
feature/image-change
Apr 25, 2025
Merged

fix: 이미지 변경 시 새로 렌더링 되도록 수정#126
sudosubin merged 5 commits intodevelopfrom
feature/image-change

Conversation

@sudosubin
Copy link
Contributor

변경 사항

스크립트 수정

기존에는 사용자 데이터의 id를 결정할 때 ??를 이용해서 id가 존재하지 않으면 무작위 문자열을 생성해 사용했었는데, ??는 nullish coalescing operator로 값이 null이거나 undefined 일 떄에만 동작합니다. 실제로는 비어있는 셀에서는 빈 문자열이 응답으로 내려와 이 로직을 타지 않는 문제가 있었고, || operator로 변경했습니다.

참고로 현재는 사용자 데이터 시트에 id 셀을 추가하여 값을 추가해두어서 id 값이 잘 결정되고 있습니다.

CleanShot 2025-04-24 at 20 39 49@2x

이미지 렌더링 수정

Image의 src가 변경될 때, 새로운 이미지를 완전히 로드하기 전까지 이미지가 유지되다가 뒤늦게 변경되는 현상이 있었습니다.

key 값을 src와 동일하게 넣어서 reconciliation에 따라서 다시 즉시 렌더링 되고, 그 과정에서 기존 이미지가 계속 유지되지 않도록 수정했습니다.

as-is to-be
CleanShot.2025-04-24.at.20.43.09.mp4
CleanShot.2025-04-24.at.20.42.29.mp4

@vercel
Copy link

vercel bot commented Apr 24, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
sipe-team ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 25, 2025 1:49am

Copy link
Contributor

@froggy1014 froggy1014 left a comment

Choose a reason for hiding this comment

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

저거 한번만 리뷰해주세용.

LGTM

const row = it['_rawData'];

const thumbnailId = (row[12] ?? '').match(/\/d\/(.*?)\/view/)?.[1] ?? '';
const key = row[0] ?? Math.random().toString(36).substring(2, 15);
Copy link
Contributor

Choose a reason for hiding this comment

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

앗 그러네요. 감사합니당 ㅎ

<>
{renderFillImage(
<NextImage
key={src}
Copy link
Contributor

Choose a reason for hiding this comment

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

키가 없었다니.

refactor: improve image fallback handling
@sudosubin sudosubin merged commit eb934eb into develop Apr 25, 2025
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants