new1cm

인터넷에 연결된 공유기가 있습니다. 그 공유기에 PC가 연결되어 있는데 영상을 스트리밍 하고 있습니다. (공유기는 ipTime, 운영체제는 윈도우10을 사용하고 있습니다.) 외부에서 PC가 인터넷에 연결되어 있는 것을 확인하기 위해 일정 주기로 ping을 보내 확인하려고 했습니다. 하지만 인터넷에 연결되어 있는 IP로 ping을 보내면 PC가 아니라 공유기가 ping에 응답을 합니다. 즉, PC의 동작 여부는 알 수 없었습니다. 나름 찾아본다고 검색을 해도 공유기에 연결되어 있는 PC에 ping을 보내는 방법을 찾을 수 없었습니다. 공유기의 포트포워딩을 통해 외부의 요청 신호를 내부로 넘길 수 있지 않을까 생각을 했지만 ping은 포트와 무관하다는 내용만 찾았습니다. 그러던 중 특정 포트로 ping을 보낼 수 있는 "tcping" 이라는 도구가 있다는 것을 알았습니다. https://elifulkerson.com/projects/tcping.php (해당 페이지에 다운로드와 사용 설명이 있습니다.) 이 도구는 "tcping.exe"파일을 받아, 윈도우의 파워쉘 혹은 명령프롬프트로 현재 경로에서 바로 실행하거나 "C:\Windows\System32"경로에 두어서 전역 호출로 사용할 수 있습니다. 포트번호를 따로 적지 않으면 80포트를 기본으로 사용합니다. 80포트를 기준으로, 인터넷에 연결되어 있는 공유기에서 80포트를 포트포워딩해서 내부PC의 80포트와 연결을 한 후, 외부에서 "tcping [ip] [port]"를 입력하면 ping을 보냅니다. #아이피가 123.123.123.1 이라고 가정 tcping 123.123.123.1 80 PC에 80포트를 사용하는 프로그램(보통 웹 서버)이 동작하고 있다면 정상적으로 신호를 주고 받게 됩니다. 반대로 해당 포트를 사용하고 있지 않다면 ping은 실패를 하게 됩니다. 주의할 점은 이 방식은...

소스트리를 설치하고 처음으로 비트버킷 저장소에 접근하는 과정에서 계정 정보를 입력하는 작은 창이 열립니다. 이 부분에서 실수를 하여 잘못된 비밀번호가 저장 되었고, 프로그램 내에서 변경 내역을 올리거나 받는 작업을 하지 못하는 상황이 발생했습니다. 프로그램의 전역 설정에 들어가 연결된 인증을 초기화 해도 접근이 불가능 해서 한동안 콘솔 창에서 push, pull 명령을 직접 입력해 주곤 했습니다. 그러다 검색을 통해 계정 정보를 다시 물어보도록 초기화 하는 방법을 알아내어 적어둡니다. 윈도우에서(저는 윈도우10을 사용하고 있습니다.) "C:\Users\[계정이름]\AppData\Local\Atlassian\SourceTree " 경로에 들어가면, "passwd" 라는 파일이 있습니다. 이 파일을 지우고 소스트리를 재시작 하면 리모트 저장소 접근시 다시 계정 정보를 물어보게 됩니다.

윈도우 10을 기준으로 작성합니다. 윈도우 시작시 크롬 브라우저를 전체 화면으로 실행하는 방법입니다. 개요는 크롬을 띄우는 명령어가 들어있는 배치파일을 만들어 윈도우의 시작프로그램에 등록하는 것입니다. 배치파일의 내용은 다음과 같습니다. @echo off "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --kiosk http://localhost/ exit 크롬의 실행파일을 찾아 실행하면서 '--kiosk' 옵션을 추가하고  그 뒤에 보여줄 경로를 적습니다. ( https://peter.sh/experiments/chromium-command-line-switches/#kiosk ) 제 PC에서는 크롬의 기본 경로가 'C:\Program Files (x86)\Google\Chrome\Application\chrome.exe' 이었습니다. (경로에 띄어쓰기가 있을 때는 ""로 감싸야 합니다.) 비어있는 텍스트 파일에 위 코드를 입력하고 확장자를 '.bat'로 변경하여 저장하면 배치 파일이 완성됩니다. 파일을 더블클릭 하면 실행 결과를 확인 할 수 있습니다. 기존에 크롬이 실행되고 있는 상태에서 실행하면 새로운 탭으로 창이 열립니다. 그렇기 때문에  모든 크롬 브라우저를 닫고, 실행해야 전체 화면으로 실행이 됩니다. 이렇게 실행된 전체 화면 크롬에서는 'Esc', 'F11' 단축키는 작동하지 않습니다. 창을 닫기 위해서는 'ctrl + w' 혹은 'alt + F4' 단축키를 사용해야 합니다. 다음으로 윈도우 10에서 시작프로그램에 등록하는 방법입니다. 시작버튼을 누르고 '실행'을 검색하거나 'windows(윈도우키) + r'을 눌러서 창을 띄웁니다. 'shell:st...

