글쓰기 메뉴

예쁜 노트 증후군

완벽하고 예쁘게 꾸미기 시작한 노트는 꾸미기가 싫증나면 버려진다.


중학교 때 선생님이 해줬던 얘기인데 20년 동안 인터넷(!)에 콘텐츠를 올릴 때 마다 떠오르는 말.

워드프레스니 텀블러니 미디엄이니 하는 엄청난 노트들이 도처에 있는데 왜 나는 항상 "무언가 다른 노트"가 그리운건지 모르겠어. 은근 이런 사람들 꽤 있더군. 


그래서 질리지 않고 가볍게 글을 쓰려고 만든게 "씬디(SynD)" 인거야.


씬디가 생각하는 솔루션은 아래와 같아. 읽어보고 나처럼 가끔 글은 쓰고 싶은데 마땅한 곳이 없다면 씬디에 써봐.


1. 프사도 상태도 프로필도 없어. 

- "나"는 글을 꾸미고 "글"은 나를 꾸미는게 싫더군

2. 분류, 스킨, 플러그인은 사치품으로 규정.

- 분류지정으로 시작해 스타일을 거쳐 플러그인을 꼽으면 꾸미기 잡탕 완성

3. 키보드를 누르면 글이 써짐.

- 글 단락을 만들고 이걸 들고 옮겨서 배치한 뒤 SEO 를 위한 어쩌구를..

4. 큰 화면에선 쓰고 작은 화면에선 읽고.

- 좋은 글은 납작한 엉덩이에서 나온다며?

5. 한결같이 오랫동안.

- 국내 경제 매체의 지원을 받아 국내외 클라우드 2곳+에 데이터 보관


음.. 이 따위 글을 첫글로 올려야하나 진지하게 고민하고 있는 중...


어디서 왔지?
[["synd.kr", 67], ["www.google.co.kr", 4], ["unknown", 911], ["search.naver.com", 2], ["com.google.android.googlequicksearchbox", 1]]
다른 글들
1 1

노트중독

반에 꼭 이런 유형의 친구가 하나씩은 있다.
공부를 딱히 잘하는 것도, 아주 못하는 것도 아닌데 시험공부를 새롭게 시작할 때마다 꼭 새 노트나 펜 따위를 사곤 한다.
이제 얼마 후면 시험 보잖아?
몇 주 전에 하도 졸라대서 그 애랑 같이 문구점에 들렀다.
이미 그 애의 가방이랑 필통은 색색깔의 볼펜이랑 노트, 디자인이 예쁜 참고서 같은 걸로 꽉꽉 채워져 있었는데도 또 펜을 고르는 데 눈을 빛내는 걸 보니 뭐랄까, 굉장히 신기했다.
도대체 그거 다 안 쓰면서 뭐로 공부하는 거야?
"이렇게 사 놓고서 또 쓰지도 않을 거잖아. 아까워."
"아니라니까? 이번에는 진짜 열심히 할 거야."
"너 그래 놓고서 중간고사 때도 공부 안 했잖아."
"그래도 그런 거 있잖아, 새롭게 마음먹을 때 새 학용품 같은 거 사고 싶어지는 거. 넌 그런 거 없어?"
지금 그 애는 독서실 책상을 깔끔하게 정리하고 노트에 핑크색 민트색의 형광펜으로 줄을 긋는 데 삼십 분 동안 공을 들이더니 엎어져 있는 중이다.
"공부 한다며."
"오늘만 쉬고 내일부터 빡세게 할 거야."
1 3

페이스북 임베드 URL,
소셜 플러그인 (XFBML) 파싱

