본문으로 건너뛰기
Eunkwang Shin

Eunkwang Shin

Owner

Full Stack JavaScript Developer | Half-time Open Sourcerer.

모든 저자 보기

Git GUI 클라이언트 분석 (windows)

· 약 4분
Eunkwang Shin
Eunkwang Shin
Owner

Git 고수들은 CLI 만 사용한다지만 난 Rebase 와 Squash 를 하다보면 몇 개의 문서를 다시 열어보는지 모르겠다.

그래서 공식 GUI Clients에서 무료 Git 클라이언트를 파해쳐봤다.

분석​

21세기 디자인이면서 커밋 그래프가 제공되고 git flow가 가능하며 쉬운 rebase 가 지원되는 클라이언트는 git kraken 과 git fork 였다.

나머진 다음과 같은 단점이 있었다.

  • SourceTree
    • 윈도우즈에서 UI 가 너무 후지다.
    • 인증이 왜 이렇게 어려운지 모르겠다.
    • 느리다.
  • Github Desktop
    • 딱 깃헙용이다.
    • 되는 기능이 많지 않다.
    • 커밋 그래프도 없다.
  • Tortoise Git
    • 왠지 SVN이 떠올라서 패스했다.
  • Git Extensions
    • 21세기 디자인은 아닌 것 같다.
  • GitEye
    • 솔직히 Git Clients 의 끝인 듯 싶다.
    • 하지만 워크벤치 쓰는 듯한 느낌이라 직관적이진 않다.
  • gitg
    • 너무 간단하다.
  • ungit
    • 너무 간단하다.
  • git-cola
    • cli를 옮겨놓은 느낌이다.
  • Cyeligent Git Tool
    • free 인데 라이센스를 물어본다.
    • 설치 폴더를 설정할 수 없다.
  • Aurees
    • 좋아보였으나 바이러스가 감염됨으로 다운로드 불가능하다.
  • CodeReview
    • diff 용이다.
  • gmaster
    • non-commercial use 이고,
    • 그래프가 너무 느리게 그려진다.
  • GitAhead
    • 좋아보이지만 non-commercial use
  • Guitar
    • diff 용
  • RepoZ
    • 애드온 같은 느낌이다.

Git Kraken​

  • 느렸는데 최근 빨라졌다.
  • 근데 아직도 느리다. 일렉트론 기반이라 그런 것 같다.
  • 예쁜 그래프가 있다.
  • 쉬운 rebase 를 제공한다.
  • git flow 가능하다.
  • 검은색 테마가 가능하다.
  • non-commercial use 라 회사에서 못 쓴다.

Git Fork​

  • 빠르고 직관적이다.
  • 그래프가 지원된다.
  • 쉬운 rebase 가 가능하다.
  • 검은 테마가 가능하다.
  • 완전한 무료이다.
  • 지속적인 버전 업데이트가 되고 있다.
  • 구글에서 git fork를 검색하면 정말 fork 하는 방법만 나오고 검색이 되지 않는다.

결론​

GitFork 를 쓰자. 첫 실행 시에 git config 설정 UI 가 뜨는데 제대로 입력해줘야한다.

그리고 workspace 를 설정하는 란엔 사용하는 workspace 만을 등록하자. 전체를 등록할 경우 모든 폴더의 .git 디렉토리를 읽어오는 것 같다.

Javascript로 리소스 체크

· 약 4분
Eunkwang Shin
Eunkwang Shin
Owner

페이지나 리소스가 있는지 체크하는 방법은 서버사이드에선 엄청 간단하다. 단 두 가지 기능만 있으면 해결된다. 심지어 certinfo 값 안에선 인증서 만료일까지 확인할 수 있다.

  • HEAD 메소드
  • CURL

하지만 수 백개의 리소스를 동시에 체크해야할 경우는 어떨까? 리소스가 있는 서버에선 DDoS 공격으로 오인할 수 있고, 심지어 내 서버가 차단될 가능성도 있다.

클라이언트에서 리소스를 확인할 수 있는 방법이 있을까?

삽질​

ajax​

  • 당연하지만 크로스도메인 XHR 은 CORS 가 없는 이상 막힌다.
  • HEAD 메소드도 똑같다.
  • fetch 도 똑같다.

script​

  • script tag 를 DOM 에 렌더링하는 것이므로 XSS 공격이 가능하다.
  • 스크립트 태그에 한해서 onLoad 와 onError 로 체크가 가능하다.

