이미지 선택 취소 시 알림 관련

[bolam-o]

thumbnail_maker/app.js

Lines 137 to 141 in 200ff2b

	let imgUrl = prompt('이미지 주소를 입력하세요 😇');
	if (!imgUrl) {
	alert('올바르지 않은 URL입니다 😨');
	return;
	};

원국님 안녕하세요 :)

Velog에 올려주신 썸네일 메이커 관련해서 궁금한 부분이 생겨서 이슈로 남깁니다.

위 코드 내 prompt에서 취소를 선택할 경우 !imgUrl 검증 부분에 의해 선택하지 않고 취소를 하였음에도 불구하고 옳바르지 않은 이미지 주소라는 알림이 발생하는데요.

이 부분을 혹시 취소를 할 경우 알림이 발생하지 않도록

 let imgUrl = prompt('이미지 주소를 입력하세요 😇'); 
 if (!imgUrl) { 
   return; 
 }; 

위와 같이 처리하고 이미지 주소에 대한 유효성 검사를 추가하는 방법은 어떠신지에 대해 의견 남겨봅니다 :)..

[wonkooklee]

소중한 의견 주셔서 정말정말 감사합니다. 불필요하게 alert을 띄워 사용자의 불편감을 야기하는 것은 말씀하신 바와 같이 좋은 방식이 아닌 것 같습니다. alert 다이얼로그 대신 버튼 위에 작게 툴팁 같은 메시지(e.g. '잘못된 형식의 주소입니다')를 띄우는 방법으로 교체하고, 이미지의 유효성을 비동기적으로 확인할 수 있는 별도의 validation process를 연구하겠습니다. 감사합니다 🙇🏻

[bolam-o]

즉각적인 피드백 감사합니다! 전달드리고 싶은 내용이 전달되었으니 해당 이슈는 닫도록 하겠습니다. 😊

[wonkooklee]

감사합니다 🥰

[raejoonee]

정규표현식을 사용해서 유효한 주소인지 검증하는 방법은 어떨까요?

const regex = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(:[0-9]+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)/;
let imgUrl = prompt('이미지 주소를 입력하세요 😇'); 
if (imgUrl === null) return; // 취소 눌렀을 때 알림이 발생하지 않도록
if (!imgUrl.match(regex)) { // 유효하지 않은 주소를 입력했을 때 알림 발생
  alert('올바르지 않은 URL입니다 😨'); 
  return; 
}; 

[raejoonee]

해당 이슈 관련하여 PR을 열었는데, 확인해주시면 정말 감사드리겠습니다 😊