디스인챈트​

심슨 느낌이 물씬나는 그림체다. 실제로도 심슨 제작자가 만든 애니메이션이라고 한다.

리뷰​

• 호머의 몸집에 모의 성격을 가진 왕
• 바트의 성격을 가진 빈 공주
• 밀하우스 같은 엘포
• 정체를 알 수 없는 악마
• 그리고 왕비들

이 조합이 신선했지만 심슨이 더 재밌긴 하다. 이쯤에선 재밌게 행동해도 될 것 같은데, 결국 아동용 애니메이션처럼 착하게(?) 끝난다.

20부작으로 제작되었는데, 시즌1 마지막화인 10화에서 너무 큰 떡밥을 풀어서 기다리기 힘들다.

줄거리​

중세시대를 풍자한 그런 느낌이다.

카카오 계정의 메일 주소를 바꾸는 방법을 알아보자.

해결방법​

먼저 카카오 측에서 회신이 온 메일 내용을 보자.

계정 보안 강화를 위해 카카오계정 이메일 주소를 인증한 사용자의 경우
이메일 주소를 직접 변경하실 수 없습니다.

다만, 메일 서비스 탈퇴 및 종료 등으로 인해 이메일을 정상적으로 수신할 수 없는 경우에 한하여
해당 카카오계정에 연결되었던 휴대폰 번호의 이용계약증명서 및
메일 사용현황에 대한 확인 과정 진행 후 이메일 주소 변경을 지원해 드릴 수 있습니다.

이메일을 정상적으로 수신할 수 없는 경우에 한해 휴대폰 이용계약증명서를 가지고 오면 확인 후 변경이 가능하단다. 조건을 만들어보자.

기존 아이디 탈퇴​

예를 들어 [email protected] 의 이메일을 카카오 계정으로 사용하고 있다면 먼저 이메일 계정의 사이트에 들어가 탈퇴를 진행해야한다. (카카오 계정 탈퇴가 아니다!)

비밀번호 찾기​

메일 탈퇴 후 카카오 홈페이지 우측 로그인화면 하단의 비밀번호 찾기 를 해 탈퇴된 메일로 비밀번호 찾기 메일이 보내지게 만든다.

내부적으로 없는 메일주소로 메일을 보내는 오류 확인이 필요한 것 같다.

문의​

카카오 문의하기 에서 일반문의 > 기타문의 를 선택하고 정보들을 입력한다.

문의내용엔 다음과 비슷한 내용으로 적는다.

기존 메일 서비스 이용 불가로 카카오 계정을 변경하고 싶습니다.

기존: [email protected]
변경: [email protected]

첨부파일엔 통신사 사이트에 로그인해 가입증명원 을 첨부해야한다. KT의 경우 마이페이지 > 조회/변경 > 가입정보 중앙에 가입증명원 인쇄 메뉴로 접근 후 PDF 저장을 활용하자.

메일 인증번호 확인​

문의등록 후 1~2영업일 후에 메일 인증번호를 입력해 재문의하라는 회신이 온다.

고객님께서 변경 요청하신 [ [email protected] ] 이메일 주소로 인증번호를 보내드렸습니다.

번거로우시겠지만, '이메일 재설정 인증 코드' 8자리를
문의 내용에 기재하시어 재문의 주시면 확인 후 이메일 주소 변경을 도와드리겠습니다.

다만, 인증코드를 다르게 기재하여 보내주실 경우 처리가 어려우므로
정확하게 기재하여 재문의 부탁드립니다.

별도로 전송된 인증번호로 일반문의를 이용해 재문의하고 조금 더 기다린다.

비밀번호 변경​

최종으로 변경되었다는 회신이 온 뒤 비밀번호를 변경해주자.

고객님의 [ [email protected] ] 계정 이메일 주소가 [ [email protected] ]으로 변경 되었습니다.

로그인 버튼 하단의 '이메일 주소 또는 비밀번호를 잊으셨나요?' 링크를 누르신 뒤
[ [email protected] ] 계정의 비밀번호를 찾아 로그인 부탁드립니다.

비밀번호 변경 후엔 예전 쓰던 데이터 그대로 새로운 메일 계정으로 이용이 가능하다.

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 디렉토리를 읽어오는 것 같다.

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

• HEAD 메소드
• CURL

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

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

삽질​

ajax​

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

script​

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

image​

• 이미지 태그에 한해서 onLoad 와 onError 로 체크가 가능하다.

link​

• 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 하면 된다.

얼터드 카본​

회당 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%가 이 장면이다.)
• 와이프도 보스도 정신 착란과 불면증으로 의심해 안 믿어준다.
• 결국 실제로 일어났다.
• 열린 결말

Array map, filter, values 분석​

아래 데이터로 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 로 줄어드는 것 같다.

IaaS, PaaS, Sass​

아이아스, 파스, 싸스 언제 들어도 헷갈리는 단어 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 등
• 나이스해 보이고 싶어서 끼워 맞춘 용어