Blog
display: table을 사용한 갯수 가변 그래프
막대그래프에서 막대의 갯수에 따라서 자동으로 좌우 정렬이 될 수 있게 하는 방법이 있겠냐는 질문을 받아서 구현해봤다. 좌우로 자동으로 영역이 늘어나게 하려면 너비가 고정인 포지션이나 플로트로는 구현이 불가능하다. 표로는 가능할 것 같다. 그래프를 표로 마크업 하는 것은 부적절하지만 표현만 표로하면 가능하겠다는 생각이 들었다. 사실 display: table-cell을 이용한 방법은 많이 거론되기는 하지만 올바른 방법인가라는 고민을 항상 하게되는 방법이다. display: table-cell을 쓰려면 상위에 display: tabl …
dev |2017-04-12 | Comments (0)
자기 서명 인증서로 HTTPS 적용해서 위치 정보 사용하기
크롬이나 사파리는 HTTPS를 사용하지 않으면 위치 정보(Geolocation)를 사용할 수 없고 파이어폭스도 곧 55에서 동일한 제한을 하게 된다. 클라우드 플레어를 사용하면 간단하게 HTTPS를 적용할 수 있지만 내부망에서 사용하는 도메인도 없는 테스트 서버에는 적용할 수가 없다. 보안 연결을 사용하는 다른 서비스에 빌붙어서 문제를 해결하려고 삽질을 하다가 결국은 안되어서 포기하고 자기 서명 인증서(self-signed certification)를 설치해 보기로 했다. 사실 인증서 설치하고 웹서버 설정하는 일을 한번도 안해 …
dev |2017-03-25 | Comments (0)
Base64 인코딩과 성능
언제부턴가 아이콘이나 자잘한 이미지들은 base64로 인코딩해서 CSS에 data-uri로 넣는 방법을 즐겨쓰고 있었다. 성능 측면에서 좋은 방법이 아니라는 것은 알지만 장단점을 저울질 해 볼때 내가 만드는 결과물에서는 장점이 더 크다고 생각했기 때문에 약간은 조심하면서 사용하고 있었다. 오늘 base64의 문제점에 대해서 자세히 다룬 글을 봤다. 단점을 좀 극단적으로 부각하기는 했지만 알아두면 좋은 내용들이 잘 정리되어 있다. 두번째 글에서는 데이터를 실측해서 어느정도의 차이가 있는지 더 다양한 관점으로 설명하고 있다. 기본 …
dev |2017-02-20 | Comments (1)
워드프레스, 피엠위키에 HTTPS 적용
갑자기 HTTPS가 이슈가 되는 것을 보고 그동안 귀찮아서 적용하지 않았던 사이트들에도 HTTPS를 적용했다. HTTPS 적용이야 클라우드 플레어에서 클릭 몇 번으로 활성화 할 수 있었는데 막상 어플리케이션에서 부드럽게 전환이 되지 않았다. 우선 워드프레스는 CSS와 스크립트 같은 자원이 브라우저에서 차단됐다. 그리고 링크에도 HTTP가 명시되어 있어서 링크를 클릭하면 HTTPS가 계속 유지되 않았다. 이 문제는 워드프레스 관리자 페이지에서 웹사이트 주소 설정을 HTTPS 주소로 바꾸는 것으로 간단히 해결했다. 테마에 적용되어 있 …
dev |2017-02-16 | Comments (0)
IE9에서 animation 지원 안되어서 보이지 않는 콘텐츠 보이게 하기
animation은 IE10부터 지원한다. 만약 화면에 없었던 콘텐츠가 나오는 효과에 animation을 사용하면 IE9에서는 콘텐츠가 안보이는 상태로 계속 있어서 아무것도 보이지 않게 된다. 특히 animation-delay를 적용할 경우 초기값이 화면에 나오지 않는 상태여야 하기 때문에 대안을 제시할 수가 없다. p { opacity: 0; animation-name: reveal; animation-iteration-count: 1; animation-fill-mode: forwards; animation-delay …
dev |2017-02-12 | Comments (0)
HTML 5.1 변경사항
석달전 일이기는 하지만 아무도 관심가져주지 않는 사이 HTML 5.1이 나왔다. 이전 버전과의 차이점에 대한 섹션이 있어서 대강 번역해 봤다. HTML5.1에서 새로 추가된 기능 <picture>요소와 srcset 속성을 이용하여 반응형 이미지를 선택할 수 있게 됨 <details>요소 <summary> 요소를 이용해서 사용자가 정보를 확장해서 볼 수 있게 해주는 기능을 사용할 수 있음 <menuitem>요소에 type="context" 속성과 속성값을 지정해서 브라우저의 문맥 메뉴(c …
dev |2017-01-28 | Comments (5)
YAMAHA TRB1005J
원래는 악기를 바꿀 생각이 전혀 없었는데 그동안 잘 쓰고 있던 데임 사이어가 리어 픽업에 문제가 생겨서 어쩌다보니 구매하게 됐다. 고쳐서 써도 충분하다고 생각되기는 했는데 오래 사용하기도 했고 한번 바꿔볼까하는 마음으로 요샌 무슨 악기가 잘나가나 알아보기 시작했다. 그런데 마음에 드는 악기는 거의 4000~6000$ 정도의 가격대래서 굳이 내 실력에 이정도까지 돈을 써서 악기를 바꿀 필요가 있나라는 생각이 충만할 즈음에 이 YAMAHA TRB1005J가 눈에 띄었다. 원래 TRB시리즈는 가격대가 높은데 이 모델은 12만엔 정도 …
hobby |2016-12-17 | Comments (0)
이슈 도구의 담당자 항목
지라(Jira)와 같은 이슈 관리 도구를 사용할 때 하나의 이슈에 담당자(asignee)를 이사람 저사람 바꿔가면서 일을 진행시키는 경우를 많이 봤다. 예를 들어서 QA가 개발자에게 이슈를 할당하고 개발자가 이슈를 처리하면 확인해 보라고 다시 QA를 이슈의 담당자로 변경하는 경우가 이런 경우다. 기획자가 디자이너를 할당하고 디자이너는 마크업 개발자를 할당하고 마크업개발자는 어플리케이션 개발자를 할당하는 전형적인 폭포수 모델로 일이 전달되는 모습도 간혹 볼 수 있다. 이렇게 담당자를 바꿔가면서 사용하면 누가 그 이슈를 해결했는지에 …
work |2016-11-25 | Comments (1)
네이버 랩스
조직과 개인, 회사와 성장, 인사의 중요성을 많이 느끼게 해 준 카카오를 뒤로 하고 오늘부터 네이버 랩스로 출근 한다. 네이버 랩스는 기반 기술 조직이어서 나같은 웹 엔지니어가 무슨 일을 할 수 있을지 걱정이 좀 되기는 하지만 분명 더 재미있고 사람에게 도움이 되는 도전이 있으리라 기대한다.
work |2016-11-07 | Comments (3)
오즈뷰어에서 가상환경이라고 차단한 콘텐츠 사용하기
인터넷으로 각종 증명서를 떼어보면 별상황을 다 겪게 되는데 가상환경이라고 증명서를 보지도 못하고 출력도 안되게 하는 것이 그 중의 하나이다. 요즘은 보여주지는 않아도 출력은 가능하게 해주는 경우도 있던데 내가 사용한 서비스는 오래되어서 그런지 볼 수도 없었다. 증명서 뿐만 아니라 예전에 모 방송국의 지나간 방송 보는 유료서비스도 가상환경을 차단 했었다. 별로 쓰지도 않는 윈도우와 패러렐즈를 몇 십 만원씩 주고 산 것도 억울한데 그나마 쓸 수도 없게 하는 행태는 매우 부당하다. 접근이 된 다음에 보안이지 보안이랍시고 접근도 못 …
software |2016-10-27 | Comments (2)