All-round programmer

* 이번에는 Bootstrap으로 반응형 웹을 만드는데 가장 중요한 기능 중 하나인 CSS 기능들에 대해서 살펴볼 것이다. CSS 기능은 말그대로 CSS를 토대로 제공이 되는 기능들로 특정 class 명을 부여함으로써 Bootstrap에서 제공하는 틀대로 반응형으로 동작하도록 해주는 기능들을 이야기한다. - 이전글 2016/05/19 - [자바스크립트 프레임워크] 시작 예고편 2016/05/21 -[Bootstrap] 소개 * Bootstrap 프레임워크 CSS 기능: Bootstrap 프레임워크의 CSS 기능은 웹페이지에 적용하게 되는 CSS 규칙들을 기본적으로 설정하고, 기본 HTML 요소들에 대한 스타일을 적용하는 기능들을 포함하고 있다. 특히, Bootstrap 프레임워크에서 제공해주고 있는 반응..

* 미국에서 운전을 하려고 보면 네비를 따로 장만하는 것보다 그냥 구글맵을 네비로 쓰는 것이 훨씬 편하다는 것을 느끼게 된다. 그래서 스마트폰을 계속 들락날락하면서 운전하다보면 운전하는데 집중하지 못하고 방해가 되기도 하여 거치대를 하나 사기로 하였다. 일단 거치대를 검색해서 아래와 같은 거치대를 사고자 마음 먹었다. https://www.amazon.com/gp/product/B00YDK1HYG : 일단 지금 스마트폰이 아이폰 6s이기 때문에 이에 맞는 거치대를 찾으려고 했고, 충전 기능도 함께 제공될 수 있으면 좋겠다고 생각하여 이것을 선택하게 되었다. 그런데 시가잭으로 충전할수 있도록 USB만 2개를 제공해주고, 별도로 USB가 없어서 USB 잭까지 하나 더 사게 되었다. 같이 많이 사는 물건으로 ..

