17.09.15 - 토르3 - 라그나로크 팬질 홈 작업 중, 브라우저 blob캐시, 위지윅 tinyMCE, 정규식, CDN 서버

1. 마블의 토르3 - 라그나로크의 팬질 미니홈을 작업중이다. HTML 편집기능이 있는 일반 게시판 기능을 추가해달라고 해서, 위지윅을 포함하는 게시판 기능을 개발하고 있다.

2. 위지윅 에디터 - CKEditor vs tinyMCE

- 위지윅을 선택해야 했는데, CKEditor 와 tinyMCE 두개 중에 많은 고민을 했다. 두개다 강력해 보였다.

- Angular4 에 compatible 한가 찾아봤는데, 둘다 공식적인 지원은 없고, 그냥 누가 만들었는지 모르지만 wrapper 가 npm 에 올라가 있다. official 래퍼가 아니면, 일단 고민을 더 하게 된다. 언제 지원이 끊길지 모르기 때문에. 그래서 그냥 Javascript 라이브러리 그대로 가져다 쓰기로 결정했다.

- TypeScript 에서 javascript 라이브러리를 그냥 쓸려고 하면 에러가 난다. 아래와 같이 declare 를 하면, 사용할 수 있다.

declare var tinymce: any;

- TypeScript 래퍼를 이용하면 code assist 가 지원되는 편리함이 있는 반면, 그냥 any 타입으로 하기 때문에, code assist 기능은 전혀 사용할 수 없다. 그래도 공식 문서들은 모조리 javascript 기준으로 되어있기 때문에 괜찮다.

3.

- 드디어 우리 사이트에도 사진 첨부 기능을 넣기 시작했다. 이때까지 우리가 운영하는 모든 서비스에는 사진첨부 기능이 없었다. 이때까지 우리회사에서 만든 모든 서비스는 회사가 제작한 콘텐츠를 일방적으로 발행하는 방식이였기 때문에, 딱히 필요가 없어서, 서버 트래픽비용도 아낄 겸, 이미지를 어딘가(?)에 올려놓고, 링크주소만 따다가 사용했기 때문이다. 그런데 이제 사용자가 이미지 첨부를 할 수 있게 해달라고 해서, 이미지 CDN 서버를 운영하게 되었다.

- S3 에 버킷을 만들고, cdn.fanzeel.com 을 연결하고, CloudFront 를 통해 배포하게 만들었다.

4.

- 첨부한 이미지를 리사이즈 하는데는 'ng2-img-tools' 이라는 라이브러리를 사용했다.

- 여기부터 엄청난 삽질을 경험하게 되는데... '사용자의 이미지 업로드를 어떤 시점에 할 것인가' 이게 고민이였다. 아래와 같은 두가지 방법을 일단 생각해 봤다.

(1) - 이미지를 첨부할 때마다 서버에 업로드 하고, 사진 URL을 응답해주는 방법 - 일반적인 방법 인것 같다. 그런데, 사용자가 이미지 첨부를 해서 서버에 다 올려놨는데, 사용자가 편집을 하면서, 사진을 그냥 지워버리면, 쓸데없는 사진이 우리 서버에 남겨져있게 될것같다. 난 그런 쓰레기가 하나라도 남아있는게 매우 싫다.

(2) - 이미지 첨부를 하면, 그냥 브라우저 캐시에 보여줬다가 사용자가 '저장하기' 버튼을 누르는 순간, 사진들을 일괄적으로 업로드하는 방법.

- 일단 두번째 방법으로 하기로 결정하고, 작업에 착수했는데... 생각지 못한 스트레스가 너무 많았다;;;;;;

첫번째 스트레스 - 바로바로.... 정규식 만들기;;;;;; 참... 정규식은 정이 안간다ㅋ 해놓고 나면 별거 없는데 정규식 만들기 짜증남...

브라우저 캐시에 blob 로 들어가면, 로컬 URI 가 <img src="blob:http://localhost/xxx-xxx-xxx-xxx" alt="" width=""....... > 이런식으로 들어간다. 그래서 문서 내에서 "blob:http 요 문자로 시작해서, 첫번째 쌍따옴표(") 까지를 찾아내야 하는 정규식 문제였다. HTML 문서에는 쌍따옴표가 많이 있기 때문에, 삽질을 좀 했다.

여튼 결국 만든 정규식은 =   /blob:http[^\"]*/g 

정규식을 만들때는 삽질 하지 말고 https://regexr.com/ 를 방문하자.

두번째 스트레스 - 저 정규식으로 자바스크립트의 String.match() 메소드로, 업로드해야할 blob의 URI들을 다 받아왔다. 실제 파일을 첨부하려면 저 URI의 배열을 iterate 하면서 , 실제 BLOB 객체를 만들어야 했는데, promise 패턴의 fetch를 사용했는데 이게 promise 패턴의 비동기식이라서, 서버에 올리기 직전까지 모든 blob객체가 이상없이 다 만들어졌는지 타이밍 잡기가 생각보다 까다로왔다. 그리고 막상 이렇게 해서 서버에 올리면.... 첨부된 모든 이미지를 서버에서 다 s3 올리고, 생긴 이미지의 URL 을, HTML 문서에서 다시 replace 를 해야 했다.

여기까지 오고나니... 뭐, 이렇게까지 복잡하게 할까... 다 부질없다... 난 왜이렇게 복잡하고 어려운 방법을 선택했을까 자괴감들고 힘들어서....

다 날려버리고 첫번째 방법으로 돌아갔다. 아... 깔끔해... ㅡ,.ㅡ;;;

결론. 그냥 일반적인 방법쓰자.