본문으로 건너뛰기

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

· 약 2분

얼터드 카본

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

리뷰

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

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

줄거리

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

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

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

· 약 4분

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분

클로버필드 패러독스

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

리뷰

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

줄거리

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

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

· 약 1분

익스팅션: 종의 구원자

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

되게 재밌어 보였다.

리뷰

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

줄거리

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

Array map, filter, values 분석

· 약 3분

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분

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분

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분

시작하기 앞서

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

thefuck 설치하기

· 약 2분

thefuck

이게 뭐죠

커맨드로 명령어를 실행하다보면 생각보다 오타를 많이 치게 된다 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'.

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

git merge 후 binary 파일 충돌시

· 약 1분

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

merge strategy

## 받아온 브랜치의 바이너리 파일을 사용
$ 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