지금까지 webpack을 전역 저장소에 설치하고 커멘드창에서 'webpack'을 입력하여 실행했습니다. 인터넷에서 찾은 설명에는 개발하는 프로젝트별로 webpack를 설치한 후 사용하라고 되어 있지만 커맨드창에 'webpack'명령어를 바로 입력하면 전역에서만 실행이 됩니다. (전역에 webpack이 설치되어 있지 않으면 오류가 납니다.) 프로젝트별로 webpack를 실행하기 위해서는 npm의 'scripts'설정을 사용해야 합니다. ... "scripts": { "start" : "webpack --config webpack.config.js", "gogogo" : "webpack --config webpack.config.js" } ... ('--config' 옵션은 뒤에 나오는 경로의 설정파일을 사용한다는 의미 입니다.) npm start npm run gogogo scripts에 start, restart, stop, test 명령으로 설정한 경우, 위처럼 'npm' 뒤에 바로 붙여 사용할 수 있습니다. 이외의 명령은 'npm run' 뒤에 붙여 사용합니다. 'npm run'만 입력한 경우 사용가능한 scripts 명령이 표시됩니다. 'npm start'를 실행하면 개발자가 설정한 명령이 실행됩니다. 이 명령으로 실행되는 webpack은 npm이 설정된 로컬 저장소를 먼저 찾아보게 됩니다. webpack뿐 아니라 npm으로 설치된 실행 모듈은 이런 식으로 로컬 실행이 가능합니다.

 PS4 BD(Blu-ray Disc)를 중고거래 할 일이 있어서 우체국에서 박스를 구매하게 되었습니다.  우체국의 가장 작은 박스인 1호 박스(22 * 19 * 9)를 사용하면 에어캡포장을 포함해서 케이스의 높이에 맞게 넣을 수 있습니다.  에어캡을 두껍게 말았다면 신문지를 넣지 않아도 크게 흔들리진 않습니다.

제가 궁금했던 부분은 스팀 지갑에 있는 금액과 카드를 같이 사용해서 구매한 게임은 어떤 형태로 환불될까 하는 것이었습니다. 이번에 구매한 게임을 가지고 확인 해 봤습니다. 52000원 정도의 게임을 지갑 11000 + 카드 41000 정도로 구매 했습니다. 보통 카드로 전부 구매한 게임은 환불할 때 스팀 지갑으로 환불 할 것인지, 카드로 환불할 것인지 물어봅니다. 스팀 지갑으로 환불을 하면 빠르게 처리되지만 현금화 할 수 없습니다. 카드로 환불을 하게 되면 제 경험상 한 달 정도 후에 금액이 들어옵니다. (저는 해외결제 체크 카드를 사용합니다.) 스팀 지갑에 있던 11000원은 이전에 다른 게임을 스팀 지갑으로 환불받은 금액 입니다. 이번에 확인한 게임은 환불 방식을 선택하는 부분에 다음과 같이 표시 됩니다. 결론은  '스팀 지갑에 들어간 금액은 이전에 환불 받은 금액이라도 카드로 환불 안된다'  입니다. 카드로 결제한 금액에 대해서만 환불 방식을 적용할 수 있습니다.

