Skip to main content

3 posts tagged with "도큐사우러스"

View All Tags

데이터 시각화 with D3 - #0 준비

new study project with D3#

d3js.org

앞으로 테크톡 시간에 제가 시리즈로 진행할 프로젝트에 대해 소개할까 합니다. 제목에도 있듯이 디쓰리 라는 이름을 가진 자바스크립트 라이브러리를 이용한 프로젝트 입니다. 디쓰리는 데이터 비주얼라이제이션을 위한 그래픽 라이브러리 인데요, 데이터 비주얼라이제이션이란 말 그대로 데이터를 보여주는 방법. 즉, 데이터 시각화를 의미합니다.

이 분야에 우리회사는 이미 아주 깊숙히 들어와 있고 관련된 리얼드리드, 리얼피봇, 리얼리포트 등, 제품도 이미 만들었고, 만들고 있습니다.

이런 시각화 라이브러리인 디쓰리 D3 를 이용해서 테크톡 시간에 진행 할 수 있는 간단한 무언가(?)를 만들어 볼 계획입니다.

example#

Times Sunday Review 2013년 기사

이 페이지는 미국의 타임즈지에 2013년에 올라온 기사인데요, 2007년 부터 2012년까지 S&P 500에 올라온 기업들이 법인세를 어떤 세율로 내고 있는가에 대한 데이터를 그래프로 표현한 겁니다.

자세히 보시면 애플에 부과한 세율이 14% 인데요 이 세율이 너무 낮게 책정되었다는 의회 청문회를 기사로 작성하면서 그 근거 데이터를 비주얼하게 보여준 기사라고 할 수 있습니다.

The View by Industry 버튼을 누르면 업종별로 펼쳐서 그래프를 볼 수도 있습니다. 여기서 애플은 정보기술 업종의 다른 기업들에 비해서도 아주 낮은 세율을 적용받고 있는걸 볼 수 있습니다. 물론 금액을 표시하는 시가총액을 나타내는 원의 크기를 보면 대표적인 기름 회사인 엑슨모빌 같은 기간산업 기업들과 비슷한데도 불구하고 부과되는 세율은 아주 작다는 것을 한눈에 알 수 있습니다.

이런 형식의 그래프를 버블 차트라는 이름으로 부르는것 같습니다. 저도 아직은 잘 모르겠지만 공부를 하다보면 알 수 있겠죠?

plan#

일단 디쓰리 D3 학습을 통해 알게된 내용을 매주 테크톡 시간에 발표하고 테크웰 문서에 올려놓을 계획입니다. 그리고, 매주 공부한 내용을 블로그를 통해 텍스트로도 올려놓을 생각입니다.

지금 하고있는 업무가 있기 때문에 많은 시간을 할애하지는 못하겠지만 그래도 틈틈이 공부해서 2달 안에 뭔가 작은 결과물을 하나 만들어서 볼 계획 입니다.

초급 개발자들도 같이 참여할 수 있게 내용은 처음부터 쉽게 작성하고 테크톡 시간에는 학습한 내용에 대한 리뷰만 발표하겠습니다.

methods#

D3를 학습하는 방법은

  • 매주 조금씩 학습
  • 테크웰에 학습하면서 작성한 문서 공개
  • 테크톡 시간에 간단하게 학습한 내용 또는 학습할 내용을 발표

resource#

여러가지 산발적인 리소스들, 하지만 그들이 향하는 방향은 단 하나 여야 한다. 데이터 시각화.

2021년엔 어떻게 해야 하나?

trace#

백패킹이나 캠핑의 생태계에 leave no trace (LNT) 라는 말이 있습니다. 우리가 어딘가에서 머무르고 있다가 그 자리를 떠날 때, 쓰레기 같은 흔적을 남기면 안 된다는 의미에서 사용하는 말입니다. 하지만, 일반적인 회사의 생태계에서 이런 말을 듣는다면 "놀았네" 라는 말을 들을 수도 있을 것입니다. ㅋㅋ

개발자로서 나는 가능한 한 많은 발자취를 남기려고 애를 썻던것 같습니다. 온라인이건 오프라인이건 여러 가지 방법으로 많이 남기려고 노력 했습니다. 물론 그 흔적들을 한눈에 볼 수 있는 방법은 없지만 찾아보고자 마음먹으면 방법은 있을 것입니다.
하지만, 나는 정말 해야 할 일들을 한 것인가에 대한 의문이 들 때가 있습니다. 예를 들어 - 그럴 리는 없겠다 싶지만 - '혹시 하지 말아야 할 일을 한 것은 아닌가?' 또는 '하지 않아도 되는 일을 한 것은 아닌가?' 하는 생각들 입니다.

곰곰이 생각해 보면 가야 할 길을 미리 정하고 남긴 발자국이 아니라 여기저기 다니면서 흔적만 잔뜩 만들어 놓은것 같은 느낌입니다.