임베드 대상 페이스북 콘텐츠는 "포스트", "비디오", "사진" 이렇게 종류별로, 웹과 모바일에서 각각 URL 형식이 조금씩 달라 프로그램으로 이를 처리하기 위해 동일한 형태의 주소가 필요하다.
SDK를 사용해 페북 컨텐츠를 임베드하는 경우 기준이 되는 URL 은 웹용 URL 이다.
뭐, URL은 딱보면 알겠지만 fbid 라는 고유ID만 빼오면 된다. 
모바일에서 포스트에 대한 주소만 URL 파라미터로 처리되어 있고 나머지는 전부 URL Path에 포함되어 있으니 아래와 같은 정규식으로 fbid부터 발라내자
정규식은 Ruby 2.x 버전에서만 동작을 확인했지만 look-behind 와 look-ahead 외에 정규식 엔진을 타는 내용이 없기 때문에 동작이 안된다면 그 부분만 수정하자.
사실 효율을 생각한다면 저딴 정규식으로 한방에 fbid 를 뽑는 것 보다 fbid 가 파라미터로 존재하는 케이스를 분리시키고 나머지 정규식도 2회로 나눠 돌리는게 더 좋지만... 귀찮으니 한 줄로 하자.
상식적으로 fbid 만 뽑아내면 될 것 같으나 페북 임베드에 사용되는 URL은 사용자 아이디가 버킷 이름처럼 포함되어 있다. 문제는 모바일 URL에 사용자 아이디-문자-가 없다는 점.
이 문제는 페이스북의 짧은 주소 fb.com 을 사용해 해결할 수 있다. http://fb.com/<fbid>의 형식으로 리퀘스트를 보내면 해당하는 완성된 주소로 리디렉션 시켜준다. - 임베드 코드 생성 시 fb.com 을 그냥 쓸 수 있으면 좋을텐데 안되더라.
curl 로 리디렉션된 최종 URL을 뽑는 코드는 아래와 같다.
내가 쓰는 Typhoeus 에선 아래처럼 최종 URL을 받으면 된다. 
이렇게 얻은 URL 로 
위와 같은 XFBML을 사용해 임베드가 가능하다. 다양한 옵션은 페북 문서 확인.
Javascript SDK 를 사용하는 경우 SDK 가 로드된 후 FB 객체를 initialize 하면서 페이지에 있는 모든 XFBML 을 파싱할 수 있고, 이와 다른 타이밍에 추가적으로 XFBML 을 파싱해야하는 경우는 아래의 코드로 가능하다.
특정 엘레먼트만 파싱하려면
jQuery 로 돔을 잡아 파싱하려면
이렇게 파싱하면 컨텐츠가 임베드된다.
0 1

Vim with the Syntastic plugin and ESLint (feat Vundle)

나는 nerdtree 라든지 하는 플러그인 안쓰고 날것의 vim 을 좋아하는데 syntax 나 eslint 는 필수기 때문에 써야지.
플러그인 관리 대세가 pathogen 에서 vundle 로 넘어간 듯.. 대세는 또 따라줘야지.
Vundle: https://github.com/VundleVim/Vundle.vim
Syntastic: https://github.com/vim-syntastic/syntastic
깃허브에 아주 잘 설명되어 있고.. 아래는 내 설치 히스토리.
소스 받기
.vimrc 에 다음 내용 추가 - Syntastic(만) 포함됨
설정된 플러그인 인스톨
플러그인 인스톨하면 화면 쪼개지고 설치 진행됨. 당황하지 말고 Vim 상태표시줄에 다 끝났다는 메시지 나오면 끄면 됨.
ESLint 는 글로벌로 설치해놓고 
사용하고 있는 .eslintrc 가 없다면 프로젝트 root path 에서
eslint 설정 파일이 있다면 아무 파일이나 돌려보면 eslint-plugin-react 등 필요한 것들 설치해줌
글로벌로 npm 설치해도 물론 됨
끝.
1 0

Vim - Pug(구 Jade) 템플릿 Syntax Highlight

템플릿 pug(구 jade)가 vim (version 7.4.1689) 에서 구문강조 (syntax highlight) 가 되지 않아 코딩에 어려움이 있다.
pathogen 플러그인을 사용해 vim-pug 로 pug 파일의 구문강조를 지원하는 방법은 다음과 같다.
pathogen 설치
https://github.com/tpope/vim-pathogen

vim 구동 파일 수정
vim-pug 설치
https://github.com/digitaltoad/vim-pug
1 1
Square

SSL 인증서 설치 및 적용
스마트폰 ssh 접속으로 5분만에 완료?!!?!
그것도 무료??!!?!??!

이건 누구의 얘기도 아닌 제 얘기. 제가 씬디에 https 를 적용하기 않고 버틸 수 있던 합리적(!) 이유들.

