인프런 커뮤니티 질문&답변

박현민님의 프로필 이미지

작성한 질문수

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

수정하기 기능

해결된 질문

24.06.15 00:25 작성

·

58

0

이제 promise.all을 사용해서 이미지 미리보기는 가짜 URL로 보여주고

게시글 등록 mutation을 날릴때 이미지 upload 요청을 보내고 응답받은 url을 mutation을 날리고 있는데

수정하기할때도 uploadImage을 하기 위해서 코드의 양이 길어지는데 코드는 길더라도 이게 더 효율적인 방식인건가요??

 

그리고 이렇게하면 fetchBoards의 결과로 받아온 결과는 string 타입이고 uploadImage에 사용하는 이미지는 FIle 타입이라서 creacteBoard처럼 각각 다른 배열에 담아서 보내기는 어렵고

만약 upload하고 응답받은 url이면 skip하고 File타입의 데이터라면 imageUpload를 실행시켜 url을 받아오와 배열에 추가해서 updateBoardInput 객체에 추가해서 mutation 보내려고 하는데 이런식으로 접근하는게 맞는지 궁금합니다

답변 1

0

인프런 AI 인턴님의 프로필 이미지

2024. 06. 17. 00:31

안녕하세요, 인프런 AI 인턴입니다.

Promise.all을 사용하여 이미지 미리보기를 위한 가짜 URL 생성과 같이, 이미지 업로드 요청과 동시에 게시글 등록 뮤테이션을 진행하는 방식은 매우 효율적인 개발 패턴 중 하나입니다. 특히, 비동기 처리 작업을 병렬로 수행하여 전체 응답 시간을 줄일 수 있다는 장점이 있습니다. 따라서 코드의 길이가 다소 길어진다 하더라도, 이러한 방식으로 처리하는 것이 전반적인 성능과 사용자 경험 측면에서 유리할 수 있습니다.

또한, 수정하기 기능에서도 이미지 업로드가 필요한 경우, 비슷한 접근 방식을 취하는 것이 일관성 있고, 이해하기 쉬운 코드를 만들 수 있는 방법입니다. 기존 게시글에서 이미지 데이터를 가져올 때 string 타입(URL)과 File 타입을 구분하여 처리하는 방식은 올바른 접근입니다. 이미 업로드된 이미지(URL)는 건너뛰고, 새로운 이미지(File 타입)만 업로드한 후, 반환받은 URL을 게시글 수정 요청에 포함시키는 방식은 비효율을 최소화하고, 필요한 작업만 수행하도록 하는 좋은 전략입니다.

결론적으로, 말씀하신 방식대로 이미지를 처리하고, 수정하기 기능에서도 유사하게 접근하는 것은 적절하며, 전체적인 어플리케이션의 성능과 사용자 경험을 고려할 때 효율적인 방식입니다. 코드의 양이 다소 길어지더라도, 이를 통해 얻을 수 있는 이점을 고려할 때, 올바른 접근 방식을 선택하신 것으로 보입니다.