개발/React

    React-Swiper로 미리보기 input file 구현 하다 겪은 문제

    이미지 추가를 누르면 추가된 file 데이터를 reader.readAsDataURL(file);로 base64로 변환후 미리보기 기능을 구현해줬다. 기능 구현후 이상없이 잘 작동하나 싶었지만 현재 UI가 전체 넓이를 넘어가면 swiper 되어야하는 요구사항이 들어가서 react-swiper 를 사용하였다. 문제는 각 리스트의 넓이가 auto이며 무한 loop가 아니어서 그런지 4번째 이미지처럼 가로로 엄청 긴 이미지가 들어가면 translate값을 제대로 계산하지 못해서 스와이프가 끝까지 되지않는 현상이 발생했다. 공식문서로 가서 api를 읽던준 swiper.update()로 해당 현상을 해결할수있을꺼라 생각했지만 해결되어질 기미가 보이지 않았다. window창이 리사이징되면 translate값이 다시 ..