All-round programmer

std::vector를 사용하다보면 많이 사용하는 구문 중 하나는 현재 std::vector가 비어있는지 확인하는 것이다. 이러한 구문을 표현하는 방법이 아래와 두 가지가 있을 것이다. * std::vector.size() == 0 std::vector myVector; if (myVector.size == 0) printf("Warning: Empty vector"); if (myVector.size > 0) printf("Vector is not empty"); * std::vector.empty() std::vector myVector; if (myVector.empty()) printf("Warning: Empty vector"); if (!myVector.empty()) printf("Vecto..

기존의 소스 코드에 쓰고 있는 forward declaration을 그대로 사용했더니 코드리뷰에서 typedef를 쓰지 말라는 리뷰가 왔다. 그래서 찾아보니 모던C++에서는 이제 typedef를 사용하지 않고 using 키워드를 사용한다고 하였다. 따라서 각 키워드의 다른 점을 살펴보았다. * typedef vs using 차이점 typedef std::shared_ptr MyClassPtr; using MyClassPtr = std::shared_ptr; 위와 같이 보면 일단 문법이 다른 것을 알 수 있다. 기존의 typedef 키워드의 문법은 앞의 타입형을 뒤에 있는 이름으로 축소해서 사용하겠다는 것을 의미하고, using 키워드는 약간 변수 할당과 비슷한 느낌으로 MyClassPtr에 std::sh..

회사에서 일하면서 유튜브 동영상을 틀어놓고 일하고 싶은데, 맥북프로와 모니터 2개가 공간이 모자라다보니 영상을 보면서 할수도 없고 아이폰을 틀어놓고 하자니 이어폰은 맥북에 연결되어있어서 어떻게 할까 고민 했는데 구글을 검색하다보니 좋은 팁이 있어서 공유합니다. [아이폰의 사운드를 맥북에서 나오게 하기]1. 라이트닝잭을 통해서 맥북에 연결2. QuickTime player를 실행3. New Audio Recording 실행 방법 1. 컨트롤+시프트+옵션+N 방법 2. File > New Audio Recording 선택 방법 3. 독 아이콘에 우클릭 후 New Audio Recording 선택 4. 녹음 버튼 옆에 있는 아래 화살표를 클릭 후 해당 iPhone 선택 (녹음 버튼은 누를 필요 없습니다) 이렇..

* 최근에 C++로 코딩하면서 옛날에 머물러있었던 C++ 개발 실력이었기 때문에 새로 보는 내용들이 아주 많다. 지금은 그냥 여기서 그렇게 하고 있으니까 따라한다는 마음이 크지만, 조금씩은 왜 그렇게 하고 있는지 알아가면서 C++ 관련 글도 정리하면서 쓰려고 한다. 기존에 보지 못했던 키워드 중 가장 먼저 눈에 들어온 것은 enum class 였다. * enum class C++11에서는 기존의 enum과 다른 새로운 키워드 조합인 enum class를 선호이고 있다. 사용법은 기존의 enum에서 크게 벗어나지는 않으나 가장 다른 점은 개발자들이 기존의 enum이 가지고 있었다고 주장하는 문제점들을 해결하고자 하였다. 그 중 가장 대표적인 것은 바로 기존의 C++의 enum은 내부적으로 int와 동일하게..

* 최근 SNS와 웹사이트를 연동하는 일들이 많아지면서, 많은 사이트들이 페이스북 로그인과 연동을 하고 있다. 페이스북에서 어떻게 로그인 연동을 해야 하는지 한번 알아보자. * 자바스크립트 SDK를 이용한 페이스북 로그인: 페이스북 앱들은 동작하는 장비나 프로젝트에 따라서 몇 가지의 로그인 단계를 거치게 된다. 이번에는 웹앱에서 로그인하는 단계를 한단계씩 알아볼 것이다. 여기서는 웹사이트인 경우 페이스북에서 추천하는 로그인 방식인 페이스북에서 제공하는 자바스크립트 SDK를 사용해서 페이스북 로그인을 할 것이다. 만약 자바스크립트 SDK를 사용하지 못하는 상황이라면 페이스북에서 제공하는 별도의 로그인 절차를 수동적으로 생성해야 할 것이다. * 빠른 시작: 일단 먼저 어떻게 구현해야 하는지 빠르게 훑어본 다..

* 옛날에 개발해뒀던 인스타그램에서 사진을 수집하는 크론이 갑자기 실행이 안되길래 원인을 분석해보니, 어느새부터인가 curl에 줘야하는 옵션이 바뀌었나보다. SSL 문제 이후에 보안을 더 신경 썼는지 curl을 실행하고나면 아래와 같은 오류가 나타났다. SSL certificate problem, verify that the CA cert is OK. Details: error:14090086:SSL routines:SSL3_GET_SERVER_CERTIFICATE:certificate verify failed : 이것을 해결하려면 간단하게 curl의 옵션을 추가하면 된다. curl_setopt ($ch, CURLOPT_SSL_VERIFYHOST, 0); curl_setopt ($ch, CURLOPT_S..

* PHP로 RESTful API를 개발하다보면 가끔 AJAX(XMLHttpRequest)를 이용해서 호출하는 경우 로그인 정보를 유지하여 정보 검증을 해야하는 경우가 있는데, AJAX를 이용하는 경우에도 php의 $_SESSION 정보는 활용할 수 있다. 이것을 이용해서 페이지에서 로그인한 정보를 확인하고 검증이 안된 사용자에 대해서는 권한이 없음을 알려주면 권한 관리에 용이하다. * 하지만 php 페이지에서 바로 $_SESSION을 사용하면 로그인 정보를 가져올 수가 없고, session_start();를 AJAX처리하는 PHP 페이지 상단에 넣어야 정상적으로 동작하게 될 것이다. 아래가 아주 간단한 예이므로, 응용하면 된다. API 호출하는 페이지 예 ./api.php 페이지 소스 예 * 잊지말고 ..

* PHP를 통해서 원격에 있는 이미지를 긁어오거나 복사하고 싶을 때가 많은데 예외상황이 많을 것이다. 한번 예외상황들에 대해서 적어보고, 특히 php.ini를 마음대로 수정못하는 웹호스팅을 하고 있다면 꽤나 골치 아플 일이 많을 것이다. : 일단 첫번째로 확인해야될 제약사항은 php.ini에서 "allow_url_fopen"이 "on" 되어있어야한다는 것이다. 만약 이것이 on 되어있다면 원격의 파일을 꽤나 쉽게 가져올 수 있다. * copy 함수를 이용해서 원격 이미지 가져오기: 우선 가장 간단하게 가져올 수 있는 방법은 copy 함수를 쓰는 것이다. copy("http://remotedomain.com/image.jpg", "/tmp/local.jpg"); : 위와 같이 하면 바로 원격의 파일을 로..

* 이번에 localStorage를 사용하면서 안드로이드에서는 되는데 아이폰에서만 안되는 독특한(?) 현상 때문에 애를 먹다가 옛날에 모바일 브라우져 환경에서 디버깅을 하는데 사용했던 툴을 깔아야하나 고민 중이었는데, 아이폰용 사파리의 아주 편리한 기능을 알게 되었다. 작년에 웹페이지에 라이브러리를 깔아가면서 모바일을 디버깅했던 때와 비교하면 아주 혁신적으로 엄청 편리해진 것을 발견할 수 있을 것이다. * 웹속성 사용하기 : 모바일에서 디버깅을 하기 위한 툴이 부족한 상황에서 모바일에서의 자바스크립트를 디버깅하는 것은 매번 alert를 띄우거나 조금 부실한 아이패드에서 사파리 디버깅 콘솔을 설정해서 console.log를 사용하는 정도이었는데, 이 웹속성 기능을 사용하게 되면 조금 느리기는 하지만 마치 ..

* 이번에 간단하게 웹을 통해서 몇백KB 정도 되는 데이터를 웹에서 불러다가 처리하는 개인 프로젝트를 개발하다가 매번 몇백KB를 불러오는게 부담이 되어, localStorage의 캐쉬를 이용하는 간단한 웹을 만들고 있었는데 안드로이드와 구형 아이패드에서는 잘 되는데 이상하게 최신 아이폰5에서는 잘 안되는 것이었다. 왜그런가 살펴보다가 디버깅툴을 이용해서 이것저것 테스트하다가 아래와 같은 에러가 일어나는 것을 발견했다. "QuotaExceededError: DOM Exception 22: An attempt was made to add something to storage that exceeded the quota." : 대충 너무 큰 사이즈의 데이터를 입력하려고 했다는 의미인 것 같았는데, 검색해보니 i..

* 일반적으로는 a href="#아이디"등과 같이 사용자가 클릭을 해야하는 경우가 있는데, 이러한 경우가 아닌, 자바스크립트로 이동하는 방법을 알아보자. 이러한 경우는 페이지의 bookmark를 등록하거나 할 때 해당 위치로 이동하도록 할 때에 편리할 것이다. : 먼저 html에 id를 준다. : 그리고 해당 element로 이동하고 싶을 때 아래와 같은 자바스크립트를 호출하면 된다. location.href = "#"; location.href = "#bookmark"; : 이 방법은 아주 쉽게 의 링크/버튼을 누르지 않고 그와 같은 효과를 이끌어낼 수 있다. 하지만 url의 뒤에 #bookmark가 추가되는 불편함(?)이 있을지도 모른다. 사실, url이 그렇게 변하는 것은 미관상(?) 안 좋을수도 ..

* 자바스크립트의 오브젝트로 만들었을 경우에는 쉽게 특정 값에 대하여 삭제 가능하지만 배열인 경우에는 다소 어렵다. 게다가 IE8 이전 버전은 조금 귀찮기도 하다. 따라서 다음과 같은 간단한 함수를 하나 만들어둬도 괜찮을 것이다. function remove(arr, value) { var i; if (arr.indexOf) { // IE9+, 다른 모든 브라우져 while((i = arr.indexOf(value)) !== -1) { //해당 값이 arr에 있는 동안 루프 arr.splice(i, 1); } } else { // IE8 이하 for (i = arr.length; i--;) { //뒤에서부터 배열을 탐색 if (arr[i] === value) { arr.splice(i, 1); } } }..

* 오랜만에 Heroku로 node.js 프로그래밍을 해보려고 새로운 작업환경에 heroku toolbelt를 깔고 foreman을 실행하려고 했는데 아래와 같은 에러가 일어난다. : 옛날만 해도 아무런 이상없이 잘만 동작하던게 이렇게 안되니까 답답~했는데 찾아보니까 루비에 깔리는 foreman 0.63버전에서는 동작이 조금 다르게 되는가보다. 따라서 아래와 같이 foreman을 언인스톨하고 기존에 지원하던 0.61.0 버전을 까니까 잘 돌아간다. gem uninstall foreman gem install foreman -v 0.61.0 : 그럼 다시 작업시작! 끝.

* 자바스크립트의 간단한 함수들을 이용하면 진수변환을 아주 쉽게할 수 있다. 10진수 16진수 2진수 8진수 * 10진수 -> 16진수 var dec = 123; var hex = dec.toString(16); // === "7b" * 10진수 -> 2진수var dec = 123; var bin = dec.toString(2); // === "1111011" * 16진수 -> 10진수var hex = "7b"; var dec = parseInt(hex, 16); // === "123" * 16진수 -> 2진수 (* 10진수로 바꿨다가 다시 2진수로 바꾼다)var hex = "7b"; var bin = parseInt(hex, 16).toString(2); // === "1111011" * 2진수 -> ..

* 자바스크립트에서는 이벤트를 다루는 방법은 대표적으로 3가지를 꼽을 수 있다. 1) HTML에 inline으로 등록Click me! 2) element의 onload 속성을 통한 등록 Click me! 3) addEventListener/attachEvent를 이용한 등록 Click me! : 일단 1)번부터 보면 이건 초창기 인터넷 넷스케이프 2 당시부터 사용하던 이벤트 핸들러 방식이다. 워낙에 전통적인 방법으로 오랫동안 사용해와서 많은 사람들이 아직도 사용하고 있다. 하지만 HTML을 사파리 reader 등으로 볼 때 문서로서 최적화하기 위하여, MVC 또는 MVVM 모델을 분류하기 위하여 html은 오로지 document를 표시해주는 역할을 취하게 하기 위해서는 1)번 보다는 이벤트 핸들러는 자바..