laravel에 CSRF 보호기능 이 있기 때문에 파일 업로드 요청과 같은 POST요청은 해더 값에 별도의 토큰이 있어야 합니다. 자바스크립트 파일 업로드 라이브러리  fine uploader 5 를 사용하려면 해더값에 토큰을 넣어야 합니다. 해더에는 `X-CSRF-TOKEN`이라는 이름으로 토큰이 들어가 있어야 합니다. fine uploader 5에 이 해더를 적용하기 위해서는 아래 코드와 같이 'request.customHeaders' 항목에 추가하면 됩니다. var uploader = new qq.FineUploader({ element: document.getElementById('uploader'), request: { endpoint: 'url', customHeaders: { 'X-CSRF-TOKEN': 'TOKEN' } } }); 토큰 사용할 때는 laravel의 view소스 meta 태그에 지정해 두고, 자바스크립트를 이용하여 읽어 옵니다. 아래 jQuery에서 사용하기 위한 설명이 있습니다. 여기서 CSRF 토큰을 가지고 오는 부분을 참고하면 됩니다. CSRF-TOKEN 설정

비주얼스튜디오 코드(VS Code)를 사용하여 HTML문서를 작성하게 되면 단축어로 빠르게 HTML을 생성하는 것을 볼 수 있습니다. 태그를 작성하다 보면 자동으로 적용되는 경우도 있어서 에디터의 기본 기능이라고 생각하는 분도 있을 것 같습니다. 이 기능은 에디터가 자기만 사용하기 위해 만든 기능이 아니라 `Emmet`라고 불리는 별도의  도구 를 사용하는 것입니다. (다른 에디터에서도 플러그인 형태로 설치해서 사용할 수 있습니다.) 공식 가이드의 단축어 시트 설명을 보면 좀 더 잘 활용할 수 있습니다. 공식 사이트 , 단축어 시트

