프로젝트를 진행하면서 이미지 자르기를 구현하였는데,
브라우저에서는 제대로 작동하는 것이 모바일에서 올바르게 작동하지 않았다.
1번은 브라우저 환경이다.
2번은 모바일 환경이다.
이에 대해 대응해서 맞춰주어야하는 부분이 어디인지 확인하기 위해 디버깅을 하였다.
여러번 디버깅해본 결과
모바일 -> 브라우저로 넘어가서 자르기를 하면,
브라우저에서도 문제가 생기고,
브라우저 -> 모바일로 넘어가서 자르기를 하면,
모바일에서 문제가 없었다.
여기서 포인트는 초기값이다.
그림을 넣을 떄 잡아주는 초기값이 어떻게 잡히냐에 따라 원하는 결과 여부가 정해진다.
그런데 두려운 점은 내가 수정했을 때 오히려 모바일에서 되고..? 브라우저에서 되면 어쩌지? 그럼 이런 경우에는 값을 따로 주어야하나? 라는 고민이 되었다.
검색하던 도중 우연히 다른 라이브러리도 알아보게 되었는데,
바로 런하기보다는 어느정도 디버깅을 해보고 안된다면 시도해보겠다.
첫번째 접근 방법은 자른 값들을 비교해보겠다.
먼저 귀납적 탐구방법으로 접근해보겠다.
canvasPreview라는 자르는 함수의 값들을 참조하였고,
completeCrop 값들을 디버깅하고자 하였다.
워낙 관계가 복잡하게 설계되어있어서 여러번 렌더링 되는 모습이다.
허무하게도.. 디버깅을 해보면서 알았다.
초기에 기본값으로 주어진 값은 초기값 설정때문에 버그가 발생하는 것이었고,
이후에 넣어주는 사진들은 제대로 돌아간다는 사실을 알게되었다..
이전에도 계속 디버깅하면서 문제가 무엇인지 고민하였는데,
canvas 개념이 어렵기도하고 디버깅하다보니 정리가 안되고 계속 방황했는데,
정리하고자 블로그에 글을 썼더니 머리속에 있던 내용이 깔끔하게 정리 되었고,
구체적인 원리도 찾게되었다.
확실히 문제가 생겼을 때 정리하다는 것이 중요하다는 것을 다시 한번 느낀다.
what the hell...
그리고 비상시에 image-crop이 실패했을 때를 고려해서 킾했던 블로그를 올리며 글을 마무리 하고자한다.
얻은게 없었지만 스스로 복습하고 정리하는 습관을 들이자는 의미에서 블로그를 남기겠다.
