흑백과 디지털

 회사에서 한 프로젝트가 IE11 을 버리기로 했다.(내부 admin 시스템은 사용자가 사용하는게 아니라서 크롬에 최적화 해서 사용하고 있었다. 그런데 사용자 사이트는 누가 사용할지 모르기 때문에 IE11을 지원하고 있었다.) 이제는 IE11 때문에 사용 못했던 코드를 더욱 가감하게 사용할 수 있게 되었다. (물론 다른 프로젝트는 아직 IE11을 유지하고 있다. ) 

 이렇게 해서 여러가지 일을 처리하다 기존에는 관심을 가지지 않았던 신기한 JS 함수를 알게 되었다. 
IntersectionObserver 라고 해서 특정 element 가 화면에 viewport 에 보여주는지 여부를 알려주는 함수가 존재했다. 전에 이러한 기능을 구현하려고 했으면 timeout 함수로 주기적으로 element 가 어디에 위치하는지 검사 해야 했다. 그런데 이 함수가 있으면 그 것보다는 효율적으로 적절하게 이벤트를 호출해 주는 것 같다.  이 기능을 이용해서 특정 element 가 현재 viewport 를 기준으로 위에 존재하는지, viewport 에 보이는지, viewport 아래에 위치하는지 확인 할 수 있는 기능을 사용할 수 있다. 

https://stackoverflow.com/a/58981159/6652082

 bootstrap 4 에서 modal 창이 떠 있을 때 javascript 로 clipboard 에 text 를 복사려 하려고 했는데, 잘 동작하지 않았다.
일반적으로 clipboard 에 text 를 복사하는 동작은 보통 아래 처럼 구현한다.

function copyToClipboard(val) {
	var t = document.createElement("textarea");
	document.body.appendChild(t);
	t.value = val;
	t.select();
	document.execCommand('copy');
	document.body.removeChild(t);
}

body 에 textarea 를 추가하고, 거기에 copy 하고 싶은 text 를 집어 넣는다. 그리고 그 textarea 를 선택해서 copy 명령어를 보낸다. copy 가 끝나면 불필요한 textarea 를 삭제한다. 이 코드는 ios safari 에서도 잘 동작한다. 

어째든 이렇게 코드를 구현했는데, bootstrap modal 창이 떠 있을 때 이상하게 동작하지 않았다. (물론 원인도 한 참 후에 알게 되었다. ). 결국 찾아보니 stackoverflow 에 답이 있었다. 
 https://stackoverflow.com/a/48147679/6652082

$.fn.modal.Constructor.prototype._enforceFocus = function() {};

이렇게 처리 하면 된다. 

파이썬 flask 웹 프레임워크 버전을 2.0 대로 업데이트 하는 테스트를 진행하였다. 기존에는 request.is_xhr 이라고 해서 ajax 로 전달되는 것인지 아니면 http 에서 페이지 이동으로 들어온 것인지 구분해주는 코드가 있었다.( XHR 은 javascript 의 XMLHttpRequest 를 의미 한다.) flask 가 버전업 되면서 flask 에서 사용하는 werkzeug 버전도 업그레이드 되면서 더 이상 request.is_xhr 가 지원되지 않는다. 그래서 그 이유를 확인하다가  HTTP 헤더 중 X-Requested-With 헤더를 알게 되었다. (X- 가 붙은 헤더는 표준이 아니라는 의미라고 한다. )

 Javascript 를 이용한 네트워크 요청과 HTML 에서의 여러 method(get, post) 를 이용해서 접속하는 경우를 구별하는 원리를 몰랐는데, 관습적으로 Javascript 를 이용할 때  X-Requested-With 헤더값을 XMLHttpRequest 로 해서 전달하는 것으로 보인다.  jquery 의 ajax 구문을 이용할 때는 이 헤더가 기본적으로 설정되는 것 같다. 요즘 많이 사용하는 axios 같은 라이브러리의 경우 axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; 와 같이 수동으로 넣어(https://github.com/axios/axios/issues/1322#issuecomment-449626391 ) 주는 식으로 적용하는 것 같다. (X-Requested-With 가 관습적으로 넣은 것이라 request.is_xhr 가 사라지는 것으로 추정한다. )

 기존 flask 에서는 이 헤더가 XMLHttpRequest 값으로 오면 request.is_xhr 가 true 로 전달되는 것 같다. 어째든 이제는 헤더값을 직접 확인 해야 할 것 같다.  request.headers.get('X-Requested-With') == 'XMLHttpRequest' 일 때 ajax 이라고 생각해야 될 것 같다.