하지만 계속 눈에 밟히는....
그리고 괜시리 갖고 싶은 녹색 자물쇠
그리고 오늘.. Let's encrypt 와 EFF 의 Certbot 으로 인증비용없이 뻥안치고 스마트폰으로 5분만에 SSL 도입 끝.
물론 후속 설정들과 이미지, 외부 소스 등에 대한 url 점검과 설정이 필요했지만 이건 레알 신세계.
근데 이거 나만 몰랐어???
불과 몇달전에도 클라한테 인증서 구매시키고 서버세팅했었는데???
블로그 참 열심히 하시는 존경스러운 outsider 님이 2015년에 베타를 경험했던 포스팅은 여기.
이후 EFF 에서 Certbot 에 Apache, Nginx 등의 소프트웨어와 서버 OS 를 플러그인으로 개발하면서 지금은 서버설정까지 Certbot 이 완료시켜주고 있음.
설치는 EFF Certbot 페이지에 가서 자신의 서버와 웹서버를 선택하면 나오는 메뉴얼대로 (대략 5 ~ 7 커맨드) 하면 끝.
난 심지어 지하철에서 스마트폰으로 ssh 연결해서 설정 끝냈음. ㅇㅇ
내 케이스는 nginx / ubunt 14.04 LTS 로 실제 설치 커맨드 히스토리는 아래와 같음. 아래가 전부임.
이렇게 하면 1) 이메일 주소 입력하세요. 2) 이메일 수신 OK? 3) (서버레벨에서 확인된 도메인 중) 어떤 도메인 쓸꺼임? 4) https 만 씀? 80도 같이 씀? 이렇게 4개 물어보고 답하면 된다.
이후에 nginx 에서 http 접속을 https 로 리디렉션 시키던지 Rails 에서 모든 연결에 ssl 을 적용하는 등의 설정을 하면 됨. 이건 별도의 글로 작성.
이제 Let's encrypt 라는 회사를 살짝 알아보자.
리눅스 재단 (Linux Foumdation) 과의 협력프로젝트라고 사이트 상단에 '이미지'가 박혀있는데 어떤 관계인지는 확인하지 못했다.
ISRG 라는 캘리포니아의 기업에서 "HTTP" 보안이 기업들과 사용자들의 비용절감에 직간접적인 도움이 된다는 생각으로 시작했다고한다.
기본적으로 ACME (인증관리자동화환경) 을 보고 있고 실제로 해당 목적을 훌륭하게 수행하는 솔루션이 있다. letsencrypt 에서 개발하다가 현재는 EFF 에서 개발하고 있으며 패키지이름은 Certbot. 인증절차 및 인증서 설치 이후 갱신을 "명령어 하나로" 처리해준다.
SSL CA 로 중요한것은 얼마나 많은 주효한 클라이언트가 이를 인증된 CA 로 받아들이는가 하는 부분인데 해당 목록은 이곳 링크에서 확인할 수 있고 파폭 2.0+, 크롬, 익스 XP3+, 엣지, 안드 2.3.6+, 맥 사파리 4.0+, iOS 사파리 3.1+ 등등 그냥 믿고 사용해도 되는 수준이다.
또 하나는 letsencrypt 의 생존력인데.. 인증서가 무료다보니 기업의 유지가능성도 살펴보는게 좋겠다.
기업 스폰과 기부금으로 운영되는 것으로 보이며 공식홈페이지에서 스폰서들은 소개하고 있다.
문서상으로 년간 30만불(3년유지) 또는 35만불을 지원하는 플래티넘 스폰서는 mozilla, Akamai, SISCO, EFF, OVH, chrome 등의 6개사이고 그 외 IdenTrust,  포드재단, 페이스북, 디지털오션, 볼터, 쇼피파이 등 다수의 스폰서들이 있다.
역시나 결론은 그냥 믿고 쓰면 되겠군이라는 결론 ㅋㅋ
EFF 는 Electronic Frontier Foundation 의 약자로 한국위키 이름이 "전자 프런티어 재단" 이다.

뭔가 틀리진 않았지만 우습달까?
EFF 는 '디지털 월드' 에서 사용자들의 자유를 지키기 위해 1990년 설립된 비영리 재단으로 블루 리본 캠페인도 여기서 시작했다고 한다.
물리적으로는 관계되기 힘든 연결고리 없는 사람들과 조직이 어느날 나에게 직접적으로 혜택을 주는 일들이 많아지는게 참 재밌고 고마울 뿐이다.

진짜 고마우면 Donate! 
Support Let's encrypt
Support EFF Certbot