메인프로젝트 최종발표일을 하루 남겨두고 갤러리 기능을 추가하자는 얘기가 나왔다.
일정한 크기의 이미지, 태그, 짤막한 글이 가로로 나열되고, 스와이퍼 기능과 무한 스크롤 기능을 적용하자고 했다.
내가 맡은 부분은 모달 형식의 post 창이다.
이미지를 일정한 크기로 업로드하기위해 width,height에 고정값을 할당하면 일정한 크기로 이미지가 잘리지만 사용자가 원하는 이미지의 부분을 자르기 위함, 관리자 또한 깔끔한 갤러리 구현을 위해 이미지 크롭 업로드를 구현하자는 얘기가 나왔다.
구현을 위해 여러 react 이미지 크롭 라이브러리를 알아봤다.
- react-image-crop
- react-easy-crop
- react-cropper
위 세가지가 대표적인 라이브러리였고,
처음에는 react-cropper를 이용해서 구현하고자 했다.
왜냐.. 코드샌드박스에 데모가 있었기때문이다.
- react-cropper: https://codesandbox.io/s/wonderful-pine-i7fs3
오늘 찾아보니 각 라이브러리의 데모가 나오긴 한다.
- react-image-crop: https://codesandbox.io/s/react-image-crop-demo-s8xr4?file=/src/index.js
- react-easy-crop: https://codesandbox.io/s/react-easy-crop-v69ly910ql
하지만 곧바로 난관에 봉착했는데 react-cropper의 데모는 ts로 작성된 코드라는 점이다.
마음이 급했던 나는 ts를 js로 변환해서 쓰는 (무모한) 시도를 했다.
그후 여러가지 오류를 겪고, 이렇게 해서는 안되겠다는 결론에 도달했다.
결국 react-easy-crop을 이용해서
1. 크롭 이미지의 좌표를 받아오고,
2. 그 좌표를 blob으로 변환하고,
3. 그 blob을 file로 변환해서,
4. file을 api요청해서 aws주소를 받아오는 데까지는 성공했으나,
시간이 빠듯해서 width,height에 고정값을 할당하는 걸로 이미지 업로드를 구현했다 ^^..
그래도 해결책을 찾는 과정이 재밌었고, 3번의 blob을 file로 변환하는 데서 애를 먹었는데 성공해서 뿌듯한 경험이었다😊