올해에는 흔적 남기는 일을 잠시 멈추더라도 가야 할 길을 미리 정하고 가야겠습니다. 다시 말해서, 장기적으로 또는, 단기적으로 목표를 계속 되짚어 점검하면서 일을 해야겠는 생각입니다.

로드맵을 통해 목표 설정하기.#

draft#

완성된것 보다 더 많은 영감을 주는 미완성들이 있습니다.

여러 가지 프로젝트를 동시에 개발 하다 보면 외부 라이브러리나 패키지를 사용할 일이 많이 있습니다. 이런 외부 프로그램을 사용해 보기 위해 연습용 디렉토리를 만들고 코드를 만들어 보는데 실제로 연습을 완성한 것도 있지만 그렇지 못한 미완성의 코드들도 많이 있습니다.

이것들을 한군데 모아놓고 시간 날 때 하나씩 열어서 코드를 보다 보면 그것들을 만들 당시의 기억이 떠오를 때가 있습니다. 그때는 왜 그런 생각을 했었는지, 지금은 어떻게 생각이 바뀌었는지, 또 어떤 지식이나 방법들 때문에 지금은 그런 방식을 사용하지 않는다든지 등등 여러 가지 생각들이 떠오르기도 하고 잘못된 습관이나 지식을 다시 깨닫게 되기도 합니다.

올해에는 이런 경험을 같이 공유해 보면 좋겠다는 생각을 해 봅니다.

샌드박스에 연습 공유하기#

read#

글을 읽는 다는건 무지 귀찮은 일입니다.

유튜브같은 영상물을 자주 보다보니 더더욱 글을 읽는 것이 불편하고 힘들어 지는것 같습니다. 글과 영상에는 각각의 장단점이 있습니다. 개인적으로, 아무리 잘 만들어진 강좌 영상 일지라도 글에서 얻게되는 안정된 느낌의 지식은 기대하기 어렵다고 생각합니다.

꼭 이런 이유에서만은 아니지만 올해에는 더 많이 읽고, 또 읽는것에 멈추지 않고 정리까지... 해야 겠습니다.

📚 추천 바랍니다.#

write#

글읽기 만큼이나 글 쓰기도 귀찮은 일입니다.

요즘들어 깃허브에 올리는 이슈, 업무적인 메일이나 단순 기록, 문자를 보내거나 채팅에 쓰는 글 말고 글쓰는 일이 거의 없는것 같습니다. 조금 오랜시간 고민하고 생각하면서 글쓰는 일은 거의 없는 것 같습니다. 더군다나 작년엔 코로나로 취미생활도 못하는 바람에 동호회 카페에 후기 같은 것도 작성할 일이 많지 않았습니다.

올해는 가끔이라도 생각하면서 글을 써야 겠습니다. 생각하면서 글을 쓰고 지우고 고치고 하다보면 조각이 사라진것 처럼 보이던 퍼즐의 한 부분이 맞춰지는것 같기도 합니다. 지금처럼 블로그에 글도 자주 올려봐야 겠습니다.

블로그에 글쓰기#

테크웰 기술 블로그에 대하여

custom blog page#

도큐사우러스가 제공하는 블로그 목록페이지를 조금 수정했습니다. 도큐사우러스의 블로그 플러그인 페이지에 대한 연습 정도로 생각하고 변경할 수 있는 아래 네개의 페이지 중 목록내용 페이지만 수정했습니다.

{
...
blogListComponent: '@theme/BlogListPage',
blogPostComponent: '@theme/BlogPostPage',
blogTagsListComponent: '@theme/BlogTagsListPage',
blogTagsPostsComponent: '@theme/BlogTagsPostsPage',
...
}

writing, what?#

테크웰 사이트의 블로그 포스트 작성은 아무런 제약이 없는게 맞겠죠? 누구나, 어떤 내용이든 작성해서 공유하면 좋을것 같습니다. 물론 사이트는 외부에 공개되겠지만 보안사항이 아니면 관계없을것 같습니다.

writing, how?#

blog 디렉토리에 기존에 작성된 내용을 참고하세요. 2019 폴더는 내용에 포함된 경로등의 오류로 일단 새로운 사이트에 포함시키지 않았습니다. 필요하면 추가하면 나중에 추가하기로 하죠. 다시한번, 작성 방법은 기존 작성된 포스트나 도큐사우러스의 블로그 작성 가이드 를 참고하세요.

CropImg#

CropImg 라는 이름의 이미지 잘라내기 컴포넌트를 사용해 보세요. 사용법은 소스코드를 참고하거나 기존에 작성된 블로그 포스트를 참고하세요.

CropImg 사용예#

소스 이미지의 상단 50픽셀을 잘라낸것 처럼 상단으로 이동시켜 보여줍니다. 아래 내용을 마크다운파일 내부에 입력하면 이미지를 표시할 수 있습니다. 이 컴포넌트는 완전히 테스트를 마치지 않은 미숙한 컴포넌트 입니다.

import CropImg from '@site/src/components/CropImg';
<CropImg
cropY="-50px"
src="https://images.unsplash.com/photo-1596276547385-61a667714f16?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1489&q=80"
/>;