: 자바스크립트에서 string을 표기하는 방법이 여러가지가 있는데, 크게 2가지로 뽑을 수 있을 것이다. var objStr = new String("unikys"); // #1 var toStr = String("unikys"); // #2 var prmStr = "unikys"; // #3: String literal : 여기서 일반적으로 쓰이는 것은 #1번과 #3번(String literal)이고, 아마도 대부분은 #1번처럼 사용한 적도 별로 없겠지만, #1번과 약간 비슷해보이는 #2번의 표기방법도 있기는 있다. 비슷해보이는 표기법들이 C에서는 상당히 다르게 느껴지기는 하지만, 자바스크립트에서는 위의 #3번의 경우 아래와 같이 String의 함수들도 사용할 수 있다는 것이 신기하기도 하고 재미있다..

* 전문가들이 자바스크립트에 있지만 없는듯이 살라는 명령어가 2가지가 있다. eval with : eval은 보안상, 퍼포먼스상 문제가 있기 때문에 반드시 필요한것이 아니라면 사용하지 말라고 하는 것은 이해가 되지만, 솔직히 with란 놈은 한번도 써본적도 없고, 본적도 없는데 사용하지 말라고 한다. 한번도 본적이 없는 명령을 사용하지 말라고 하니까 이게 어떠한 명령인지 왠지 더 궁금해지고 사용해보고 싶은 법! 때문에 일단 이 with 명령에 대하여 한번 알아보고, 왜 사용하지 말아야 하는지 알아보자. * with - 설명: with 이후에 오는 구문을 위해 scope chain에 인자로 받는 object를 추가한다. - 문법:with (object) statement; 또는with (object) { ..

* javascript를 하게 되면 DOM객체에 CSS의 클래스를 추가하고 삭제하는 일이 많아졌을 것이다. 이 기능은 jquery로 간단하게 이용할 수도 있지만, 그 내부에서 돌아가는 사정은 알고 사용해야 할 것 아닌가. jquery만 의존해서는 자바스크립트 언어 실력이 향상 될 수 없기 때문에! 간단하게 순수 vanilla 자바스크립트로 구현해보자. * addClass : css 클래스를 추가하는 함수로, element와 class명을 받도록 한다.function addClass(element, className) { element.className += " " + className; }; : addClass는 쉽게 끝난다. 더이상 깊게 들어가야할 것은 안보인다. * removeClass : css 클..

* jquery는 정말로 편하고 좋은 라이브러리이다. 최적화도 잘되어있고 다양한 기능이 아주 쉽게 들어가있다. 하지만 자바스크립트 개발자라면 이 jquery의 활용에 대해서 고민을 해봤을수도 있고, 좋은 라이브러리라니까 가져다 쓰고 활용을 할수도 있을 것이다. 하지만 적어도 이유는 알고 사용하고, 사용을 안 한다면 왜 사용을 안 해야하는지에 대해서 고민을 해보자. * 서론 : 자바스크립트를 숱하게 해오다가 처음으로 jquery라는 라이브러리를 대충 듣게 되고, 이것이 무엇인지도 모른체 지내다가 나중에 jquery를 처음 알게 되었을 때에는 너무나도 놀라웠다. 기존에 자바스크립트로 사용했던 DOM 탐색의 경우 끽해야 id 탐색, class 이름과 태그명으로 탐색했었는데 이러한 것들을 CSS 의 검색 스타일..

* 자바스크립트로 DOM element의 넓이를 구할 때 단순히 아래와 같이 하면 제대로 적용이 안되는 경우가 있다. : 위와 같은 경우 브라우져상에서 실제로 보이는 width는 .myStyle로 인해 400px로 나와있지만, 9번째 줄에서 element에 접근하여 style의 width를 출력해보면 빈칸으로 나오게 된다. 왜냐하면 이 div의 width는 css의 클래스로 설정된 width이기 때문에, element 자체의 style안에는 width 값이 없기 때문이다. 이럴 때 DOM을 브라우져에 랜더링된 실제 넓이를 구하는 방법은 다음과 같다. console.log(window.getComputedStyle(document.querySelector(".myStyle")).width); // === ..

* HTML5를 개발하는데 있어서 가장 큰 걸림돌이라하면 바로 인터넷 익스플로러(IE)일 것이다. MS에서는 웹표준과는 동떨어진 독자노선을 걷다가 이제 웹표준이 정립되어가고 있는 HTML5의 적용을 브라우져에 이제서야 뒤늦게 시작하고 있다. IE10에서는 그래서 그나마 호환성을 갖추기는 했지만 여전히 부족한 느낌이 많을 것이다. 이러한 문제를 해결하기 위한 한가지 방법은 바로 구글의 크롬 프레임(Chrome Frame)이다. * 구글 크롬 프레임(Google Chrome Frame: GCF): 구글 크롬 프레임은 IE에서 구글 크롬의 환경을 구현할 수 있도록 도와주는 오픈소스 플러그인이다. 구글의 V8 자바스크립트 엔진과 다양한 웹기술들을 최신 경향의 적용이 느린 IE에 적용시켜줄 수 있는 유용한 도구이..

* CSS에서 엘레멘트의 style.top 값을 가져왔을 때이 top 값은 "10px"나 "100%"등의 단위를 붙어서 나오기 때문에 string으로 반환된다. 이것을 처리하기 위한 간단한 방법이 아래와 같다. var topString = document.getElementById("mydiv").style.top; var topInt = parseInt(topString||0, 10); : 여기서 parseInt 함수는 앞의 숫자만 변환한 값을 10진수(parseInt의 두번째 인자)로 변환하여 리턴하게 된다. 중간에 ||0을 한 것은 만약에 top이 설정되어있지 않다면 0으로 설정하겠다는 것이다. : 주의할 것은 class 를 이용해서 top을 설정했다면, offset을 계산해서 하는 것이 좋을 것이..

* HTML5를 하면서 AJAX로 얻어온 데이터를 div 태그에 뿌려주다보면 넘쳐서 스크롤바가 생기는 경우가 많다. 가장 대표적인 예가 채팅 프로그램을 만들 때 가장 아래로 스크롤을 유지해야하는데, div에 내용이 추가되고 나서 아래의 자바스크립트를 사용하면 된다. var objDiv = document.getElementById("mydiv"); objDiv.scrollTop = objDiv.scrollHeight; : 위의 바닐라 자바스크립트 말고도 jQuery를 이용하는것도 방법이다. $("#mydiv").scrollTop($("#mydiv")[0].scrollHeight); : 위에서 scrollTop 안에 $("#mydiv")[0]을 하는 이유는 직접 dom에서 데이터를 가져오기 위함이다. * ..

: HTML5의 위로 이미지를 드래그앤 드랍을 할 때에는 보통 canvas.addEventListener("drop", function (e) { alert("dropped!"); e.preventDefault();}); : 이렇게 drop이벤트를 listen하게 되는데 drop 이벤트만 이렇게 처리하게 된다면 크롬, 사파리 등에서는 잘 동작하지만 파이어폭스에서는 왠지 이 drop 이벤트를 먹어버리고 브라우져 자체가 이미지를 열어버리게 된다. : 이럴 때에는 dragover의 기본 동작도 방지시켜주면 파이어폭스에서도 drop 이벤트가 정상적으로 동작하게 된다. canvas.addEventListener("dragover", function (e) { e.preventDefault(); return fal..

* 자바스크립트에서 랜덤 수를 생성하는 것은 Math.random 함수를 쓰면 된다. var rand = Math.random() * max; // 0 ~ max 사이의 랜덤 float 값을 생성, max는 포함하지 않는다. var rand2 = Math.floor(Math.random() * max); // 0 ~ (max - 1) 까지의 정수 값을 생성 * Math.random() 함수는 0~1의 실수를 생성하며 1을 생성하지는 않는다, Math.round가 아닌 Math.floor를 사용하는 것은 더 균일한 랜덤 값 생성을 하기 위한 것이다. Math.round를 사용하게 되면, 0과 1이 나올 수 있는 확률이 절반으로 줄어들게 된다. * 이를 함수로 구현해두면 그때마다 호출해서 사용하면 된다. f..

: 자바스크립트에서는 시간에 따라 함수를 호출할 수 있는 함수가 2가지가 있다.setInterval(callbackFunction, milliseconds);setTimeout(callbackFunction, milliseconds); : setInterval은 말그대로 특정 interval을 두고 콜백함수를 계속 호출하는 함수이고, setTimeout은 일정 시간뒤에 함수를 호출하게 되는 1회성 함수이다. 즉, 계속 반복적으로 일정 시간마다 호출해야한다면 setInterval을 설정하면 되고 한번만 호출해야된다면 setTimeout을 사용하면 된다. : 위 함수와 반대로 설정된 함수 호출을 취소하는 함수는 아래의 두가지이다.clearInterval(intervalReturnVariable);clearT..

* 소프트 링크는 아래처럼 실행하면 된다. # sudo ln -s /var/www/original_dir ./target_dir : 만약 target_dir이 이미 존재한다면 그 안에 새로운 링크를 만들게 된다. 끝.

* CSS에서 제공해주는 font 의 스카일을 예제로 알아보자.: 아래는 CSS3를 기준으로 하고 있으며 오래된 브라우저에서 다르게 표시될수도 있다. * 각 스타일에 대한 예제이다. * 아래는 각 스타일에 대한 설명이다.: font-family는 가장 먼저 존재하는 폰트를 적용하게 된다. (아래에 스펙 정리) style="font-family: Helvetica, Verdana, sans-serif;" style="font-family: Verdana, sans-serif;" style="font-family: 굴림;" style="font-family: 바탕;" style="font-family: 궁서;" style="font-family: 새굴림;" : font-weight의 예 style="font..

* PHP에서 파일을 읽는 fopen 기능에 대해서 알아보자. * fopen 포맷 resource fopen ( string $filename , string $mode [, bool $use_include_path = false [, resource $context ]] ) : 인자를 총 4개 받으며, 1, 2번째 인자는 필수고 3, 4번째 인자는 옵션이다. * 첫번째 인자: string $filename : 파일을 로드할 파일명으로, 앞에 "scheme://..."와 같은 프로토콜을 명시하는 경우 해당하는 프로토콜을 이용하는 URL로 판별하여 해당 scheme의 프로토콜 핸들러를 찾아서 파일에 접근하게 된다. 만약 프로토콜이 명시되지 않았다면 서버 로컬의 일반적인 파일로 판단하여 찾게 된다. 만약 로..

* 구글에서 제공하는 정보 사이트에서 정보를 확인할 수 있다. http://developer.android.com/about/dashboards/index.html : 아래는 최근 14일간 구글 플레이에 접속한 안드로이드의 버전별로 모든 데이터이다. * 2012년 11월 1일 데이터 : Gingerbread가 54%, ICS가 25%, Froyo가 12%, Eclair가 3.1%, Jelly Bean이 2.7%의 분포를 보여주고 있다. * 2.1버전은 조금씩 도태되고 있는 것이 보이고 있고, 아직은 2.2버전은 호환하는 앱을 만드는 것이 좋을 것 같다. 앱 개발을 약 3개월 완성을 고려한다면 2.3.3만 지원해도 괜찮을 것 같기도 하다. : 아래는 화면크기와 해상도에 대한 분포도이다. 화면은 당연히 일단..