fix: 사용자 사진 업로드 시 미리보기가 안 바뀌는 문제 #390
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- 맨 처음 주어진 src로 ref 안에 배열을 가두어 새로운 src가 주어져도 사진이 변하지 않음 - setErrorImage 자체는 일종의 비제어 컴포넌트처럼 동작, ref를 이용할 이유 X
피움 static 서버에서 받아오도록 수정
hozzijeong
reviewed
Sep 21, 2023
Comment on lines
+16
to
+19
| const uploadedImageUrl = useMemo( | ||
| () => (file ? URL.createObjectURL(file) : imageUrl), | ||
| [file, imageUrl] | ||
| ); |
There was a problem hiding this comment.
C
여기서 memo를 사용한 이유는 같은 url에 대해서 중복 렌더링을 하지 않기 위함인가요?
There was a problem hiding this comment.
위쪽 움짤처럼 이미지 자체의 중복 렌더링 방지 효과가 있긴 합니다 근데 사실 키보드 한번당 3밀리초 개선효과밖에 없어서 좋다곤 못하겠네요..
Comment on lines
+23
to
+27
| export const isServerStaticData = (url: string) => { | ||
| const regex = new RegExp(`^${STATIC_BASE_URL}`); | ||
| return regex.test(url); | ||
| }; | ||
|
|
rawfishthelgh
pushed a commit
that referenced
this pull request
Sep 22, 2023
* refactor: 사전 식물 이미지 해상도를 조정한다 (#387) * feat: 사진 크기에 따라 url을 제시하는 유틸 함수 * feat: 확장자별로 사진 로딩 시도 하나의 url로 로딩 실패하면 다음 url을 불러오는 방식 * refactor: Image의 size 픽셀만 가능하게 변경 유틸 함수가 계산 이슈로 픽셀만 받을 수 있어서 그에 맞게 변경함 * test: 원인모를 cypress 실패 주석처리 로컬에서는 너무나 잘 되지만 github action에서는 임의의 확률로 실패하는 코드 * test: 동작이 이상한 테스트 코드 제거 github action에서만 실패하는 수상한 코드 임시 주석 처리 * chore: cypress github action 버전 업그레이드 * chore: github action 수정 실험중입니다 * test: auth redirection 토스트 확인 삭제 * chore: e2e ci 실패시 스크린샷 저장 * chore: upload artifact 버전 명시 * chore: upload artifact 삭제 동작 방식에 대한 빠른 이해 실패 * test: 접속 후 대기시간 추가 리다이렉션을 확실히 하도록 하기 위함 * test: github actions에서만 안되는 테스트 제거 * chore: e2e ci 실패 슬랙 알림 활성화 * fix: 사용자 사진 업로드 시 미리보기가 안 바뀌는 문제 (#390) * feat: url이 피움 static인지 확인하는 유틸 함수 * fix: src를 바꿔도 이미지가 변하지 않는 현상 - 맨 처음 주어진 src로 ref 안에 배열을 가두어 새로운 src가 주어져도 사진이 변하지 않음 - setErrorImage 자체는 일종의 비제어 컴포넌트처럼 동작, ref를 이용할 이유 X * refactor: useFileUpload 호출마다 새 url 생성 방지 * test: msw mock data image url 변경 피움 static 서버에서 받아오도록 수정 * refactor: 각종 리팩터링 모음 (#391) * design: line-height 설정 * refactor: 모두의 정원 margin-bottom 설정 * refactor: 위치에 따라 select박스 위치 변경 * design: line-height 설정 * refactor: pending일 경우에 button block * refactor: modal 오픈시에 scroll 방지 * refactor: select 상태 제거 * design: 모두의 정원 header 수정 * chore: v1.1.1로 업데이트 --------- Co-authored-by: 정호진 <[email protected]>
hozzijeong
pushed a commit
that referenced
this pull request
Sep 26, 2023
* feat: url이 피움 static인지 확인하는 유틸 함수 * fix: src를 바꿔도 이미지가 변하지 않는 현상 - 맨 처음 주어진 src로 ref 안에 배열을 가두어 새로운 src가 주어져도 사진이 변하지 않음 - setErrorImage 자체는 일종의 비제어 컴포넌트처럼 동작, ref를 이용할 이유 X * refactor: useFileUpload 호출마다 새 url 생성 방지 * test: msw mock data image url 변경 피움 static 서버에서 받아오도록 수정
Choi-JJunho
pushed a commit
that referenced
this pull request
Oct 20, 2023
* feat: url이 피움 static인지 확인하는 유틸 함수 * fix: src를 바꿔도 이미지가 변하지 않는 현상 - 맨 처음 주어진 src로 ref 안에 배열을 가두어 새로운 src가 주어져도 사진이 변하지 않음 - setErrorImage 자체는 일종의 비제어 컴포넌트처럼 동작, ref를 이용할 이유 X * refactor: useFileUpload 호출마다 새 url 생성 방지 * test: msw mock data image url 변경 피움 static 서버에서 받아오도록 수정
hozzijeong
pushed a commit
that referenced
this pull request
Oct 20, 2023
* feat: url이 피움 static인지 확인하는 유틸 함수 * fix: src를 바꿔도 이미지가 변하지 않는 현상 - 맨 처음 주어진 src로 ref 안에 배열을 가두어 새로운 src가 주어져도 사진이 변하지 않음 - setErrorImage 자체는 일종의 비제어 컴포넌트처럼 동작, ref를 이용할 이유 X * refactor: useFileUpload 호출마다 새 url 생성 방지 * test: msw mock data image url 변경 피움 static 서버에서 받아오도록 수정
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🔥 연관 이슈
🚀 작업 내용
피움 정적 파일 보관소에서 온 사진 url만 해상도 변환 시도
https://pium.static.life로 시작하는 url만 해상도 변환 로직을 적용하게끔 바꿨습니다. 어차피 사진 해상도 이름 규칙은 저희끼리만 쓰는거라서 아예 외부 요청에 대해서는 검사조차 하지 않게 설정했어요사용자가 사진을 올리면
blob:https://pium.life/어쩌구이런식의 주소가 되어버려서 요 상황에서 바뀐 해상도를 요청하는 것을 막고자 하는 목적도 있습니다src를 바꿔도 이미지가 변하지 않는 현상 해결
useRef 안에 맨 처음에 받은 src를 이용한 주소들을 가뒀기 때문에 이후에 url이 바뀌어도 ref의 내용물이 변하지 않아서 보여주는 값은 예전 사진이었어요
useRef를 없앴습니다. 기본적으로 Image 컴포넌트 자체의 작동 방식이 (src를 직접 건드려서) 비제어 컴포넌트와 유사하다고 생각했기 때문에 지웠는데 큰 문제는 보이지 않았어요
useFileUpload 호출 시마다 새로운 objectUrl을 생성하던 것 방지
msw mock data의 사진을 unsplash가 아닌 피움 서비스에서 가져오도록 변경
이제 로컬에서도 변환된 사진을 잘 받아오는지 확인이 가능합니다. 아카시아는 일부러 없는 url을 넣었어요.
💬 리뷰 중점사항