widget 만들기

이미지 로딩을 위한 저장소에 대한 고민

첫 번째 : 단순 markdown + git

나는 haroopad를 통해 markdown 문서를 작성한다. 그래서, 첫 번째로 생각한 것이 일반 markdown 문서에 local img url 을 적어놓고 generate, deploy를 하면 어떻게 될까였다.
결과는 생각보다 참담했다.
hexo new [layout|type] ‘post name’ 명령을 통해 문서를 작성하면 다음과 같은 경로에 파일이 생성되게 된다.

그래서 생각했던 것이 source 폴더내에 imgs 폴더를 생성한 후에 이미지 경로를 ../imgs/이미지명 과 같이 문서를 작성하면 되지 않을까였는데 너무 단순하게 생각하였다.
hexo는 generate 명령어를 이용하여 ejs를 통해 rendering된 html 파일을 github에 deploy함으로써 동작한다. 이미 첫 포스트에 적어놓았지만 말이다.

두 번째 : github에 이미지를 올려놓고 사용하자

위의 시행착오를 바탕으로 이미지를 github에 올려두고 ‘username.github.io/imgs/image.png’ 와 같은 형식으로 불러오면 어떨까 생각해보았다.
이런 생각을 하게 된 계기는 script 파일이나 stylesheet의 경로가 위와 같았기 때문인데, 결과는 마찬가지로 404였다.

세 번째 : google drive를 이용해 보자

구글 드라이브에 굉장히 친숙했던 터라, 이미지를 업로드해두고 불러올 생각까지 하게 되었다.
이런 식으로 말이다.

물론, google에서 제공하는 api를 사용하는 웹서버에 경우에는 원하던 그림을 그릴 수 있을 것이라 생각한다. 하지만 결과는 마찬가지였다.
구글 드라이브에서 이미지를 업로드한 후 공유가능한 링크를 복사하면 다음과 같은 uri가 보여진다.
“drive.google.com/open?id=********fq8c4cQmkskq12xLbZA-MOOL”

링크만 봐도 <img src.. 같은 태그로는 어림도 없을 것 같은 느낌이다.

네 번째 : 클라우드 서비스 이용(feat.NHN)

어떻게 이런 생각을 하게 되었냐면, 물론 많은 사람들이 생각하겠지만 KAKAO 기술 블로그를 뒤적거리다가 하게 되었다.
좀 더 정확하게 말하자면 결정을 내리게 된 이유이다. 최근 KAKAO 기술 블로그는 Jekyll을 사용하는 형태로 github.io로 이주하였는데, 기술 블로그에 삽입되는 이미지의 host url을 자세히 보면 블로그의 host url과는 완전히 다른 cdn을 사용한다는 것을 알 수 있다.
그래서, 클라우드 서비스를 제공하는 기업 대표적으로 4곳을 찾아보았다. 구글, AWS, 네이버, NHN 이렇게 4곳이다.

• 구글 클라우드

  그 중에서 구글 클라우드 서비스는 번역 api를 이용해본 경험이 있기 때문에(당시 기억으로 console이 굉장히 복잡함. 여전히 그러하다.) 사용하지 않았다.

• AWS

  사실 블로그를 구성할 때, 나는 Spring framework를 배운 기억이 있기 때문에 AWS 서버를 이용하여 deploy하고자 했었다. 하지만, 생각보다 불친절한 AWS의 장벽에 가로막혀 여기도 사용하지 않았다.

• 네이버 클라우드

  나는 네이버를 굉장히 좋아한다. 어릴 때부터 네이버에 입사해서 일을하고 싶어했다. 그 초록창.. 다이스키

• NHN 클라우드 서비스

  하지만, 나는 NHN 클라우드 서비스인 TOAST를 선택했다. 왜냐하면 2017년 하반기, 2018년 하반기 Pre-test 1차 전형을 통과해서 그냥 기분이 좋기 때문이다.
  사실, TOAST 서비스를 들여다 보면 일단 한국 리전의 이점과 사용자를 위한 UI 디자인을 만날 수 있다.

#Hexo와 친해지기

Hexo란?

Hexo 소개 페이지 를 보면 빠르고 단순하며 게다가 강력하기까지한 blog framework라고 소개하고 있다.

Markdown (혹은 다른 언어)로 posting을 진행할 수 있다고 하는데, 좀 더 소개하자면 Jekyll (한국인이기 때문에 ko page를 링크해두었다.) 은 Ruby를 주언어로 사용하는데에 반해 Hexo는 node.js를 주언어로 삼고 있다.
구성 파일을 보면 ejs가 들어있는 것도 그 이유다.

Ejs란?

간단하게 해당 이미지를 보고 가는게 좋을 것 같다.

ejs.co로 접속해보면 해당 문구를 발견할 수 있는데, 풀이해보면 EJS는 plain JavaScript와 함께 HTML을 만들어내는 단순한 템플릿 언어라고 한다. 이와 비슷하게 php, jsp, asp 정도가 있을 것이다.

Hexo의 동작

post 하나를 만들어내본 후 이해한 바로는 이러한 방식으로 동작하는 것이다.

1. Markdown 파일 생성
2. ejs를 통한 렌더링

그러면, github.io로와의 연동은 어떻게 되느냐..?

위와 비슷합니다.

1. Markdown 파일 생성
2. ejs를 통한 렌더링
3. 렌더링된 html 파일을 정적 파일로 저장
4. deploy

정말로 이렇게 간단할까..? 하는 의문이 생긴다면 직접 해보시길 바랍니다.