inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

31-07-image-upload-preview / image-upload-submit

이미지 업로드 최적화에 대해 고민이 있습니다.

해결된 질문

539

이재인

작성한 질문수 1

0

안녕하세요! 이미지 업로드 최적화에 대해서 질문이 있습니다. (수정하기 부분) 최적화 진행전에는 상품 수정페이지에서 useEffect를 사용해서 이미지 주소를 가져온다음 state에 저장한 후 props로 전달하여 작성했던 이미지를 보여주고 있었습니다 .하지만 최적화에서는 미리보기 주소를 사용해서 보여주고 있어서 미리보기 주소를 넘기고 싶은데 fetchUseditem에서는 images를 File[]이 아니라 String[]으로 받아오고 있어서 미리보기 주소를 어떻게 만들어서 전달해야 할지 고민입니다... 수정하기 페이지 접속시 state값이 초기화되어서 이 값을 어떻게 유지해야할지 모르겠습니다.  현재 이미지 버튼 컴포넌트에서는 onChangeFileUrls함수에 file과 미리보기 주소 , 해당 인덱스를 전달하고 있습니다.onChangeFileUrls함수에서 state에 저장후 uploadFile를 하여 받은 결과를 사용해서 상품을 작성하고 있습니다.

react node.js seo graphql next.js

답변 1

0

노원두

안녕하세요! 재인님!

해당 문제의 경우, 복잡하게 생각하면 너무 복잡해질 수 있으므로, 심플하게 풀어내는 것이 중요합니다!

해당 배열에 File과 string을 함께 넣을 수 있다면 [File, string, File, File, string] 이런식으로 사진이 저장될 수 있겠죠!

여기서 1.File은 미리보기 주소로 만들어서 보여주는데, 미리보기 주소 역시 마찬가지로 string 문자열이에요!

또한, 이미 2.fetchUseditem에서 받아온 서버에 업로드된 파일 역시 string 문자열입니다.

따라서 둘 다, <img src="string문자열" /> 부분에 입력하게되면 사진이 나오게 되므로 둘을 구분짓지 말고, File이면 string으로 바꿔서 보여주고, 처음부터 string이면 그냥 string 보여주는 방식으로 통일시키면 좋을 것 같아요!

1

이재인

아아 같이 저장하면 되는구나..

해결했습니다. 답변 감사합니다!!!

fetchBoardsOfMine, fetchBoardsCountOfMine 에러 문의드립니다

0

40

1

댓글 기능 구현 중 질문드립니다.

0

66

1

쿠폰코드 발급

0

136

2

example 서버 플레이그라운드, API 접속 모두 안됩니다.

0

87

2

문의드립니다!! ㅠㅠ

0

102

2

graphql 백엔드 서버가 포폴용 빼곤 접속이 안됩니다.

0

78

2

_app.js 작성 이후로 에러가 발생하네요

0

95

2

학습자료

0

71

2

학습자료가 안열립니다.

0

50

2

플레이 그라운드 퀴즈 문제 질문이 있습니다.

0

61

0

기존강의 구매자, 업데이트 끝인가요?

0

110

3

업데이트 버전 수강

0

89

2

완벽한 프론트엔드

0

136

2

나만의 쇼핑몰 샘플 페이지 접속 확인부탁드립니다.

0

84

1

graphql 접속이 안됩니다.

0

101

2

const, let 사용 질문 드립니다.

0

70

2

싸이월드 만들기 1탄 피드백 부탁드립니다.

0

122

2

회원가입 과제 피드백 부탁드립니다.

0

81

2

styled.span / styled.input "CSS 자동완성"

0

47

1

쿠폰 발급 관련

0

167

2

서버 502 error

0

247

2

쿠폰 다시 부탁드려도 될가여?

0

140

2

a태그 패딩했을때 왜 크기가 줄어들지 않고 늘어나나요

0

185

2

2분 44초 질문

0

132

3