수정하기 기능

Question

이제 promise.all을 사용해서 이미지 미리보기는 가짜 URL로 보여주고 게시글 등록 mutation을 날릴때 이미지 upload 요청을 보내고 응답받은 url을 mutation을 날리고 있는데 수정하기할때도 uploadImage을 하기 위해서 코드의 양이 길어지는데 코드는 길더라도 이게 더 효율적인 방식인건가요?? 그리고 이렇게하면 fetchBoards의 결과로 받아온 결과는 string 타입이고 uploadImage에 사용하는 이미지는 FIle 타입이라서 creacteBoard처럼 각각 다른 배열에 담아서 보내기는 어렵고 만약 upload하고 응답받은 url이면 skip하고 File타입의 데이터라면 imageUpload를 실행시켜 url을 받아오와 배열에 추가해서 updateBoardInput 객체에 추가해서 mutation 보내려고 하는데 이런식으로 접근하는게 맞는지 궁금합니다

노원두 · Answer

안녕하세요! 현민 님! 현민님께서 생각하신 방법이 모두 맞습니다! 여기서 추가로 현민님께서 궁금해 하실 부분은, "코드의 양이 길어지는데 더 복잡한 것 아닐까요?!" 정도로 볼 수 있을 것 같은데요! 이 부분은 딱 1번만 만들어서 함수 또는 커스텀훅 형태로 잘 보관 해 놓게 되시면, 필요할 때마다 쏙쏙 뽑아서 사용할 수 있으니 1. 확장성, 2. 재사용성, 3. 성능 면에서 굉장히 효율적 이겠죠?!

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. Promise.all 을 사용하여 이미지 미리보기를 위한 가짜 URL 생성과 같이, 이미지 업로드 요청과 동시에 게시글 등록 뮤테이션을 진행하는 방식은 매우 효율적인 개발 패턴 중 하나입니다. 특히, 비동기 처리 작업을 병렬로 수행하여 전체 응답 시간을 줄일 수 있다는 장점이 있습니다. 따라서 코드의 길이가 다소 길어진다 하더라도, 이러한 방식으로 처리하는 것이 전반적인 성능과 사용자 경험 측면에서 유리할 수 있습니다. 또한, 수정하기 기능에서도 이미지 업로드가 필요한 경우, 비슷한 접근 방식을 취하는 것이 일관성 있고, 이해하기 쉬운 코드를 만들 수 있는 방법입니다. 기존 게시글에서 이미지 데이터를 가져올 때 string 타입(URL)과 File 타입을 구분하여 처리하는 방식은 올바른 접근입니다. 이미 업로드된 이미지(URL)는 건너뛰고, 새로운 이미지( File 타입)만 업로드한 후, 반환받은 URL을 게시글 수정 요청에 포함시키는 방식은 비효율을 최소화하고, 필요한 작업만 수행하도록 하는 좋은 전략입니다. 결론적으로, 말씀하신 방식대로 이미지를 처리하고, 수정하기 기능에서도 유사하게 접근하는 것은 적절하며, 전체적인 어플리케이션의 성능과 사용자 경험을 고려할 때 효율적인 방식입니다. 코드의 양이 다소 길어지더라도, 이를 통해 얻을 수 있는 이점을 고려할 때, 올바른 접근 방식을 선택하신 것으로 보입니다.