image​

  • 이미지 태그에 한해서 onLoad 와 onError 로 체크가 가능하다.
  • css 일 경우 onLoad 와 onError 로 체크가 가능하다.
  • DOM 에 렌더링하는 것이므로 UI가 틀어질 수 있다.
  • html 등의 페이지도 체크가 가능하지만 firefox 등의 브라우저에서 일관성이 없다.
  • IE와 Edge 브라우저에서 없는 css 인 경우에도 onError 이벤트가 발생하지 않았다.

마지막 이슈는 크리티컬했는데, 다행히 에러를 만들어 낼 수 있었다. cssRules 는 스타일시트가 없을 경우 접근할 수 없는 내부 값이기에 에러를 던진다.

link.onload = (loadEvent) => {
  // ie, edge 체크
  const isIE = /MSIE|Trident|Edge/i.test(navigator.userAgent);

  // sheet 는 현재 로드 된 스타일시트 엘레먼트
  if (isIE && loadEvent.target.sheet) {
    try {
      // 강제로 시트 내의 cssRules 값에 접근한다.
      const temp = loadEvent.target.sheet.cssRules;
    } catch (e) {
      // onError 와 같은 이벤트 처리
    }
  }
};

video​

  • 없는 영상에 대해 onError 가 동작하지 않는다.

기타​

  • embed 나 iframe 은 X-Frame-Options 헤더에 차단되거나 XSS 공격이 가능하다.
  • onError 이벤트의 일관성이 없다.

해결​

삽질의 결과로 js (script), css (link), image (img) 에 한해서 리소스 체크가 가능한 걸 확인했다. 하지만 js 와 css 의 렌더링으로 인해 페이지가 틀어지는 걸 어떻게 방지할 수 있을까?

불현듯 샌드박스란 단어가 떠올랐다.

sandbox​

보이지 않는 샌드박스 프레임을 만들고, 거기에서 위험한 일을 하면 된다.

<iframe id="sandbox" src="about:blank" style="display:none;" />

만들고

$sandbox.contentDocument.write(`
  <html>
    <head>
      <script>
      여기에 프레임간 메세징과 리소스별 onLoad, onError 체크 로직을 넣는다.
      </script>
    </head>
  </html>
`);

넣고

메인 프레임에선 샌드박스 메소드를 postMessage 하면 된다.

넷플릭스 - 얼터드카본 리뷰

· 약 2분
Eunkwang Shin
Eunkwang Shin
Owner

얼터드 카본​

회당 70억이 들어간 작품에 SF 스릴러라길래 보기 시작했다.

리뷰​

주인공이 질투날 정도로 잘생겼다. AI + 뇌에 대해 How to create your mind를 읽고 나서 동경을 했었는데, 그 시대가 그려진 것 같아 보는 내내 행복했다.

반전이 생각지 못해서 좋았지만, 여형사의 월권이 너무 개연성이 없긴 했다.

줄거리​

뇌를 Cortical Stack 이란 칩에 넣어 몸을 바꿔낄 수 있는 시대가 열렸다. 돈 많은 사람들은 Head in the Clouds 란 부유선에 자기 정보를 백업해 놓는다. 그리고 백업된 정신으로 몸만 바꿔가면서 성경의 므두셀라처럼 영생을 산다.

영생에 반대하는 반군 엔보이의 일원인 주인공 코바치는 므두셀라 1인자인 뱅크로프트의 살해사건을 맡기 위해 250년 만에 깨어난다.

vi 에디터 단축키 마스터하기

· 약 4분
Eunkwang Shin
Eunkwang Shin
Owner

viemu 의 단축키 리스트가 있지만, 손에 익기 전엔 사용하기가 힘들다.

image from hexo

a, i, 저장, 나가기 이런 기초적인 건 제외하고 vi 에디터에서 더 빠른 작업을 위한 명령어들을 다시 알아보자.

이동​

키커서
l 또는 →오른쪽 한 문자
h 또는 ←왼쪽 한 문자
j 또는 ↓한 줄 아래로
k 또는 ↑한 줄 위로
0현재 줄 처음으로
^현재 줄 첫 번째 공백 아닌 글자로
＄현재 줄 마지막으로
W다음 단어나 마침표 기호 처음으로
shift + W다음 단어 처음으로 (마침표 무시)
B이전 단어나 마침표 기호 처음으로
shift + B이전 단어 처음으로 (마침표 무시)
ctrl + F 또는 PageDown한 페이지 아래로
ctrl + B 또는 PageUp한 페이지 위로
number + shift + G (1G)해당 줄로
shift + G파일의 마지막 줄로