* 이전의 드랍다운 메뉴 만들기를 하고나서 의외로 많은 질문이 들어온 것이 가로형 메뉴는 어떻게 만드느냐에 대한 내용이었는데, 이 부분은 이전의 메뉴를 그대로 수정해서는 은근히 어려울 수 있어서 이 부분에 대하여 한번 더 정리해보고자 한다. 이번의 글의 목적은 HTML과 CSS만으로 가로로 떨어지는 드랍다운 메뉴를 만드는 것이고, 그 다음에는 아마도 CSS만으로는 구현하게 되면 UX상 개선하고 싶은 몇가지 내용들에 대하여 개선할 수 있는 HTML과 자바스크립트로 드롭다운 메뉴를 만들어 볼 것이다. - 이전 글 2013/11/01 - [밑바닥부터 홈페이지 만들기] 예고편 2013/11/01 - [밑바닥부터 홈페이지 만들기] HTML5 기본 템플릿, DOCTYPE 종류 2014/01/13 - [밑바닥부터 홈..

* 지난번에 샀던 팸퍼스 물티슈는 약간 로션 냄새가 너무 강하게 있는 것 같아서 이번에는 다른 팸퍼스 물티슈를 사 보았다. * 이전에 샀던 팸퍼스 물티슈2016/05/15 - [육아용품 리뷰] Pampers wipes: Baby fresh (팸퍼스 물티슈) : 이전에 샀던 물티슈는 Baby fresh 였다면, 이번에는 아래와 같이 Sensitive를 샀다. 가격은 한 장에 $0.03로 이전의 Baby fresh 보다 1센트 비싸기는 한데 작은 금액의 차이라 큰 부담은 없다. https://www.amazon.com/gp/product/B005DLCJX2/ : 다른 것보다도 Perfume-free라는 것이 이것을 선택한 가장 큰 이유이다. 이렇게 주문을 하고 이틀 뒤에 박스로 팸퍼스 물티슈가 이전과 비슷하..

* 이번에는 해외에 취업 준비를 하면서 준비했던 내용들에 대하여 간단하게 정리 해보려고 한다. 개발자로서 미국에서 일하는 것은 누구에게나 꿈과 같은 일이기 때문에 크나큰 꿈을 품고 먼나라로 일단 넘어오기는 했는데, 취업을 준비하면서 미리 알았더라면 좋았던 내용들, 그리고 취업을 준비하면서 꼭 필요했던 것 같은 내용들을 한번 정리해보려고 한다.* 우선적으로 이러한 내용들은 전문적이지 않은 그냥 순수 경험적인 이야기를 쓰는 수기이므로 그냥 특정 누구는 이렇게 준비했었다는 것으로 참고만 하고 무조건 따라가지 않기를 바란다. * 서류 준비: 경력직을 기준으로 가장 중요한 서류는 바로 이력서(Resume 또는 CV)일 것이다. 세부적으로 보면 Resume와 CV는 조금 다른 양식을 요구하기는 하는데, CV가 조금..

* 햇빛이 뜨거운 미국에서 아이를 카시트에 태우고 다니다보니 애가 햇빛 때문에 짜증내는 경우가 많고 피부가 너무 탈까봐 걱정되서 햇빛 가리개를 여러 개 중에서 고민하다가 사게 되었다. 그냥 까만 햇빛 가리개도 있지만, 아기가 보기에 너무 심심한 것 같아 무언가 그림이 있는 것이면 좋겠다고 생각해서 검색해본 결과 사고 싶었던 햇빛 가리개를 아래와 같이 선택하게 되었다. http://www.amazon.com/Dreambaby-Adjustable-Window-Shade-Tiger/dp/B00H6MD28M?ie=UTF8&psc=1&redirect=true&ref_=oh_aui_detailpage_o03_s00 : 그리고 조금 더 찾아보니 아래와 같이 쌍이 되는 비슷한 디자인도 있어서 같이 사기로 하였다. ht..

* 이번에는 전의 글에 사이드바에 이미지 배너를 넣는 것이 가능한지 물어보는 댓글이 있어서 사이드바에 이미지 배너를 넣는 방법에 대해서 살펴볼 것이다. 기본적으로 이미지 사이드바를 넣는 방법은 몇 가지가 있을 텐데, 각각의 장단점이 있을테니 간단하게 살펴볼 것이다. 크게 이미지를 업로드하는 방법과 사이드바를 넣는 방법으로 나누어서 살펴볼 것인데, 어떠한 방법을 선택할지는 먼저 아래에 정리를 하여 넣어두었으므로 참고하고 해당 방법을 따라가면서 해보는 것이 좋을 것이다. 이번의 글은 꼭 반응형 스킨이 아니더라도 일반 스킨에 대해서도 수정과 응용이 가능하다. * 이전 글2016/05/09 - [티스토리 반응형 스킨 편집] 페이스북 좋아요 버튼, 구글+1버튼 넣기2016/05/13 - [티스토리 반응형 스킨 편..

* 이번에는 세금보고와 관련된 내용을 적어보려고 한다. 세금보고를 한국에서 혼자서 진행하면서 많이 고생하기도 하였지만, 미국의 경우 이러한 행정적인 문서들은 은근히 어렵다고 느끼기도 하지만, 매뉴얼이 너무나 잘 되어있어서 솔직히 '매뉴얼대로' 하기만 한다면 큰 문제는 없을 것이다. 그런데 그러한 매뉴얼을 보다가 꼭 빠뜨리는 것이 있어서 문제이기는 하다. 이번에는 작년 세금보고를 하면서 신청한 ITIN에 대해서 어떻게 신청한 경험에 대해서 적어보고자 한다. * ITIN(Individual Taxpayer Identification Number)이 왜 필요한가?: ITIN이라는 약어 자체는 정말 여기저기서 많이 사용되고 있는데, 그 중에서 세금보고를 위한 ITIN은 개인 세금보고를 위한 ID 번호라고 생각하..

* 가장 먼저 보게 될 프레임워크는 바루 Bootstrap이다. 이 프레임워크를 가장 먼저 보게 되는 이유는 바로 지금 블로그에 반영한 티스토리의 반응형 스킨이 이 bootstrap을 사용하고 있기 때문이다. 따라서, 지금 블로그의 반응형 스킨을 개선하거나 변경하고자 한다면, 먼저 bootstrap에 대해서 알고 있어야지 문제 없이 변경할 수 있을 것이기 때문에 bootstrap을 먼저 선택하였다. * 이전글2016/05/19 - [자바스크립트 프레임워크] 시작 예고편 * Bootstrap 프레임워크? : http://getbootstrap.com : Bootstrap은 어디선가 한번씩은 들어봤을 프레임워크라고 생각한다. 이 Bootstrap에 대해서 소개하고 있는 내용을 보면 위의 홈페이지에 들어가면 ..

* 속깊은 자바스크립트 시리즈를 쓴지도 5여년이 지나고 이제 순수 자바스크립트에 대한 중요성과 인지도가 많아 향상 되었다고 생각한다. 그런데 최근에 최업 준비를 하면서 해외의 front-end engineer 자리들을 보고 있으면, 이제는 단순히 자바스크립트만 해서는 경쟁력이 떨어지고 있다는 것을 더욱더 느끼게 된다. 따라서, 속깊은 자바스크립트는 순수 자바스크립트를 살펴보는 시리즈 였다면, 자바스크립트를 응용하는 프레임워크나 라이브러리들이 어떠한 것이 있고 기본적인 사용 방법에 대해서 살펴보고자 한다. * 자바스크립트 프레임워크의 시대: 자바스크립트는 이제 정말 수 없이 많은 프레임워크들이 나오고 그러한 프레임워크의 개발을 요구하는 회사들도 많아지고 있다. 가장 쉽게 프레임워크가 얼마나 많은지 확인하는..

* 이전글2016/05/06 - [C++ 기본] Hello World 시작2016/05/10 - [C++ 기본] 클래스와 상속, friend, virtual, template 키워드 등2016/05/13 - [C++ 응용] 퀵, 머지, 힙, 버블, 선택, 삽입 정렬 알고리즘 구현 * 이번에는 변수형과 기본 함수들에 대해서 간단하게 살펴볼 것이다. 기본적인 내용이므로 레퍼런스로만 봐도 되도록 정리할 것이다. * 변수형: 각 변수형의 크기는 처음에는 크게 신경쓰지 않아도 되지만, 나중에 TCP 연동을 하거나 메모리 취적화가 필요할 때에는 조금씩 신경을 써야할 것이다. - char: 1byte=8bit 크기의 문자를 하나 저장- short: 2byte=16bit 크기의 정수를 저장- int: 4byte=32b..

* 미국에서 의료보험은 한국과는 다르게 민영화가 되어있기 때문에 의료보험을 어떻게 드는지도 잘 모르겠고, 처음에 직장 없이 일단 미국에 이민왔는데, 아기가 아프면 정말로 너무나 곤란한 상황이 올 수 있을 것이다. 우리 애도 이제 돌 정도 되었을 때 미국와서 돌발진인지 뭔지 모르는데 40도가 오르내리는 고열을 겪으면서 보험도 없으니 치료비 폭탄을 맞을까 섣불리 병원에 가기에도 겁이나고 발을 동동 굴리기도 했다. 애는 그래도 해열제를 먹이고 옷을 잘 벗기고 수건으로 닦아주니 이틀 후에 열이 내렸지만 정말 한국에서 애가 열이나면 일단 응급실 뛰어갈 때와는 다른, 너무나 아찔한 불안한 상황이었다. 그래서 애가 아프고 바로 다음날 일단 의료보험을 들려고 했는데 약간 시행착오를 해서 그 내용에 대해서 작은 경험을 ..

* 이번에 물티슈가 떨어져서 물티슈를 어떤거로 살까 고민하다가 팸퍼스 물티슈가 좋다고 그래서 팸퍼스로 샀다. 아마존에서 한장당 0.02달러 가격으로 504장에 10달러 정도 하는 가격의 물티슈이다. 구매했던 링크는 아래와 같다. http://www.amazon.com/Pampers-Softcare-Fresh-Wipes-Count/dp/B0062V8PPI : 제품 소개에는 아래와 같은 특징이 있다고 한다. * 특징- 미국의 다른 브랜드보다 4배 강함- 표현이 부드럽고 깨끗함- 좋은 향이 남- 저자극성- 물로 만든 로션 : 일단 물티슈가 필요하니 가격도 개당 0.02달러로 괜찮은 것 같아, 위의 링크를 통해서 주문하니 아마존 프라임이라서 금방 왔다. : 7개의 "리필" 물티슈가 들어있다. 가격적인 면에서는 ..

* 이전글2016/05/09 - [티스토리 반응형 스킨 편집] 페이스북 좋아요 버튼, 구글+1버튼 넣기 * 시작: 이번에는 먼저 반응형 스킨을 하나 선택해서 기존의 반응형으로 동작하고 있는 부분 중에서 마음에 들지 않는 부분들을 수정할 것이다. 가장 먼저 일단 반응형 스킨을 하나 선택할 것인데, 아래의 반응형 스킨이 깔끔한 것이 마음에 들어서 선택하였다. : 마음에 들었던 점은 스킨에서 메뉴가 오른쪽에 있다는 점이 제일 컸고, 하얀색 바탕을 중요하게 생각해서 좋은 스킨이라고 생각하여 선택하였다. 그런데 전체적으로 디자인은 내 마음에 들지 않아서 이제부터 편집, 커스터마이징을 해보려고 한다. * 상단바 수정: 스킨을 일단 적용해보면 가장 마음에 들지 않는 것은 상단에 크게 떠있는 이미지이다. 혹자는 이러한..

* 알고리즘의 기본인 정렬 알고리즘들의 대표적인 케이스들을 직접 C++로 구현해보았다. C++을 이용해서 재귀적으로도 처리하기도 하고, O(nlogn)이나 O(n^2)에 대한 알고리즘 분석의 기본이 되므로 기본적으로 알고 있으면 유용하다. * Quick Sort: 퀵소트는 하나의 피봇이 있어서 피봇보다 작은 값들을 앞으로, 큰 값들을 뒤로 보낸 다음, 다시 나뉘어진 그룹을 정렬하는 top-down 식 정렬 알고리즘이다. #include using namespace std; void quickSort(int arr[], int size) { int pivot = arr[0]; int cursor = 0; for (int i = 1; i arr[i]) { c..

* 미국에서 2010년형 맥북프로 하나 가지고 무언가 작업을 하려고 하면 너무나 작은 모니터(그래도 15인치인데..) 때문에 가끔 듀얼 모니터가 있으면 좋겠다고 생각했다. 그런데 이전에 어디선가 MacOSX에서 아이패드와 화면 공유가 되었던 것만 같은 그러한 것을 본 것 같아서 아이패드를 듀얼모니터로 사용할 수 있지 않을까! 하는 기대감이 듀얼모니터로 사용할 수 있는 가능성들을 찾아보기 시작하니 여러 가지가 있어서 한번 쭉 비교를 해보고 싶어서 정리해보고자 한다. * MacOSX 화면 공유 기능이 뭐지?: 구글에서 "mac os x screen sharing"이라고 치니까 위에 바로 나온다?! : 그대로 따라해보자. 1. Apple 메뉴 > System Preferences > Sharing 2. Scr..

* 이전글2016/05/06 - [C++ 기본] Hello World 시작 * 면접이 조만간 잡히게 될 것 같아 우선적으로 복습이 필요한 내용인 클래스와 상속에 대해서 문법을 간단하게 살펴보고 hackerrank.com이나 기본 소팅 알고리즘을 구현해보는 것을 할 예정이다. * 클래스 선언: 클래스 선언은 클래스의 전체적인 구조를 나타내며, 변수에 대한 정의와 함께 함수의 구조를 정의한다. 아래와 같은 구조는 주로 헤더 파일에 들어간다. Car.h에 정의해조자.class Car { private: int wheels; int price; public: void setWheels(int); void setPrice(int); int getWheels(void); int getPrice(void); }; *..

* 한동안 글을 쓰지 않으면서 항상 생각해오던 것이, 기존의 블로그 디자인을 싹 바꾸고 싶다는 생각이었다. 색이 갈색 바탕이었던 것부터 해서 평범하지는 않았기 때문에 블로그만의 특징이 있기는 했지만, 사실 내가 좋아하는 것은 흰색/검은색 구성이라서 이에 맞게 수정을 하고 싶었다. 그래서 지금부터 간단하게 블로그의 스킨을 조금씩 수정하면서 그에 대한 내용을 정리해보려고 한다. 그 중에서 가장 먼저 페이스북과 구글+1 버튼을 넣는 것을 먼저 해결하려고 한다. * 블로그 설정 화면: 다른 블로그들에서는 "HTML/CSS 편집"이나 "파일 업로드" 등을 이용해서 사용하는 경우가 많은데 이러한거 다 필요없다. 물론 위젯이 들어가는 위치가 아닌 조금 다른 위치에 넣고자 한다면 "HTML/CSS 편집"이 필요하지만,..

* 이번에 C++관련 면접을 보게 되면서 다시 한번 C++에 대해서 복습하는 기회를 가지려고 한다. 기본 문법부터 간단한 객체지향 설계까지 훑어보고자 한다. * 시작하기 전에..: 먼저 C++에 대해서 다시 공부하기 전에 MacOSX에서 gcc를 기반으로 진행하려고 한다. MacOSX가 아니면 리눅스나 유닉스에도 같이 포함이 되어있을테니 해당 OS에서 작업하거나 GNU의 gcc 컴파일러를 받아도 되고, 다른 컴파일러를 받아서 사용해도 된다. 아래는 GNU gcc 관련 웹사이트이다. https://gcc.gnu.org/ : MacOSX는 xcode를 먼저 깔아야 gcc가 정상적으로 동작하기 때문에 OSX와 xcode를 최신버전으로 다운로드 받아서 gcc의 동작을 먼저 확인하고 진행하였다. : OSX에 이어..

* 오랜만에 쓰는 글은 쉬운 내용으로 다시 워밍업을 하려고 한다. 일단 HTML5에 대한 내용들이 이제 대부분의 브라우져에 지원이 되기 시작하고 있어서 슬슬 HTML5에 대해서 부담없이 사용하게 되는 시기가 아닌가 생각한다. 아직 HTML5가 많이 지원 안되는 Internet explorer 8과 9가 10% 가량 남아있기는 한데 마이크로소프트의 강제 업그레이드(감사하게도!!) 덕분에 빠르게 줄어들고 있는 것을 확인할 수 있으니 올해 말 정도에는 이러한 기능들을 마음껏 사용해도 될 것이라 생각한다. * 이전 편들2012/10/25 - [HTML5 튜토리얼] HTML5의 등장 배경과 여러 가지 개발 환경 및 현재 현황2012/11/03 - [HTML5 튜토리얼] 기초 및 기본 구조, 프로그래밍상 기존의 H..

* 이번에는 자동 로그인 등과 같은 기능을 구현할 때 유용하게 사용할 수 있는 기능인 SharedPreference에 대하여 알아보도록 하자. - 이전 글 2012/11/07 - [Android(안드로이드) 앱 개발 기초] 안드로이드 프로젝트 생성하고 에뮬레이터로 앱 실행하기 2012/11/10 - [Android(안드로이드) 앱 개발 기초] 간단한 인터페이스 구현과 다른 Activity로 넘어가기 2012/11/21 - [Android(안드로이드) 앱 개발 기초] Activity 라이프사이클 공부 2012/11/24 - [Android(안드로이드) 앱 개발 응용] Google Map API로 지도 보여주기(MapView), Overlay Item 그려주기 예제 2012/11/28 - [Android(안..

* 이번에는 음악 재생을 위하여 사용하게 되는 MediaPlayer의 개발자 매뉴얼을 살펴보도록 하자. 음악을 재생할 때 주의할 점들과 각종 상황들에 대한 다양한 팁들을 포함하고 있어서 읽어보면 매우 유익할 것이다. - 이전 글2012/11/07 - [Android(안드로이드) 앱 개발 기초] 안드로이드 프로젝트 생성하고 에뮬레이터로 앱 실행하기2012/11/10 - [Android(안드로이드) 앱 개발 기초] 간단한 인터페이스 구현과 다른 Activity로 넘어가기2012/11/21 - [Android(안드로이드) 앱 개발 기초] Activity 라이프사이클 공부2012/11/24 - [Android(안드로이드) 앱 개발 응용] Google Map API로 지도 보여주기(MapView), Overlay..

* DB로 직접 접근하기 vs ContentProvider 사용하기?: 안드로이드에서는 기본적으로 SQLite를 사용할 수 있도록 API를 다양하게 편리하게 제공해주고 있다. 하지만, 이러한 SQLite는 기본적으로 해당 DB를 생성한 앱에서만 접근이 가능한 제약 사항이 있기 때문에, 앱간의 공유가 어려웠었다. 하지만, 이제는 안드로이드에서 기본적으로 주소록이나 콜로그 등에 대해서 ContentProvider를 통해서 데이터를 제공해주고 있고, Android SDK에서도 해당하는 내용을 사용할 것을 권하고 있다. 만약 앱에서 데이터를 내부적으로만 사용한다면, 굳이 ContentProvider를 사용하지 않아도 되고, 사실 ContentProvider를 처음에 접하게 되면 익숙하지 않기도 하고 제대로 된 ..

* 최근 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"); : 위와 같이 하면 바로 원격의 파일을 로..

* 이번에 개인적으로 작은 프로젝트를 하나 하게 되면서 새로이 nodejs와 heroku에다가 올려놓고 간단하게 하면 좋겠다는 생각이 들어서 오랜만에 heroku를 다시 세팅하고 nodejs를 해보았다. 익숙하지 않지만 새로운 영역에서 개발하고 그것이 성공적이라면 너무나 재미있다! (실패하게 되면 물론 짜증나지만..) 이번에 개발할 때 heroku에 eclipse 플러그인을 사용해서 개발해봤는데 무료서버호스팅 서비스 중 하나인 Heroku의 플러그인과 Eclipse를 연동하는 것을 해보자. * Eclipse plug-in 설치: heroku에서는 플러그인으로 이클립스에서 개발을 할 수 있는 환경을 제공해주고 있다. 물론 heroku는 git를 기반으로 호스팅 서비스를 제공하고 있기 때문에 git의 플러그..

* 웹페이지의 성능에 대한 인식이 뛰어나지 않은 국내 시장에서 다양한 웹페이지의 성능 진단 및 최적화를 진행함으로써 다양한 데이터를 모으려고 한다. 아직은 많은 데이터를 수집해야하는 시기라 실제 진단하는 케이스들과 최적화를 하는 케이스가 있으면 천천히 하나씩 블로그에 포스팅을 하려고 한다. : 현재까지 국내에서는 백엔드의 성능에 치중한 성능 최적화가 많았지만, 실제로 웹페이지가 사용자의 브라우져에 뜰 때까지 걸리는 모든 시간의 80%~90%는 서버의 백엔드가 아닌 프론트엔드인 브라우져에서 할애하게 된다. 따라서, 프론트 엔드에서 사용자들에게 직접적으로 UX에 영향을 주는 사항들에 대하여 검토하고 진단 그리고 나아가 최적화를 시킬 수 있는 방향까지 제시하고자 한다. 현재까지 해외에서는 웹페이지의 성능에 대..

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