스마트 폰의 영상을 TV, 모니터로 출력해주는 장비

이미지
모바일 기기의 영상을 TV, 모니터로 출력하는 도구를 구매하게 되었습니다. 제가 사용하는 기기는 아이폰5S, 아이패드프로 9.7 입니다. 사용할 수 있는 도구를 확인해 보니 애플에서 나온 정품 젠더, 아이폰과 안드로이드 폰의 데이터 케이블을 붙여서 사용할 수 있는 호환 케이블이 있었습니다. [이지넷유비쿼터스] NEXT-830A 호환 케이블 (next-830a) 인터넷을 검색하면 이런 형태의 케이블이 많이 보입니다. 모양과 사용법은 전부 비슷해 보였는데 대부분 wifi기종 애플 기기는 사용할 수 없다고 되어 있었습니다. 제가 구매한 제품의 설명에는 wifi기종 애플 기기도 지원한다고 되어 있었고, 지원 하는 것을 확인 했습니다. (iOS11버전을 사용하고 있습니다.) 안드로이드에서는 별도의 앱에 대한 설명이 있었는데 따로 설치할 필요는 없었습니다. 처음 기기를 연결하면 아이폰은 권한 허용, 안드로이드는 디버깅 모드를 요구합니다. 추측에 의하면 HDMI 출력부에 있는 몸통에 별도의 연산 장치가 있어서 빠르게 화면을 캡쳐 하는 것 같았습니다. 별도의 운영체제를 내장하고 있어서 연결되는 기기의 OS버전에 따라 업데이트를 해야 할  것 같습니다. (업데이트 방법은 따로 설명이 없네요.) 발열이 심합니다. 따뜻한 정도가 아니라 정말 뜨겁습니다. 미러링 되는 영상을 봤을 때 정품 젠더보다 부드럽지 못합니다. Lightning Digital AV 어댑터 정품젠더 (lightning digital AV 어댑터) 비쌉니다. 설치가 간편하고 발열도 적습니다. 애플 기기와 호환성에 대해서는 고민할 필요가 없습니다. 특징으로는 미러링 되는 화면에 비율에 상관없이 레터박스가 생깁니다. 정품젠더를 지원하는 앱이 별도로 있으며, 그런 앱에서만 전체 화면으로 표시가 됩니다. 패드의 색감과 미러링 되는 색감에 차이가 있습니다. (앞서 설명한 호환 케이블은 패드의 ...

Blogger에 개인 소스 추가하기

이미지
블로그에 별도로 기능을 추가하고 싶을 때가 있다. 외부에 있는 소스의 링크를 가지고 오고 싶을 수 도 있고, 자신이 간단하게 만들어 집어넣고 싶을 수 도 있다. 사용자가 코드를 추가할 수 있는 간단한 방법은 다음과 같다. 1. 관리자 페이지에서 레이아웃에 들어간다. 2. 레이아웃에서 필요한 부분에 가젯 추가를 누른다. 3. 기본 항목에 있는 HTML/JavaScript 를 추가한다. 3. 이름을 넣고, HTML 소스를 작성한다. 직접 작성한 소스가 복잡하다면 다른 에디터에서 작성하고 복사해 넣는 것을 추천한다. 저장 버튼을 누르면 Blogger에 적용된다.

텍스트 박스 입력시, 최신 값 가지고오기

텍스트 박스에 값을 입력할 때, 입력되는 순간마다 값을 가지고 와야하는 경우가 있다. `keydown` 이라던가 `input` 같은 이벤트를 사용한다. 이벤트 핸들러 내에서 바로 값을 가지고 오면, 지금 입력하고 있는 글자는 가지고 올 수 없다. 지금 입력되는 글자를 포함하여 가지고 오는 방법은 무엇이 있을까? 구글에서 "how to get incomplete text from input text"로 검색을 하니, 스택오버플로우에서 이에 대한 질문과 답변 을 찾았다. `mousedown`, `input` 이벤트는 변경사항이 적용되기 전에 값을 가지고 온다. 이는 필드에 도달하기 전에 이벤트를 차단할 수 있는 기능을 제공하기 때문이다. 값을 가지고 오기 전에 필드의 내용이 바뀔 수 있는 시간을 줌으로써 이 제한을 피할 수 있다. 간단한 방법으로는 `setTimeout()`를 사용하는 것이다. 이벤트 핸들러 내부에 `setTimeout(function () {} , 1)`을 사용하여 1ms의 간격만 두어도 필드의 내용이 최신 값으로 적용되어 현재 입력된 값을 같이 가지고 올 수 있다. el.addEventListener('input', function (evn) { // setTimeout 내에서는 this의 대상이 달라진다. var target = evn.target; setTimeout(function () { console.log(target.value); }, 1); });

HTML img 태그가 margin-top 속성으로 끝까지 올리가지 않는 이유

결론부터 말 하자면 오류는 아니고, 개발자의 무지에 의한 착각이다. img 태그가 이미지를 표시하면 부피가 있어서 {display: "block"}이라고 착각할 수 있는데, 대부분의 브라우저에서는 {display: "inline-block"}을 기본값 으로 가진다. 그래서 margin-top 값에 마이너스 값을 아무리 많이 주어도 라인 하나 정도의 간격을 넘어가지 못하는 것이다. 해결 방법은 {display: "block"}으로 스타일 값을 재정의 해주면 된다. 이제 원하는 만큼 margin-top 값에 마이너스 값을 사용하여 위로 이미지를 올릴 수 있다. **원인을 찾다가 이에 대한 스택오버플로우  질문을 발견하여 이 글을 작성한다.**

맥 미니 크롬에서 Intel HD 3000 그래픽 카드의 WebGL 오류

 Chrome 브라우저에서 내 mac mini 2011 mid 컴퓨터의 WebGL 기능을 막았다. 정확히는 mac 제품에 들어있는 HD3000 그래픽 카드를 막은 듯 하다. 이전에 잘 작동하던 3D viewer 프로그램이 Chrome 브라우저에서 오류 메세지를 띄웠다.   ` three.js:19603 THREE.WebGLRenderer: Error creating WebGL context. `  사용되는 라이브러리는 Javascript Three.js다. 이와 관련된 질문을 검색하던 중 다음 페이지를 보게 되었다.   https://github.com/mrdoob/three.js/issues/4927#issuecomment-245903770  blvz라는 ID의 댓글을 보면 HD3000 그래픽 카드를 Chrome에서 막은 듯 하다. 해결 방법은 Chrome 주소창에 chrome://flags/#ignore-gpu-blacklist 를 입력하고 ` 소프트웨어 렌더링 목록 무시 ` 부분을 활성화 한다. Chrome 브라우저를 재실행 하면 된다.  추가로 gpu blacklist 라는 게 있는듯 해서 해당 내용을 확인해 보고 싶었다.   https://cs.chromium.org/chromium/src/gpu/config/software_rendering_list_json.cc  (find: Intel HD 3000)  위 페이지에서 Intel HD 3000 을 검색하여 찾아보면  다음과 같은 줄이 나온다. ` "description": "Intel HD 3000 driver crashes frequently on Mac" `

맥 무선 공유를 이용해서 ipv6 환경 만들기

이미지
 엘 캐피탄( El Capitan ) 10.11.x 버전  이번에 공부용으로 앱을 하나 만들었다. 심사를 보냈지만 승인되지 못했다. 앱 내부에 웹 페이지를 띄우는 기능이 있는데 심사 과정에서 페이지가 뜨지 않는다는 것이다. 앱이 ipv6 환경을 지원하는지 확인해 보라고 한다.  테스트를 해야 하는데 어떻게 해야 하는가?  맥(Mac)에는 무선 랜이 내장되어 있다. 유선 단자까지 있다면 유선으로 외부 인터넷을 연결하고 공유 기능으로 무선 공유기 처럼 사용할 수 있다. 무선 공유기로 네트워크를 만들면서 해당 영역을 ipv6 로 설정하는 방법은 간단했다.  공유설정에서 키보드의 Option(윈도우의 Alt) 키를 누르고 인터넷 공유 항목을 클릭하면 가운데 하단부에 NAT64 네트워크 생성이라는 단추가 생긴다. 이를 체크하고 공유를 시작하면 내부 내트워크가 ipv6 로 설정된다. 터미널에서 ifconfig 를 사용하면 하단부에서 ip를 확인할 수 있다.   공유기가 된 맥에 웹 서버가 올라가 있다면 http://[xxxx:xxxx:xxxx:xxxx:xxxx:xxxx:xxxx:xxxx]/ 형태로  접근이 가능하다. 단축 표기를 사용하면 상대적으로 짧게 적을 수 있다. ipv6를 사용할 때는 ip를 대괄호([])로 묶어서 사용해야 한다.