L, H, J, K 가 문자 이동에 사용되는 이유는, 방향키까지 손가락을 움직이기엔 너무 멀기 때문이다.

편집​

빈줄 추가​

키커서
o현재 줄 아래에 빈 줄 추가
shift + O현재 줄 위에 빈 줄 추가

삭제 및 자르기​

d 명령어는 삭제한 텍스트를 버퍼에 보관한다.

키커서
x현재 문자
3x현재 문자를 포함한 다음 2개 문자
dd현재 줄
4dd현재 줄을 포함한 다음 4줄
dW현재 커서부터 다음 단어 앞까지
d ＄현재 커서부터 현재 줄 끝까지
d0현재 커서부터 현재 줄 맨 앞까지
d^현재 커서부터 그 줄의 공백아닌 첫 글자까지
dG현재 줄부터 파일 끝까지
d10G현재 줄부터 다음 10번째 줄까지

복사​

키커서
yy현재 줄
4yy현재 줄을 포함한 다음 3줄
yW현재 커서부터 다음 단어 앞까지
y ＄현재 커서부터 현재 줄 끝까지
y0현재 커서부터 현재 줄 맨 앞까지
y^현재 커서부터 그 줄 공백아닌 첫 글자까지
yG현재 줄부터 파일 끝까지
y10G현재 줄부터 다음 10번째 줄까지

붙혀넣기​

p

치환​

:%s/Search/Replace/gc
  • %: 파일 열 전체 (1,＄ 라면 1번 줄부터 파일 끝까지)
  • s: search and replace
  • /Search/Replace/: Search 를 Replace 문자열로 치환
  • g: global
  • c: confirm 실행

치환 확인 명령​

키작업
y치환 실행
n건너뛰기
a전체 치환
q종료
l이번만 치환하고 종료
ctrl + E스크롤 위로 이동
ctrl + Y스크롤 아래로 이동

넷플릭스 - 클로버필드 패러독스 리뷰

· 약 2분
Eunkwang Shin
Eunkwang Shin
Owner

클로버필드 패러독스​

클로버필드 전작들의 떡밥 회수용이라길래 기대했다.

리뷰​

  • 처음에 뉴스 인터뷰처럼 나오는 과학자? 의 말을 잘 들으면 그게 결말이다.
  • 뒷부분에 깜짝 놀랄만한 게 있다.
  • 그래비티와 선샤인을 합쳐놓은 느낌이다.
  • 펜도럼처럼 긴장감이 있진 않다.

줄거리​

  • 에너지원을 찾기위해 우주정거장에서 입자가속기를 돌렸는데
  • 지구가 눈앞에서 사라졌는데 알고보니 카시오페이아 자리 옆까지 우주정거장이 이동한 거였다.
  • 근데 양자가 얽혀서 다른 시공간의 우주였다.
  • 우주선을 힘들게 복구해 가속기를 돌려 원래 시공간으로 돌아온다.
  • 그런데 원래 지구는 가속기 때문에 상상하지 못한 일이 일어나있다.

넷플릭스 - 익스팅션 종의 구원자 리뷰

· 약 1분
Eunkwang Shin
Eunkwang Shin
Owner

익스팅션: 종의 구원자​

넷플릭스를 결제하고 SF 탭을 방황하다가 본 첫 번째 영화다.

되게 재밌어 보였다.

리뷰​

  • 주인공 (마이클 페나) 때문에 집중이 잘 되지 않았다.
  • 연기는 잘 하는데 자꾸 엔트맨 친구 짠돌이 사장 이미지가 생각난다.
  • 반전은 충격적이지 않았다. 프레데터인 줄 알았더니...
  • 건너 뛰면서 볼 정도로 흥미는 떨어진다.

줄거리​

  • 주인공은 환상을 자주 본다. (도입부 30%가 이 장면이다.)
  • 와이프도 보스도 정신 착란과 불면증으로 의심해 안 믿어준다.
  • 결국 실제로 일어났다.
  • 열린 결말

Array map, filter, values 분석

· 약 3분
Eunkwang Shin
Eunkwang Shin
Owner

Array map, filter, values 분석​

