Dropbox의 등장 이후로 사진을 찍으면 PC에서도 바로 그 사진을 볼 수 있고 다른 기계를 사용해도 마찬가지로 사진을 볼 수 있는 것이 당연하게 되었다. Dropbox가 촬영한 사진을 모든 기계에 동기화해주기 때문이었다. (이것은 안드로이드에서고 아이폰은 아이클라우드에서 이렇게 된다) 이렇게 좋은 Dropbox에도 단점이 있다. 고작 5GB밖에 무료로 제공하지 않는다는 거다. 한달에 만원정도 지불하면 무제한 용량을 사용할 수 있기는 한데 한번 쓰기시작하면 멈추기 쉽지 않기때문에 망설여진다. 구글도 구글 드라이브라는 것으로 이 시장에 진출을 했는데 한발 더 나갔다. Photos라는 어마무시한 서비스를 출시한거다. 피카사의 뒤를 잇는 제품인데 구글 드라이브와 연동이 되는데다가 용량이 무제한이다. 물론 무..

티스토리 에디터를 업데이트했다. 변경 사항은 몇개 안되지만 조금은 큰 변화라서 마이너 버전도 하나 올렸다. 이제 0.4.0 이다. 자잘한 변경은 넘어가고 큰 변경만 정리해보려고 한다. React 16 적용 react 16이 나왔다. 어마어마한 것들이 변경되었는데 사실 사용자로서 신경쓸 건 별로 없다. 거의 같기 때문이다. 문제는 deprecated된 것들이 정말 삭제가 된 것이다. deprecated 되어도 얼마간은 유지해 줄 줄 알았는데 이렇게 바로 삭제할 줄이야... ㄷㄷㄷ 그간 변경을 잘 따라온 앱이야 문제없겠지만 그렇지 않았다면 많이 당황스러울 수밖에 없다. 가장 타격이 큰 삭제는 PropTypes와 createClass다. PropTypes는 deprecated됐지만 prop-types를 통해서..

tinymce의 플러그인을 만들다가 EditorWindow 내부의 요소를 fixed로 배치할 일이 생겼다. 근데 0, 0 포지션이 document가 아니라 EditorWindow기준으로 계산되었다. 이상하다 생각해서 스타일을 하나하나 테스트하다보니 transform:scale(1)이 이런 현상을 만들었음을 발견했다. See the Pen transform and fixed by Joo (@joostory) on CodePen. 놀랍게도 transform에 어떤 속성을 사용하더라도 이런 현상이 발생했다. 와 신기하다며 알아보니 2014년, 2015년에 작성된 문서들이 보인다. 아... 내가 바보였구나 하는 생각이 든다. 많은 문서들 중에도 한글로 작성된 이 글이 젤 이해하기 쉽게 설명이 되어 있다. 공부하자.

custom 디자인의 select box를 만들려면 아래쪽 방향의 caret이 필요하다. 이미지로 만들어도 되지만 CSS로 간단히 만드는 방법이 있다. border를 이용한 방법인데 아주 신박하다. 각 border가 만나는 지점이 사선으로 처리된다는 것을 이용했다. border-left:4px solid transparent; border-right:4px solid transparent; /* 아래쪽 */ border-top:4px solid #333; /* 위쪽 */ border-bottom:4px solid #333; 이런 식이라면 위, 아래뿐만이 아니라 오른쪽, 왼쪽도 가능하다. 정말 창의적이고 대단한 방법이라는 생각이 들었다. See the Pen Caret by Joo (@joostory) o..

Open Graph는 페이스북이 공유되는 외부 문서들을 효율적으로 관리하기 위해 고안한 프로토콜이다. 처음엔 이나 이미 존재하는 메타태그들로 가능한 걸 왜 이렇게 하나 싶었는데 점점 활용이 늘어나서 동영상, 오디오, 슬라이드 쇼, 음악 등등 별 것을 다 할 수 있게 되었다. 요즘엔 블로그에서도 참조 문서를 넣을 때 og를 사용해서 미리보기같은 모습으로 넣는 것을 지원한다. 브런치, 포스트가 할때만 해도 그냥 하나보다 했는데 네이버 블로그가 해버리니 마치 반드시 필요한 기능같은 것이 되어버렸다. 사람들이 티스토리에는 왜 없냐고 자꾸 물어본다. 별다른 방법이 없어서 미루다가 tinymce에서는 이런 object를 다루기가 쉬워보여서 도전해보았다. 기본 타입 Open Graph protocol The Open..