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

리뷰​

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

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

줄거리​

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

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

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

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

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

편집

빈줄 추가​

삭제 및 자르기​

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

복사​

붙혀넣기​

p

치환

:%s/Search/Replace/gc

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

치환 확인 명령​

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

리뷰​

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

줄거리​

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

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

되게 재밌어 보였다.

리뷰​

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

줄거리​

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

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

[
  {
    "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 로 줄어드는 것 같다.

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

다이어그램​

출처: 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 등
• 나이스해 보이고 싶어서 끼워 맞춘 용어

여담​

블로그에 붙힐만한 댓글 라이브러리로는 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 Project 에 Particles.js 를 붙히고 싶었다. 어떻게하면 쉽게 붙힐 수 있을까 하다가 멀리 돌아오게 된 삽질기다.

시작

vue-plugin 사용​

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

만들고

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

Vue.use(VueParticles);

등록했다.

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

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

no-ssr​

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

module.exports = {
  plugins: [
    {
      src: "~/plugins/vue-particles",
      ssr: false,
    },
  ],
};

<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 문서에 따르면 이런 참조 문제를 해결할 수 있다고 한다.

<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 호환이라 되어있지만 예외적인 상황이 있는 듯 하다.

이게 뭐죠​

커맨드로 명령어를 실행하다보면 생각보다 오타를 많이 치게 된다 tab tab 자동완성 기능과 Oh-My-Zsh 의 syntax highlighting 기능을 사용한다면 충분히 커버가 가능할 것 같지만 현실은 그렇지 않다.

# git checkout master를 치고 싶었으나..
$ git checktou master
git: 'checktou' is not a git command. See 'git --help'.

The most similar command is
        checkout

thefuck 을 활용하면 오타가 나 분노한 나의 마음을 표출할 수 있다.

설치​

다들 python 3.6 버전 정도는 갖고 있다고 가정한다.

$ pip install thefuck

alias 설정​

fuck 만 쳐도 thefuck 의 기능을 사용하기 위해 alias 설정을 해주자.

git bash​

bash_profile 에 아래처럼 추가해준다.

vi ~/.bash_profile

eval "$(thefuck --alias)"

환경 변수 설정​

1. Win+R > sysdm.cpl
2. 고급 > 환경 변수 > 시스템 변수 > 새로만들기 에서 PYTHONIOENCODING 값을 utf-8로 준다.
3. 확인 ✔️ X 3

powershell​

ps 를 주로 사용한다면 설치 후 $PROFILE 파일에 값을 넣어주면 된다.

PS > Notepad $PROFILE

$env:PYTHONIOENCODING="utf-8"
iex "$(thefuck --alias)"

profile 파일이 없다고 오류가 발생하면, 아래 명령어로 profile 파일을 만들어주자.

PS > New-item -type file -force $PROFILE

활용하기​

$ git checkuot master
git: 'checkuot' is not a git command. See 'git --help'.

The most similar command is
        checkout

$ fuck
git checkout master [enter/↑/↓/ctrl+c]
Already on 'master'
Your branch is up to date with 'origin/master'.

오타 걱정 없이 쉘 커맨드를 실행할 수 있게 되었다.

바이너리 파일은 diff 가 안 되서 확인을 할 수가 없는데, merge 시에 내 바이너리를 쓸 지 받은 것의 바이너리를 쓸 지 여부를 지정해주면 된다.

# 받아온 브랜치의 바이너리 파일을 사용
$ git merge -X theirs origin/브랜치

# 내 로컬 바이너리 파일을 사용
$ git merge -X ours origin/브랜치

gc 해제

이렇게 받다보면 unlink of file failed 란 오류가 발생할 수가 있는데, git 가비지 컬렉터 옵션을 해당 프로젝트에서만 꺼주면 된다. 기능에는 아무 문제 없다. 궁금하면 git help gc를 해보시길..

# gc 기능 끄기
$ git config --local gc.auto 0