아래 데이터로 php 와 js 의 다른 점을 확인해보자. id 가 3 이상인 id 만 추출하고 싶었다.

users.json
[
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "[email protected]"
  },
  {
    "id": 2,
    "name": "Ervin Howell",
    "username": "Antonette",
    "email": "[email protected]"
  },
  {
    "id": 3,
    "name": "Clementine Bauch",
    "username": "Samantha",
    "email": "[email protected]"
  },
  {
    "id": 4,
    "name": "Patricia Lebsack",
    "username": "Karianne",
    "email": "[email protected]"
  },
  {
    "id": 5,
    "name": "Chelsey Dietrich",
    "username": "Kamren",
    "email": "[email protected]"
  }
]

AS-IS​

JS​

머리 속으로 돌려본 원래 느낌은 이랬다.

let userIdxs = users.map((user) => {
  if (user.id >= 3) {
    return user;
  }
});

// userIdxs [ null, null, 3, 4, 5 ]

userIdxs = userIdxs.filter(Boolean);

// userIdxs [ 3, 4, 5 ]

php​

생각 없이 짜면 array_map 을 먼저 사용할 수 있다.

$userIdxs = array_map(function ($user) {
  if ($user['id'] >= 3) {
    return $user['id'];
  }
}, $users);

// userIdxs [ null, null, 3, 4, 5 ]
// 참담한 결과가 나왔다.

$userIdxs = array_filter($userIdxs);

// 필터를 먹여도 id: 3의 인덱스는 2이다.
// 이걸 해결하려면 array_values 를 한번 더 사용한다.
$userIdxs = array_values($userIdxs);
// userIdxs [ 3, 4, 5 ]

array_values(array_filter(array_map())) 과 같이 호출할 수 있긴 하다.

너무 지저분했다.

TO-BE​

조금만 생각해도 FP 의 개념에 어긋남을 느낄 수 있다. 범위를 줄이고 나서 해당 값을 추출하는 게 맞다.

JS2​

const userIdxs = users.filter((user) => user.id >= 3).map((user) => user.id);

// userIdxs  [ 3, 4, 5 ]

php2​

array_values 를 쓰지 않고도 깔끔한 코딩이 가능하다.

$userIdxs = array_filter($users, function ($user) {
  return $user['id'] >= 3;
});

$userIdxs = array_map(function ($user) {
  return $user['id'];
}, $userIdxs);

// userIdxs [ 3, 4, 5 ]

lara​

물론 더 멋진 방법이 있다.

$userIdxs = collect($users)
  ->filter(function ($user) {
    return $user['id'] >= 3;
  })
  ->map(function ($user) {
    return $user['id'];
  })
  ->all();

// userIdxs [ 3, 4, 5 ]

여담​

php, js, java, python 을 넘나들다보니 사용하는 언어의 흐름에 대한 개념이 1/n 로 줄어드는 것 같다.

IaaS, PaaS, SaaS 란?

· 약 2분
Eunkwang Shin
Eunkwang Shin
Owner

IaaS, PaaS, Sass​

아이아스, 파스, 싸스 언제 들어도 헷갈리는 단어 3종 세트를 쉽게 파헤쳐보자.

다이어그램​

image from hexo 출처: 5 tips if you are considering cloud-based BI

이 그림이 모든 걸 나타내준다. 아이아스는 DevOps(또는 운영자), 파스는 개발자, 싸스는 엔드유저(또는 사용자) 용이다.

IaaS​

  • Infrastructure as a Service
  • 사용할 준비가 된 컴퓨터 및 네트워크 하드웨어
  • 클라우드에서 리눅스 서버를 받는 것

PaaS​

  • Platform as a Service
  • 제공된 프레임워크 또는 스택에서 실행되는 소프트웨어
  • 구글 앱엔진, 아마존 엘라스틱 빈스톡 등

SaaS​

  • Software as a Service
  • 웹사이트로 제공되는 응용프로그램
  • CMS 등
  • 나이스해 보이고 싶어서 끼워 맞춘 용어

Gitment 사용하기

· 약 2분
Eunkwang Shin
Eunkwang Shin
Owner

Gitment 사용하기​

블로그에 붙힐만한 댓글 라이브러리로는 Disqus, Commento, livere 등이 있지만 깃헙 페이지라 Gitment를 사용하고 싶었다.

사전 준비​

Github > Settings > Developer settings > OAuth Apps 메뉴로 들어가 새로운 OAuth App 을 만들어준다.

