[지덕체 개발일지] 검증이 어려우면 도구를 제공하자!

Rudy·2021년 3월 5일
0

지덕체

목록 보기
6/15

지난 이야기

지난 시간에는 두 번째 리팩토링에 대한 이야기를 해봤는데요!
못 보셨던 분들은 이 링크 클릭!

지난 시간에 코드리뷰를 마치고 이호준 멘토님이 주문하신 파일 검증에 대한 로직을 만든 이야기를 해보도록 하겠습니다.

어떻게 파일을 검증하지

지금까지 제가 만든 코드에서는 이미지에 대한 검증을 별도로 하지 않고 확장자 정도만 체크하는 방식이었기 때문에 상품 사진들의 비율이 뒤죽박죽이었습니다.

멘토님은 이런 문제를 해결하기 위해 이미지의 사이즈 검증 로직을 비롯해 이미지 용량에 대한 검증 로직을 추가할 것을 주문하셨는데요.
용량은 기존에 사용하던 multer와 react-dropzone 라이브러리에서 지원해줬기 때문에 크게 어렵지 않게 추가할 수 있었습니다.

하지만 이미지 사이즈를 검증하는 것은 생각보다 어려웠는데요.
그래서 차라리 이미지를 크롭해서 올릴 수 있도록 도구를 제공하면 어떨까?! 하고 생각을 전환해봤습니다.

찾아보니 react-image-crop이라는 라이브러리가 있었죠.
다행히 친절하게 이 라이브러리의 사용법을 알려주는 강의가 있어서 버스에서도 보고 차에서도 보면서 사용법을 익혔습니다.

본가에서 불꽃코딩

오랜만에 본가에 내려갔지만 장소의 변화는 저를 막을 수 없습니다!
불꽃코딩으로 react-image-crop을 적용했는데요!
동영상을 똑같이 따라했지만 이미지가 이상하게 크롭되는 문제가 있어서 직접 콘솔에 로그를 찍어가며 디버깅하는 것도 성장에 큰 도움이 되었습니다.

그리하여 드디어 완성된 저의 지덕체 초기 버전을 공개합니다!!!

다음 시간에는 멘토님께 피드백 받은 결과와 수정페이지 제작에 대해 글을 쓰도록 하겠습니다.
오늘도 긴 글 봐주셔서 감사합니다!

(해당 시리즈는 네이버 블로그에 있던 저의 글을 velog로 옮긴 것임을 밝힙니다.)

profile
Run, as you always do

0개의 댓글