G40N's blog

현재 작성 중인 포스트입니다.

sc2outer example

예전에 친구한테 이런 제안을 받은 적이 있다.

롤의 티어 표시기처럼 스타2도 개인방송용 플러그인이 있으면 좋지 않을까?

마침 나도 취미로 트위치에 방송을 송출하고 있기도 했고, 대충 찾아보니 OBS나 Xplit의 브라우저 기능을 활용해서 웹 기술로 만들 수 있는 것 같아 흥미가 생겼었다.

Read more....

이전에 vuepress로 만든 블로그를 github pages를 이용하여 배포하는 방법을 올린 적이 있는데, 매번 빌드 된 사이트를 커밋하려면 기존 커밋과 충돌이 나 불편함이 있었다.
그러던 중, Surge라는 static site 호스팅 서비스를 알게 되어 적용해 보기로 했다.

Read more....

예전부터 블로그 디자인이랑 엔진을 좀 바꾸고 싶었는데, 계속 생각만 하고 있다가 대학교 졸업 전 마지막 방학에서야 이루게 되었다.
이전에는 쭉 Jekyll 엔진을 사용했었고, Lanyon을 조금 수정한 테마를 유지하고 있었는데, 아무래도 Jekyll의 기반인 Ruby 언어가 내가 다룰 줄 아는 언어가 아니기도 하고, Lanyon 테마 사용자도 너무 흔한 것 같아서 좀 유니크한 디자인을 갖고 싶었다. 웹 개발을 한 지 너무 오래되어서 감을 찾고 싶기도 했고.

새 블로그 엔진은 웬만하면 Javascript 기반으로 하고 싶었다. 그게 좀 더 힙해 보일 것 같으니까. Python 기반의 프레임워크도 있다면 써 봄직했는데 찾아보니까 별 게 없는 것 같아서 포기했다.
아무래도 이 방면에선 Gatsby가 제일 유명하다길래 설치도 하고 도큐도 읽고 예시 실행도 해보면서 이걸 어떻게 써먹어야 할까 생각하고 있었는데, 당시 군인이었던 친구가 (어제 전역했다) vuepress라는 정적 사이트 생성 엔진이 있다는 걸 알려주었다. 안 그래도 Vue.js는 좋아하는 프레임워크였고, 또 친구가 쓴다고 하니 망설임없이 vuepress로 갈아타기로 결정했다.
Vue 기반 정적 사이트 엔진으로 Nuxt.js라는 게 있다고도 하던데, 기회가 되면 그것도 써 보고는 싶다.

다른 프레임워크보다 Vue.js를 선호하는 이유는 일단 굉장히 떠오르고 있기도 하고, Vue 특유의 템플릿 방식이 (타 프레임워크에선 JSX를 많이 사용하는 것으로 알고 있다) 개발에 있어서 좀 더 직관적이라고 느껴서이기도 하다. Vue의 컴포넌트 파일은 이런 식으로 되어 있는데,

<template>
  <div></div>
</template>

<script>
  export default {};
</script>

<style scoped></style>

HTML/CSS를 조금이라도 다뤄 봤다면 정말 익숙한 구조라, 적응과 이식에 드는 수고가 적은 편이라고 할 수 있겠다.

Read more....

나는 주 텍스트 에디터로 Github에서 만든 Atom을 사용 중이다.
많은 텍스트 에디터 중 굳이 Atom을 사용하는 것은 Emmet, Beautify 등 좋은 플러그인이 많기 때문이기도 하지만, 아무래도 atom-material-uiatom-material-syntax를 설치한 이후의 에디터 레이아웃이 맘에 드는 것이 크다.
이 테마는 Google의 Material 디자인을 기반으로 해서 보기 좋은 편이지만, 인턴을 하면서 한 가지 불편함을 느끼게 됐는데, 그것은 에디터의 배경 색이 Blue Grey 계통이라는 것이었다. 물론 Blue Grey가 깔끔해 보이기에는 좋지만, 아무래도 일반적인 Grey에 비해 푸른색 계열의 색이 섞여 들어가므로, 장시간 작업 시에 눈이 피로해지는 일이 종종 있었다.

이를 해결하기 위해 많은 syntax를 조사해 보았지만, 맘에 드는 것을 찾을 수 없어 직접 config파일에서 배경색을 수정하기로 했다. Atom의 Preferences 메뉴에서 config 폴더를 연 후, packages/atom-material-syntax/styles/colors.less에 접근하여 배경색을 수정할 수 있었다. 이때 색 변경은 메터리얼 디자인 공식 페이지의 컬러 가이드 Grey 계열을 참고하였다.

Read more....

D3는 기본적으로 array형태로 묶인 데이터를 각각의 요소에 바인딩하고, 바인딩된 데이터를 통해 각 요소에 작업을 수행하는 라이브러리이다. 따라서, D3으로 차트를 만드는 모든 과정은 다음과 같은 과정을 거친다:
데이터를 바인딩할 element 선택 -> 데이터 바인딩 -> element가 대응되지 않는 데이터들에 진입 -> 데이터에 기반한 요소 추가 작업
여기서, 처음 차트를 생성할 때는 첫 단계에서 선택되는 데이터는 아무것도 없는 경우가 많다. 즉, 아무것도 없는(이제 element가 추가될) 빈 공간을 D3 selector를 통해 선택하고, 데이터를 바인딩한 후, 데이터 array 안에 존재하는 각각의 값을 이용하여 원하는 속성을 가지는 element를 하나하나 추가하는 방식으로 차트를 제작하는 방식이 보편적이라 할 수 있다.

예를 들어, 다음과 같은 표를 제작하려 한다고 하자.

name size(GB)
C: 128
D: 512
E: 16
F: 8
G: 8
Read more....