새해 다짐

연초에 크게 네가지 다짐을 했었는데요.

1. github pages 블로그 운영하기
2. 적어도 1개의 Production 제품 출시하기
3. 적어도 5개의 개인 프로젝트 출시하기
4. 적어도 1개의 게임 출시하기

프로덕션 제품 출시: 달성

베이비홈닥터를 출시하고 운영중입니다. 이 프로젝트 개발영역 중 네이티브 웹뷰 래핑을 제외한 모든 부분을 혼자 개발했는데요. 올해의 대부분은 베이비홈닥터를 만들면서 보냈습니다.

새로 배운 기술

이 앱을 만들면서 MongoDB를 처음 사용했습니다. 깊이 알고 코드를 작성한 게 아니라서 중간에 코드를 두세번 갈아엎었습니다. 쿼리 작성보다는 Express와 Mongoose의 구조에서 헤매었습니다. 익숙해지니 MySQL같은 RDB와 다른 매력이 보였습니다.

Vue.js SPA로 작성한 첫 프로덕션 앱이기도 합니다. 콘텐츠 관리와 CS, 푸쉬 전송, 통계등을 처리하는 사내 환경도 Vue.js로 작성했습니다.

매일 아침 특정 조건의 사용자에게 자동으로 푸쉬를 전송하는 기능은 AWS Lambda를 썼습니다. 특정 시간을 조건으로 람다함수에서 푸쉬전송을 수행하는 백엔드 api를 호출하는 방식으로 구현했습니다. 이렇게 구현하니 특정 조건의 푸쉬를 전송하는 api와 자동으로 전송하는 부분이 분리되어 확장 가능한 부분이 생겼습니다.

개인프로젝트 5개 출시: 달성

다섯개를 만들었습니다! 모두 필요에 의해 만들어진 것이라 애착가는 서비스입니다. 올해 초에 서버리스 아키텍처를 연습하려 만든 유튜브 재생기를 제외하고는 꾸준히 사용하고있습니다. 다른 사용자가 사용하는 비중이 더 큰 서비스도 있습니다.

1. 유튜브 재생기

한번 소개했던 나만의 유튜브 재생기입니다.

프론트엔드는 Vue.js로, 백엔드는 AWS API Gateway + DynamoDB + Lambda로 구성했습니다. 이렇게 구성한데에는 비용적인 측면이 크게 작용했습니다.

2. 익명프로젝트1 - 팔로어

앞으로 소개하는 개인 프로젝트는 모두 비밀입니다. 완성도가 꽤 좋은 프로젝트도 몇개 있어서 비밀인 것이 아쉽네요.

이 프로젝트는 특정 연예인의 활동을 쫓는 서비스입니다. 매일 기사가 새로 업로드되고, 기사 사진 혹은 SNS에 사진이 쏟아지는데요. 이것을 쉽게 모아보고 싶어서 만든 서비스입니다.

네이버 뉴스 api에서 특정 키워드의 기사와 사진을 가져오고, 트위터 api에서 사진을 가져옵니다.

3. 익명프로젝트2 - 동영상 큐레이션

올해엔 유독 동영상 관련 프로젝트를 많이 했습니다. 이 서비스는 아이돌의 무대를 모아보는 동영상 큐레이션 서비스입니다. 유튜브, 네이버TV등 동영상 서비스들에 품질 좋은 동영상은 많은데 일일히 찾아보기가 힘듭니다. 이게 본 영상인지 안 본 영상인지 헷갈리기도 하고요.

아티스트 - 활동곡 - 영상모음 구조를 가지고 있습니다. 예로 빨간맛 모든 무대를 한번에 한곳에서 볼 수 있어요.

유튜브는 동영상 정보 api를 제공하는데, 네이버TV는 api를 제공하지 않아 데이터를 하나의 형태로 가공하는 작업이 불가능했습니다. 네이버TV는 일일히 수동으로 큐레이션하는 수 밖에 없습니다.

이번에는 백엔드로 Serverless Framework을 사용해 AWS에 올렸습니다. 프론트엔드는 물론 Vue.js를 사용했고요. 1번 유튜브재생기를 만들 때에는 람다함수를 일일히 만들고 연결했는데 보다 관리하기 편합니다.

4. 익명프로젝트3 - 동영상 큐레이션

이번에도 동영상 서비스입니다. 1번 유튜브재생기, 3번 익명프로젝트2의 중간지점이라면 설명이 될까요?

1번 유튜브재생기는 무조건 하나의 리스트에서 동영상이 반복되고, 3번 익명프로젝트2는 구조와 목적이 명확하며 강제적입니다.

이 서비스는 여러 재생목록을 만들고, 그 재생목록을 순차재생하는 서비스입니다. 재생목록의 주제에 제한이 없는 것이 차이입니다. 정확히는 유튜브를 이용한 음원서비스라고 할 수 있겠네요.

프론트엔드는 역시 Vue.js를 사용했고 백엔드로 Firebase를 사용했습니다. api를 만들지 않아도 되는 것이 가장 큰 장점입니다. 앱에 집중할 수 있어서 최단시간에 최고 결과를 낼 수 있었습니다.

5. 익명프로젝트5 - 가짜 카톡 만들기

백엔드 기능이 없는 순수 프론트엔드 앱입니다. 프로필을 여러개 만들고, 프로필을 선택해 메시지를 입력하면 화면에 카톡 메시지처럼 나타납니다.

페이지를 여러개 추가하여 내용을 분할하고, 바로 이미지로 저장하는 기능이 포함되어 있습니다.

이미지 저장에는 html2canvas.js와download.js를 사용했습니다. 큰 틀은 Vue.js SPA로 만들었습니다.

게임 출시: 미달성

게임의 벽은 높네요. 작년부터 센과 치히로의 행방불명 팬 게임을 만들고 싶은 욕구가 있지만 실행하지 못했습니다.

스타트업캠퍼스

작년 10월부터 올해 2월까지 스타트업캠퍼스에서 지냈습니다. 자세한 내용은 여기에서!

감사하다 시리즈

매일의 감사함을 정리하고자 했으나.. 2월 그리고 3월 며칠 못 가 포기했습니다.

Vue.js 사용자모임 발표

올해 8월 23일 Vue.js 사용자모임에서 15분동안 Vue SPA 활용 블로그 만들기 주제로 발표를 했습니다. 겁도 없이 타임어택을 시도했고 시간이 살짝 초과되었습니다. 다시는 타임어택을 하지 않겠습니다. 흑흑.

vuetiful-blog-example에서 발표내용 확인하실 수 있습니다.

마치며

스타벅스 연말 프리퀀시 다 모았어요. 2018년은 스타벅스 플래너와 함께할 예정. 후후