준비

Client ID 와 Client Secret 을 저장해 놓고 Authorization callback URL 은 Homepage URL 과 같은 주소를 입력한다.

## Application name
GracefulLight

## Homepage URL
https://gracefullight.github.io

## Application description
GracefulLights Blog

## Authorization callback URL
https://gracefullight.github.io

소스 추가​

원하는 페이지에 소스를 추가한다.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/browser/bluebird.core.min.js"></script>
<section class="comments" id="comments">
  <div id="gitment_thread"></div>
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/[email protected]/style/default.css"
  />
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gitment.browser.js"></script>
  <script>
    var gitment = new Gitment({
      id: "Gitment 를 구분할 아이디 (ex: 페이지 제목 또는 포스팅 일시)",
      owner: "github 아이디 (ex: gracefullight)",
      repo: "repository 명 (ex: gracefullight.github.io)",
      oauth: {
        client_id: "위에서 발급 받은 client_id",
        client_secret: "위에서 발급 받은 client_secret",
      },
    });
    gitment.render("gitment_thread");
  </script>
</section>

gitment.min.js 파일은 없으므로, 직접 minify 해서 사용하면 된다. bluebird (promise) core 를 추가한 이유는, IE 에서 gitment 를 지원해야하기 때문이다.

옵션 관리​

위 4개 옵션 외에 추가로 옵션을 더 줄 수 있다. desc 와 labels 정도가 추가되면 좋을 것 같다.

댓글 쓰기​

깃허브 아이디로 로그인한 뒤 Initialize Comments 를 누르고 댓글을 작성하면 된다.

Nuxt에 ThirdParty js (particles.js) 추가하기

· 약 3분
Eunkwang Shin
Eunkwang Shin
Owner

시작하기 앞서​

Nuxt Project 에 Particles.js 를 붙히고 싶었다. 어떻게하면 쉽게 붙힐 수 있을까 하다가 멀리 돌아오게 된 삽질기다.

시작​

vue-plugin 사용​

공식 문서 를 봤었고 Vue Plugin일 경우 너무나 쉽게 추가가 가능한 것처럼 보였다. 얼른 vue-particles 를 설치하고 플러그인을 만들어 등록했다.

만들고

vue-particles.js
import Vue from "vue";
import VueParticles from "vue-particles";

Vue.use(VueParticles);

등록했다.

nuxt.config.js
module.exports = {
  plugins: ["~/plugins/vue-particles"],
};

그런데 화면에 Particle이 보이지 않는다.

no-ssr​

구글링을 하니, 플러그인에 no-ssr 옵션을 주면 해결이 된다고 한다.

nuxt.config.js
module.exports = {
  plugins: [
    {
      src: "~/plugins/vue-particles",
      ssr: false,
    },
  ],
};
Particles.vue
<template>
  <no-ssr>
    <vue-particles />
  </no-ssr>
</template>

대충 이런식으로 코딩했더니 화면에서 볼 수 있게 되었다.

그런데... IE11에서는 스크립트 오류가 발생하기 시작했다.

IE 오류​

vue-particles 자체에 const 구문을 사용하고 있기 때문에, no-ssr 옵션을 준다면 번들링 시 로직을 건너 뛰기에, 크롬에서는 실행이 되지만 IE에서는 실행되지 않는 치명적인 오류가 발생했다.

그래서 다른 방법을 시도해봤다.

script 삽입하기​

nuxt.config.js 에서 head 태그를 이용하면 스크립트를 추가할 수 있고, window.particlesJS 처럼 전역 변수로 참조하면 될 줄 알았다.

하지만 번들링 시 window 객체가 없어 aframe 벤더가 필요하다고 오류가 발생했다. 쓸데 없는 리소스를 추가해야되니 여기서 멈추었다.

해결​

process.browser​

window-document-undefined 문서에 따르면 이런 참조 문제를 해결할 수 있다고 한다.

Particles.vue
<template>
  <vue-particles />
</template>
<script>
  if (process.browser) {
    require("vue-particles");
  }

  export default {
    mounted() {
      if (window.particlesJS) {
        window.particlesJS.load();
      }
    },
  };
</script>

위와 같이 로직을 변경해주니 IE11 에서도 정상 작동하였다.

여담​

vue-particles 의 문서엔 완벽한 nuxt 호환이라 되어있지만 예외적인 상황이 있는 듯 하다.