Webpack으로 빌드한 최신 파일은 설정을 통해 내가 원하는 경로에 넣을 수 있습니다. 그렇게 사용하던 도중, 그 파일을 다시 복사해 다른 경로에도 배포해야 할 일이 생겼습니다. 검색 실력이 모자라서 그런건지 기본 설정으로 처리하는 방법은 찾지 못했습니다. 결국 Webpack의 플러그인과 추가 별도의 js 파일로 처리하게 되었습니다. 핵심은 빌드가 끝난 후, 자동으로 다음 작업을 하는 것입니다. 그래서 찾은 게  Webpack Shell Plugin  입니다. 이 플러그인을 사용하면 빌드 후에 간단한 커맨드 명령어를 실행할 수 있습니다. plugins: [ new WebpackShellPlugin({ onBuildEnd: ['node ' + path.resolve(__dirname, 'buildFileCopy.js')] }) ] Webpack의 plugins 설정에 빌드가 끝나면 별도로 만든 `buildFileCopy.js`파일을 nodejs로 실행하도록 했습니다. `buildFileCopy.js` 파일 안에는 저에게 필요한 간단한 파일 복사 기능을 만들어 두었습니다. const path = require('path'); const copy = require('copy'); const RESET = "\x1b[0m"; const FG_RED = "\x1b[31m"; const FG_GREEN = "\x1b[32m"; const src = path.resolve(__dirname, 'dist/*.js'); const dest = path.resolve(__dirname, 'docs/js'); copy(src, dest, (err) => { if (err) { console.log(FG_RED); console.log(...

자바스크립트로 직접 만든 QR 스캐너. [ QR 스캐너 ] 사용하기 위해서는 브라우저에서 카메라 접근을 허용해야 합니다. 데이터 값 앞에 `http://` 혹은 `https://` 가 붙은 URL 주소인 경우, 해당 페이지로 바로 이동합니다. 해당 페이지는 깃허브에서 제공하는 pages 서비스를 이용하고 있습니다. 소스는  깃허브 페이지 에서 보실 수 있습니다. QR 코드를 분석하는 라이브러리는 jsQR 을 사용합니다.

이 책은 빅데이터와 그것을 이용해 새로운 형태의 질문, 좀 더 정확한 답을 찾을 수 있다는 사실을 소개하고 있습니다. 책의 홍보 타이틀에는 "구글 트렌드로 밝혀낸 충격적인 인간의 욕망"이라고 써져 있어서 구글이라는 회사와 사람들이 말하지 않는 진실이 주된 내용일 것 같았는데 그건 아니었습니다. (흥미를 유도하는 소재로 사용된 듯 합니다.) 이 책에는 사람들이 입력하는 검색어는 그 어떤 설문지의 답변 보다 진실에 가깝다고 이야기 하고 있습니다. 기술의 발전으로 사람들의 생활 패턴(검색, SNS등등)이 쉽게 축적되고, 이 세상은, 그 방대한 데이터의 활용방안을 찾고 있다고 알려주고 있습니다.

 `DATA_NAME`형태의 값을 `dataName`로 변환하는 자바스크립트 let name = 'DATA_NAME'; name = name.toLowerCase().replace(/_[a-z]/g, function (str) { return str[1].toUpperCase(); }); console.log(name);  전체 값을 `str.toLowerCase()`를 사용해 소문자로 변환합니다.  `/_[a-z]/g' 정규표현식을 사용해 앞에 언더바가 붙은 소문자 알파벳을 찾습니다. 당연히 매칭되는 값은 `_n`같이 `_`로 시작하는 두 글자 문자열이 됩니다.  자바스크립트의 `str.replace('a', 'b')`는 두 번째 인자에는 교체될 문자열이나 함수를 넣을 수 있습니다. 두 번째 인자에 함수를 넣으면 매칭되는 대상을 첫 번째 인자로 받습니다. 그리고 이 함수가 반환한 값으로 대상을 교체하게 됩니다. 그렇기 때문에 정규표현식으로 감지되는 문자열에서 두 번째 값만 대문자로 변환하여 반환하면 원하는 형태를 얻을 수 있습니다.

 자바스크립트 변수에 있는 값을 새로운 변수에 넣었을 때 숫자나 문자열 같은 경우는 값이 복사가 됩니다. var a = 1; var b = a; b = 2; console.log(a); //b의 값이 바뀌어도 a 값은 바뀌지 않는다.  하지만 object와 같은 객체가 들어가 있는 변수는 내부의 값이 같은 대상을 가리키게 됩니다. var c = {x: 1}; var d = c; d.x = 2; console.log(c.x); //c와 d가 같은 대상을 가리키고 있기 때문에 변경된 값이 출력된다.  간편하게 깊은 복사를 하는 방법은 아래와 같습니다. var e = {x: 1}; var f = JSON.parse(JSON.stringify(e)); f.x = 2; console.log(e.x); // 문자열로 반환된 값을 다시 객체로 변환하였기 때문에 값이 복사되었다.  주의사항, 간편하게 사용할 수 있다고 복사에 무조건 사용하면 안 됩니다. 객체의 메소드와 같이 함수는 복사되지 않기 때문입니다. 복사 대상이 가지고 있는 값의 특성을 고민해야 합니다. 자신이 만든 클래스로 구현된 인스턴스를 복사하는 것이라면 별도의 함수나, clone 메소드를 구현하여 값을 복사하는 게 좀 더 좋다고 생각합니다. (반복문이나 재귀를 사용하여 값을 일일이 새로운 객체에 넣는 방법.)

 테스트를 위해 무료로 3D 콘텐츠를 구할 수 있는 곳을 찾다가 좋은 곳이 있어 정리합니다. Sketchfab  자신이 만든 3D 콘텐츠를 판매하거나 공유할 수 있으며 커뮤니티 기능을 지원하는 사이트입니다. 미리 보기가 가능하기 때문에 구경하는 재미도 있습니다.  개인적인 목적으로 3D 콘텐츠가 필요하다면 상단의 explore 항목에서 다운로드 가능한 대상을 검색하면 됩니다.   다운로드를 위해서는 회원가입이 필요합니다.  결과 페이지의 상단에 filters를 사용해 추가 조건으로 목록을 추릴 수 있습니다.  스토어에 들어가면 디테일이 뛰어난 작품들을 볼 수 있습니다. 구매는 하지 않더라도 미리 보기로 구경하는 재미가 있습니다.

 순서도를 그릴 일이 생겨 검색을 하다가 알게 되었습니다. draw.io  그림판이라던가 문서프로그램으로 만들 때 가장 거슬리는 부분이 각 요소의 정렬입니다. 이 프로그램은 모눈 단위로 이동을 하므로 쉽게 위치 잡기가 가능합니다. 또 화살표를 그리기도 쉽고 각 요소끼리 연결해 두면 알아서 따라가는 것도 마음에 듭니다. 이미지라던가 html로 출력도 쉽고, 여러 면에서 상당히 좋다고 생각되는 프로그램입니다.  위 링크에 들어가면 웹 브라우저에서 바로 사용할 수 있습니다. 개인적으로는 크롬 브라우저를 추천합니다. 들어가자마자 저장 위치 설정이 나옵니다. 설정 전에 언어를 한글로 바꾸면 사용이 쉽습니다. (화면을 새로 고치면 한글로 됩니다.) 저는 그냥 PC에 저장하고 불러오는 것으로 설정 했습니다. 새 다이어그램 만들기를 선택하면 여러 가지 기본 틀이 있습니다. 필요에 따라 선택하면 됩니다. 웹 브라우저에서 사용하는 게 좀 별로라고 한다면 사용하고 있는 PC에 설치하는 버전도 있습니다. 윈도우, 맥, 리눅스에서 사용할 수 있습니다. [ 다운로드 링크 ] 위 링크를 누르거나 웹 에디터의 설정의 "도움말 > Get Desktop" 항목을 눌러 다운받을 수 있습니다. 저는 윈도우10을 사용하고 있어서 윈도우용을 설치 했습니다. 저장이라던가 불러오기에 있어서 좀 더 이점이 있지만 전반적으로 웹 버전 그대로의 모습을 가지고 있습니다. (하이브리드 앱으로 만든 것 같네요.) 언어 설정도 웹과 같습니다. 새로 고침을 하라고 나오면 프로그램을 껐다가 다시 켜면 됩니다.

이 글은 2018년 6월 29일에 작성 되었습니다. 용산역 아이파크몰 리빙파크 방향 요약. 리빙파크 6층에 건담베이스가 있어서 적어둡니다. 리빙파크는 CGV와 정 반대에 있습니다. 서울 지하철 1호선을 타고 용산역에 내립니다. 용산역 [1번] 출구 로 향합니다. (지하철 개찰구에서 나오면 왼쪽 방향) 밖으로 나오면 아래로 내려가는 확 트인 계단이 나옵니다. 오른쪽을 봅니다. 그 방향이 리빙파크 입니다. (3층에는 영풍문고가 있습니다. 영풍문고 간판이 있는 입구로 들어갑니다.) [ 아이파크몰 층별 안내 ]

이 글은 2018년 6월 25일에 작성 되었습니다. 지하철 정기권을 구매하기 위해 요금조회 페이지를 찾게 되었습니다. 여담이지만 저는 서울 정기권(55,000원) 카드를  역의 행정실 에서 2,500원에 구매 했습니다. 충전은 역에 있는 카드충전기에서 가능합니다. 거스름돈을 주지 않기 때문에  정확한 금액을 현금으로 준비 해야 합니다. 요금 조회 페이지 찾아가기 서울 메트로 홈페이지로 들어갑니다. [ 서울교통공사 ] 상단의 이용정보를 선택하면 [ 사이버 스테이션 ] 이라는 항목이 있습니다. 사이버 스테이션 페이지에서 출발, 경유, 도착역을 입력하면 요금 정보가 나옵니다.

무언가 책을 읽고 싶을 때 무작정 서점 싸이트에 들어가 화면에 표시되는 책들을 봅니다. 평소에 의지박약, 게으름, 어리석은 선택에 관심이 있었던 터라 제목을 보고(표지만 봤다면 손이 가지 않았을 것 같았습니다) 흥미가 생겼습니다. 뇌라고 하는 신체의 동작과 우울한 감정을 이야기합니다. 과학에 관련된 책의 인용이라던가 주석은 한 번도 따로 확인해 본 적이 없으면서도 '음, 이건 과학적인 사실을 적은 책이군.'이라고 스스로 생각하는 게 좀 웃기긴 합니다. 하지만 제가 아는 상식선에서 터무니없는 내용은 아니라 여겨졌습니다. 내용에 대해 만족하냐고 물어본다면 저는 만족 했습니다. 다른 사람에게 도움이 되도록 설명해 보라고 하면 못 할 것 같지만 그동안 어렴풋이 느끼던 무언가에 대한 형태를 생각 할 수 있었습니다. 우울한 마음과 별 개로 몸의 상태나 환경에 대한 내 반응은 남들보다 특별하지도 않고, 모자라지도 않았다는 것을 느끼게 해 주었습니다.

`webRTC` API를 지원하는 브라우저에서는 `navigator.mediaDevices.getUserMedia()`를 사용할 수 있습니다. 안드로이드폰에 설치되는 크롬에서는 예전부터 지원하고 있었지만 아이폰에서는 iOS11 이상에 설치되어 있는 사파리에서 지원하기 시작 했습니다. 기본적인 사용방법은 인터넷에 잘 나와 있습니다. 하지만 아이폰에서 사용하려고 보니 몇 가지 특이사항이 있어 적어둡니다. 사용한 기기는 아이폰5s iOS 11.4 입니다. 기본 소스는 다음과 같습니다. <HTML> <video id="video" autoplay playsinline></video> <Javascript> const userMedia = navigator.mediaDevices.getUserMedia({ audio: false, video: { width: 640, height: 480, facingMode: 'environment' } }); userMedia.then(function (stream) { const videoEl = document.getElementById('video'); const videoTracks = stream.getVideoTracks()[0]; console.log('카메라 이름 : ' + videoTracks.label); videoEl.srcObject = stream; }).catch(function (error) { console.error(error.message); }); 웹 페이지 `<video>`태그에 카메라 영상을 보여주는 소스 입니다. 예전에 만들어진 가이드는 `navigator.getUserMedia()`를 사용하라고 되어 있었는데, 최근에는 ` nav...

숫자와 알파벳으로 구성된 랜덤한 문자를 반환하는 함수 입니다. randomString(count) { let str = ''; for (let i = 0; i < count; i++) { str += Math.floor(Math.random() * 36).toString(36); } return str; } `Math.floor()` 버림으로 인해 0~35 까지의 값이 나오면 `.toString(36)`를 사용해 36진수로 변환합니다. (36진수는 0~9 10 문자, a~z 26 문자 총 36개의 문자로 표현 합니다.) 이러한 동작을 인자값 `count`만큼 반복해서 원하는 길이로 만들어 내는 간단한 형태 입니다.

자바스크립트를 사용하여 URL을 구분하는 함수 입니다. function parseUrl(url) { const aEl = document.createElement('A'); aEl.href = url; const arr = aEl.search.replace(/^\?/, '').split('&'); const searchObj={}; let queries; for (let i in arr) { queries = arr[i].split('='); searchObj[queries[0]] = queries[1]; } return { protocol: aEl.protocol, host: aEl.host, hostname: aEl.hostname, port: aEl.port, pathname: ('/' + aEl.pathname).replace(/^\/\//, '\/'), search: aEl.search, searchObj: searchObj, hash: aEl.hash }; } HTML의 `<a>`를 활용하는 방법으로 `<a>`에 URL을 적용한 후, 필요한 값만 뽑아서 객체로 반환 합니다. 간단하게 사용하기 좋습니다. `http://url.com/index.html?a=1&b=2` 형태에 사용이 가능합니다. URL텍스트 값만 가지고 값을 구분하기 때문에 텍스트의 형태에 따라서 못 가지고 오는 값도 있습니다. 브라우저 마다 값의 형태가 다를 수 있습니다. 사용 전에 `console.log()`를 사용하여 값의 형태를 확인하고 추가적인 기능을 더 넣어야 할 수 있습니다. GET 방식으로 넘어오는 파라미터는 `qu...

저자의 유튜브 영상을 보고 구매한 책이다. 영상을 재미있게 보고 있고, 관심가는 분야의 책이라 고민없이 구매했다. 현 시점에 전자책은 나오지 않았다. 주로 지하철 퇴근 용도로 보고 있는데 종이로 된 책은 지하철에 사람이 많은 경우 꺼내기가 힘들다. 지금 생각해 보면 내용에 이미지가 많아서 전자책으로 나와도 스마트폰과 같은 작은 화면으로 보기는 힘들 것 같다. 폰트의 크기, 컬러인쇄, 이미지의 배치는 내용전달을 쉽고 읽기 편하게 구성한 것 같았다. 하지만 안좋게 보자면 가격에 분량을 맞춘 느낌도 들었다. 내용은 유튜브 영상 중에서 4차 산업형명에 관련된 부분을 글로 정리한 것 같았다. 영상을 전부 봤다면 책을 읽을 때 더 이해하기 쉽다. 하지만 같은 내용이라면 역시 영상으로 보는 게 더 재미있다. 책의 내용은 상식 수준에서 해당 주제를 쉽게 이해할 수 있도록 알려주는 정도라고 생각한다. 최근 한국의 상황, 문화에 대한 비유가 간간히 나온다. 주제도 앞으로 어떻게 될지에 대한 이야기라서 한참 뒤에 읽으면 재미가 없을 것 같다. 관심 있는 주제라면 지금 읽어보자.

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

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