md 파일에서 한글 파일명 인코딩

_posts/2015-10-14-amazon-web-services-capistrano-그리고-리멤버.md

@@ -22,7 +22,7 @@ tags:
 
 지금 우리가 배포하려는 서버는 다음과 같은 구조를 가지고 있다고 가정합니다.
 
-[![서버구조](/images/스크린샷-2015-09-25-14.42.22.png)](https://blog.dramancompany.com/wp-content/uploads/2015/09/스크린샷-2015-09-25-14.42.22.png)
+[![서버구조](/images/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7-2015-09-25-14.42.22.png)](https://blog.dramancompany.com/wp-content/uploads/2015/09/스크린샷-2015-09-25-14.42.22.png)
 
 이와같은 구조에서 배포를 할 경우 일단 ELB 구성이 되어 있으므로 다음과 같은 순서로 무중단 배포는 가능합니다.
 
@@ -37,7 +37,7 @@ tags:
 
 그래서 좀더 안정적이고 쉬운 배포를 위해 다음과 같이 구성을 해봅시다.
 
-[![](/images/스크린샷-2015-09-25-16.17.37.png)](https://blog.dramancompany.com/wp-content/uploads/2015/09/스크린샷-2015-09-25-16.17.37.png)
+[![](/images/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7-2015-09-25-16.17.37.png)](https://blog.dramancompany.com/wp-content/uploads/2015/09/스크린샷-2015-09-25-16.17.37.png)
 
 AWS에서는 훌륭한 Auto Scaling 서비스를 무료로 제공하고 있습니다. Auto Scaling은 쉽게말해 **Amazon Machine Image(이하 AMI)**를 설정한 조건에 따라 인스턴스를 늘리거나 줄이는 일을 합니다. 여기서 제가 주목하는 점은 'AMI'입니다. AMI는 말 그대로 머신 이미지를 말하는데 이를 이용하면 AMI를 생성하기 위한 서버 1대만 있으면 이를 이용해 이미지를 생성한 후 똑같은 서버를 원하는 만큼 생성할 수 있습니다.
 
@@ -55,7 +55,7 @@ AWS에서는 훌륭한 Auto Scaling 서비스를 무료로 제공하고 있습
 
 아래는 현재 리멤버 서버 배포시 구성을 간략히 그려보았습니다.
 
-[![](/images/스크린샷-2015-09-30-12.14.13.png)](https://blog.dramancompany.com/wp-content/uploads/2015/09/스크린샷-2015-09-30-12.14.13.png)
+[![](/images/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7-2015-09-30-12.14.13.png)](https://blog.dramancompany.com/wp-content/uploads/2015/09/스크린샷-2015-09-30-12.14.13.png)
 
 AMI 생성용 서버에 Capistrano를 이용해 배포 후 AWS web console에서 설정만 해주면 쉽게 모든 서버 업데이트를 마칠 수 있도록 되어 있습니다. 그럼 Capistrano를 어떻게 설치하고 설정 하는지 알아보도록 하겠습니다.
 

_posts/2015-12-04-electron으로-웹-앱-만들듯-데스크톱-앱-만들기.md

@@ -13,7 +13,7 @@ categories:
 
 # **Electron**
 
-# [![Electron](/images/스크린샷-2015-11-16-오후-4.42.42-1024x382.png)](https://blog.dramancompany.com/wp-content/uploads/2015/11/스크린샷-2015-11-16-오후-4.42.42.png)
+# [![Electron](/images/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7-2015-11-16-%EC%98%A4%ED%9B%84-4.42.42-1024x382.png)](https://blog.dramancompany.com/wp-content/uploads/2015/11/스크린샷-2015-11-16-오후-4.42.42.png)
 
 [Electron](http://electron.atom.io/)은 [Chromium](https://www.chromium.org/)과 [Node.js](https://nodejs.org)를 이용하여 데스크톱 앱을 HTML, CSS, JavaScript로 쉽게 만들 수 있게 해주는 프레임워크입니다. GitHub에서 Atom editor를 만들기 위해서 시작된 프로젝트로 원래 이름은 Atom Shell이었다가 Electon으로 이름이 바뀌었습니다. 앞서 말씀드린 것과 같이 Electon을 이용하면 쉽게 cross-platform 앱을 개발할 수 있습니다.  또한 웹 개발자분들도 익숙한 언어와 코드를 재사용하여 쉽게 데스크톱 앱을 개발할 수 있습니다.
 
@@ -27,7 +27,7 @@ categories:
 
 #### Electron으로 만들어진 앱들
 
-[![스크린샷 2015-11-16 오후 4.48.30](/images/스크린샷-2015-11-16-오후-4.48.30-300x96.png)](https://blog.dramancompany.com/wp-content/uploads/2015/11/스크린샷-2015-11-16-오후-4.48.30.png)
+[![스크린샷 2015-11-16 오후 4.48.30](/images/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7-2015-11-16-%EC%98%A4%ED%9B%84-4.48.30-300x96.png)](https://blog.dramancompany.com/wp-content/uploads/2015/11/스크린샷-2015-11-16-오후-4.48.30.png)
 
 [여기](http://electron.atom.io/#built-on-electron)를 확인해보시면 Electron을 이용하여 만들어진 앱들이 나와 있습니다. 아마 제일 앞의 세 개가 낯익으실 텐데, GitHub의 text editor인 Atom, Slack Technologies의 협업 메신저인 Slack, MS의 Visual Studio Code가 있습니다. 세 가지 앱 모두 제가 사용을 하는 앱이고(Atom과 Slack은 컴퓨터가 켜져 있는 시간의 99%) Mac과 Windows 모두 그 퀄리티에 만족을 하면서 사용하고 있었기 때문에 Electon으로도 충분히 좋은 앱을 만들 수 있다고 판단했습니다.
 
@@ -49,7 +49,7 @@ Slack이나 Atom을 Windows 환경에서 인스톨러를 실행할 경우 기존
 
 공식 홈페이지에 나와 있는 [튜토리얼](https://github.com/atom/electron/tree/master/docs-translations/ko-KR)이 잘 되어있다고 생각하기 때문에 이 글에서는 개발 방법에 대한 얘기는 별도로 다루지 않도록 하겠습니다. 그보다 큰 그림을 이해하기 위한 구조를 소개해드리겠습니다.
 
-[![스크린샷 2015-11-16 오후 4.17.55](/images/스크린샷-2015-11-16-오후-4.17.55-1024x777.png)](https://blog.dramancompany.com/wp-content/uploads/2015/11/스크린샷-2015-11-16-오후-4.17.55.png) 크게 두 가지 프로세스가 존재합니다. Renderer 프로세스는 Chromium 기반으로 HTML, CSS, JavaScript를 이용하여 웹 페이지를 만들듯 view를 구성합니다. Main 프로세스는 Node.js 기반으로 일반적인 Node application이라고 생각하시면 되겠습니다. 모든 node 모듈들을 가져다 쓸 수 있습니다. 그리고 각 프로세스마다 electron 앱에 접근해서 사용할 수 있게 만든 electon에서 제공되는 API들이 담긴 모듈들이 있습니다. 그리고 두 process 사이를 통신할 수 있게 해주는 ipc와 remote module이 존재합니다. 웹 개발자는 원래 front-end를 개발하던 것과 같이 Renderer 프로세스 쪽을 개발하고 back-end를 Node.js로 개발하듯 Main 프로세스 쪽을 개발하면 됩니다. 그때그때 필요한 Electron의 API만 찾아 쓰면 기존의 웹 개발하던 것과 차이가 거의 없습니다.
+[![스크린샷 2015-11-16 오후 4.17.55](/images/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7-2015-11-16-%EC%98%A4%ED%9B%84-4.17.55-1024x777.png)](https://blog.dramancompany.com/wp-content/uploads/2015/11/스크린샷-2015-11-16-오후-4.17.55.png) 크게 두 가지 프로세스가 존재합니다. Renderer 프로세스는 Chromium 기반으로 HTML, CSS, JavaScript를 이용하여 웹 페이지를 만들듯 view를 구성합니다. Main 프로세스는 Node.js 기반으로 일반적인 Node application이라고 생각하시면 되겠습니다. 모든 node 모듈들을 가져다 쓸 수 있습니다. 그리고 각 프로세스마다 electron 앱에 접근해서 사용할 수 있게 만든 electon에서 제공되는 API들이 담긴 모듈들이 있습니다. 그리고 두 process 사이를 통신할 수 있게 해주는 ipc와 remote module이 존재합니다. 웹 개발자는 원래 front-end를 개발하던 것과 같이 Renderer 프로세스 쪽을 개발하고 back-end를 Node.js로 개발하듯 Main 프로세스 쪽을 개발하면 됩니다. 그때그때 필요한 Electron의 API만 찾아 쓰면 기존의 웹 개발하던 것과 차이가 거의 없습니다.
 
 
 

_posts/2015-12-17-처음-windows-설치-파일을-배포하는-개발자들을-위하여.md

@@ -11,11 +11,11 @@ categories:
 
 앱 개발을 완성하고 설치 파일까지 만들었다고 모든 것이 끝났다고 생각하시면 안됩니다. 별 생각 없이 설치 파일을 웹에 게시하고 웹페이지에서 다운을 받으면 다음과 같은 화면들을 만나게 됩니다.
 
-[![스크린샷 2015-11-10 오후 6.35.09](/images/스크린샷-2015-11-10-오후-6.35.09-1024x264.png)](https://blog.dramancompany.com/wp-content/uploads/2015/11/스크린샷-2015-11-10-오후-6.35.09.png)_<이 파일은 위험해!>_
+[![스크린샷 2015-11-10 오후 6.35.09](/images/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7-2015-11-10-%EC%98%A4%ED%9B%84-6.35.09-1024x264.png)](https://blog.dramancompany.com/wp-content/uploads/2015/11/스크린샷-2015-11-10-오후-6.35.09.png)_<이 파일은 위험해!>_
 
 [![alert](/images/alert.png)](https://blog.dramancompany.com/wp-content/uploads/2015/11/alert.png)_<Windows 설치 때 한 번 더 뜨는 경고..>_
 
-[![스크린샷 2015-11-17 오후 3.16.01](/images/스크린샷-2015-11-17-오후-3.16.01.png)](https://blog.dramancompany.com/wp-content/uploads/2015/11/스크린샷-2015-11-17-오후-3.16.01.png)_<Chrome도 예외는 아닙니다>_
+[![스크린샷 2015-11-17 오후 3.16.01](/images/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7-2015-11-17-%EC%98%A4%ED%9B%84-3.16.01.png)](https://blog.dramancompany.com/wp-content/uploads/2015/11/스크린샷-2015-11-17-오후-3.16.01.png)_<Chrome도 예외는 아닙니다>_
 
 만약 사용자들이 이런 메시지를 본다면 기껏 열심히 만들어 놓은 앱이 악성 프로그램 취급받게 될 것입니다. 자, 앱 개발은 끝났을 지라도 앱 배포는 이제부터 시작입니다. 이 배포에 걸리는 시간은 생각하는 것보다 _오래_ 걸립니다.
 
@@ -41,13 +41,13 @@ categories:
 
 이렇게 서명을 완료하면 다음과 같이 뭔가 부족해 보이던 설치파일이
 
-[![unsigned_installer](/images/스크린샷-2015-11-17-오후-3.56.59.png)](https://blog.dramancompany.com/wp-content/uploads/2015/11/스크린샷-2015-11-17-오후-3.56.59.png)
+[![unsigned_installer](/images/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7-2015-11-17-%EC%98%A4%ED%9B%84-3.56.59.png)](https://blog.dramancompany.com/wp-content/uploads/2015/11/스크린샷-2015-11-17-오후-3.56.59.png)
 
 다음과 같이 든든하게 변합니다.
 
-[![signed_installer](/images/스크린샷-2015-11-17-오후-3.58.52.png)](https://blog.dramancompany.com/wp-content/uploads/2015/11/스크린샷-2015-11-17-오후-3.58.52.png)
+[![signed_installer](/images/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7-2015-11-17-%EC%98%A4%ED%9B%84-3.58.52.png)](https://blog.dramancompany.com/wp-content/uploads/2015/11/스크린샷-2015-11-17-오후-3.58.52.png)
 
-[![스크린샷 2015-11-17 오후 4.12.27](/images/스크린샷-2015-11-17-오후-4.12.27-822x1024.png)](https://blog.dramancompany.com/wp-content/uploads/2015/11/스크린샷-2015-11-17-오후-4.12.27.png)
+[![스크린샷 2015-11-17 오후 4.12.27](/images/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7-2015-11-17-%EC%98%A4%ED%9B%84-4.12.27-822x1024.png)](https://blog.dramancompany.com/wp-content/uploads/2015/11/스크린샷-2015-11-17-오후-4.12.27.png)
 
 _<올.바.른. 인증서입니다.>_
 

_posts/2016-01-01-rds-mysql에서-rds-aurora로-db이전-다운타임을-최소화-하기.md

@@ -31,23 +31,23 @@ DB이전을 할 때 다운타임을 최소화 하기 위한 방법은 놀라울
 
 우선 AuroraDB의 인스턴스를 생성해 보겠습니다. 생성 시 기존에 사용하던 MySQL Master DB의 최신 Snapshot을 이용해 AuroraDB로 Migrate합니다. MySQL MasterDB를 선택하고, 상단의 Instance Actions탭에서 "Take Snapshot"을 눌러 현재 시점의 스냅샷을 준비해주세요.
 
-[![Migrate Lastest Snapshot](/images/스크린샷-2015-12-09-오후-12.45.08.png)](https://blog.dramancompany.com/wp-content/uploads/2015/12/스크린샷-2015-12-09-오후-12.45.08.png)
+[![Migrate Lastest Snapshot](/images/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA-2015-12-09-%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE-12.45.08.png)](https://blog.dramancompany.com/wp-content/uploads/2015/12/스크린샷-2015-12-09-오후-12.45.08.png)
 
 스냅샷이 준비되었다면, "Migrate Latest Snapshot"를 눌러줍니다.
 
-[![스크린샷 2015-12-09 오후 12.48.50](/images/스크린샷-2015-12-09-오후-12.48.50.png)](https://blog.dramancompany.com/wp-content/uploads/2015/12/스크린샷-2015-12-09-오후-12.48.50.png)
+[![스크린샷 2015-12-09 오후 12.48.50](/images/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA-2015-12-09-%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE-12.48.50.png)](https://blog.dramancompany.com/wp-content/uploads/2015/12/스크린샷-2015-12-09-오후-12.48.50.png)
 
 다음과 같은 화면이 나오면 기본적인 설정을 해 줍니다. 기존 MySQL Master DB의 설정을 따라가기 때문에 DB Instance Identifier와 Availability Zone지정 외에 별다른 작업이 필요 없을 것 같습니다.
 
 _**자, Migrate버튼을 누르기 전에 이쯤에서 정말 중요한 메모를 하나 할 것입니다.**_ 이 메모를 한 후 재빠르게 Migrate버튼을 눌러 AuroraDB인스턴스를 생성 할 겁니다. MySQL에 접속한 후 다음과 같은 명령어를 통해 binary log 정보를 확인합니다.  _**File과 Position을 잘 메모해 둡니다.**_
 
 > SHOW MASTER STATUS;
 
-[![스크린샷 2015-12-09 오후 6.11.10](/images/스크린샷-2015-12-09-오후-6.11.10.png)](https://blog.dramancompany.com/wp-content/uploads/2015/12/스크린샷-2015-12-09-오후-6.11.10.png)
+[![스크린샷 2015-12-09 오후 6.11.10](/images/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA-2015-12-09-%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE-6.11.10.png)](https://blog.dramancompany.com/wp-content/uploads/2015/12/스크린샷-2015-12-09-오후-6.11.10.png)
 
 확인 하셨나요? 그러면 재빨리 Migrate버튼을 눌러 인스턴스를 생성합니다.
 
-[![스크린샷 2015-12-09 오후 12.58.16](/images/스크린샷-2015-12-09-오후-12.58.16.png)](https://blog.dramancompany.com/wp-content/uploads/2015/12/스크린샷-2015-12-09-오후-12.58.16.png)
+[![스크린샷 2015-12-09 오후 12.58.16](/images/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA-2015-12-09-%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE-12.58.16.png)](https://blog.dramancompany.com/wp-content/uploads/2015/12/스크린샷-2015-12-09-오후-12.58.16.png)
 
 마이그레이션이 완료 되고 인스턴스가 생성될 때 까지 잠시(?) 기다려 줍니다. [아마존 블로그](https://aws.amazon.com/ko/blogs/aws/now-available-amazon-aurora/)의 문구를 인용해보자면, 소요되는 시간은 대략 다음과 같습니다.
 
@@ -65,7 +65,7 @@ _**자, Migrate버튼을 누르기 전에 이쯤에서 정말 중요한 메모
 
 드디어 되었군요. 4시간 반의 티 타임 끝에 AuroraDB 인스턴스가 준비되었습니다. 이 글을 읽으시는 분 들은 마이그레이션이 언제 완료되나 무작정 기다리지 마시고, "DB Cluster Details"탭의 "Migration Progress"를 참고하시면 현재 진행 상황을 자세하게 알려주니, 저처럼 무작정 기다리지 않으셔도 될 것 같습니다.(있는 줄 몰랐습니다..)
 
-[![스크린샷 2015-12-09 오후 4.19.13](/images/스크린샷-2015-12-09-오후-4.19.13.png)](https://blog.dramancompany.com/wp-content/uploads/2015/12/스크린샷-2015-12-09-오후-4.19.13.png)
+[![스크린샷 2015-12-09 오후 4.19.13](/images/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA-2015-12-09-%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE-4.19.13.png)](https://blog.dramancompany.com/wp-content/uploads/2015/12/스크린샷-2015-12-09-오후-4.19.13.png)
 
 AuroraDB 인스턴스가 준비되었다면, 다음 단계로 넘어가도록 하겠습니다.
 
@@ -79,11 +79,11 @@ AuroraDB 인스턴스가 준비되었다면, 다음 단계로 넘어가도록 
 
 IP를 잘 적어둔 후, RDS Instances 콘솔에 접속한 후 MySQL의 Security Groups에서 사용하고 있는 해당 그룹 링크를 클릭합니다.  이동 한 Security Groups에서 해당 그룹을 선택한 후 상단 Actions탭의 "Edit inbound rules"를 클릭합니다.
 
-[![스크린샷 2015-12-09 오후 5.29.29](/images/스크린샷-2015-12-09-오후-5.29.29.png)](https://blog.dramancompany.com/wp-content/uploads/2015/12/스크린샷-2015-12-09-오후-5.29.29.png)
+[![스크린샷 2015-12-09 오후 5.29.29](/images/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA-2015-12-09-%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE-5.29.29.png)](https://blog.dramancompany.com/wp-content/uploads/2015/12/스크린샷-2015-12-09-오후-5.29.29.png)
 
 창이 열리면, "Add Rule"를 해 Row하나를 추가 한 후 Type은 "_**All traffic**_"으로 지정하고, 아까 적어 둔 AuroraDB의 아이피를 다음과 같이 적어줍니다. "1.1.1.1/32" (DB 이전을 완료 한 후에는 방금 추가한 Rule을 삭제해 주세요.)
 
-[![스크린샷 2015-12-09 오후 6.06.52](/images/스크린샷-2015-12-09-오후-6.06.52.png)](https://blog.dramancompany.com/wp-content/uploads/2015/12/스크린샷-2015-12-09-오후-6.06.52.png)
+[![스크린샷 2015-12-09 오후 6.06.52](/images/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA-2015-12-09-%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE-6.06.52.png)](https://blog.dramancompany.com/wp-content/uploads/2015/12/스크린샷-2015-12-09-오후-6.06.52.png)
 
 이제 VPC 설정은 다 되었습니다.
 

_posts/2016-03-11-안드로이드에-flux-적용하기.md

@@ -37,7 +37,7 @@ Action은 어느 뷰에서나 생성될 수 있습니다. Dispatcher는 생성
 
 리멤버에서는 명함 교환방 기능에서 Flux를 사용하였습니다. 명함 교환방은 오프라인 행사에서 여러명이 명함을 쉽게 온라인으로 교환할 수 있도록 돕는 기능입니다. 이 때 중요한 것은 ‘교환방’ 데이터 입니다. 명함 교환방은 교환방에 들어온 후에 시작되는 기능이기 때문에, 교환방에서 일어나는 대부분의 이밴트는 교환방 데이터에 의존합니다. 그리고 교환방의 데이터를 변화시킵니다. 다양한 뷰와 모델에서 하나의 데이터에 접근하고, 건드리는 것입니다.
 
-\[caption id="attachment\_466" align="aligncenter" width="1080"\][![명함 교환](/images/리멤버-명함교환방-이미지.png)](https://blog.dramancompany.com/wp-content/uploads/2016/03/리멤버-명함교환방-이미지.png) 교환방에 입장 후 교환방 데이터를 기반으로 초대, 명함교환 등의 작업이 일어납니다.\[/caption\]
+\[caption id="attachment\_466" align="aligncenter" width="1080"\][![명함 교환](/images/%E1%84%85%E1%85%B5%E1%84%86%E1%85%A6%E1%86%B7%E1%84%87%E1%85%A5-%E1%84%86%E1%85%A7%E1%86%BC%E1%84%92%E1%85%A1%E1%86%B7%E1%84%80%E1%85%AD%E1%84%92%E1%85%AA%E1%86%AB%E1%84%87%E1%85%A1%E1%86%BC-%E1%84%8B%E1%85%B5%E1%84%86%E1%85%B5%E1%84%8C%E1%85%B5.png)](https://blog.dramancompany.com/wp-content/uploads/2016/03/리멤버-명함교환방-이미지.png) 교환방에 입장 후 교환방 데이터를 기반으로 초대, 명함교환 등의 작업이 일어납니다.\[/caption\]
 
 처음에는 평소와 같이 이밴트에 집중하여 교환방 데이터를 갱신하였습니다. 하지만 교환방 안에서 이루어지는 기능들이 많아지면서 데이터가 흐르는 방향이 급격히 늘어났습니다. 그리고 내가 지금 있는 화면에서 ‘교환방’ 데이터가 어떤 경우로 변화되는지, 예상하기 힘든 핑퐁이 이루어지게 되었습니다. 대략 아래의 코드와 같습니다.