모놀리틱도 싫고, SPA+REST도 싫고, GraphQL!

어느덧 벤젠이라는 이름으로 SOHO 사업자를 낸지도 1년 6개월이되었네요.

학교를 졸업하고 그동안 무엇을 했냐 자문해보니 정작 창업 최초에 준비했던 서비스 개발에 투입한 시간은 크지 않고. 외주에, 강의에, 커리큘럼 작성에.. 코딩 공부에 ..세금 회계 공부 등 일년이 넘는 기간 동안 정말 정처없이 흘러다닌 것 같습니다.

작년 9월 외주를 끝으로, 기존 워크샵 서비스를 리뉴얼하면서 본격적으로 제 서비스를 꾸리고나갈 계획이었습니다.

 

<(어서 빨리 폐쇄하고 싶은) 워크샵 서비스 프로토타입>

 

그리고 서비스 개발에 앞서 앞으로의 포부를 달성하기 위해서, 1인 기업에는 과분한 사내 시스템과  꾸려나갈 밑작업을 시작하였습니다.

  • CI/CD, 컨테이너 오케스트레이션에 대해 공부하고, 적응하고
  • GCE의 kubernetes에 기존 서비스들을 이전
  • 사내 CI 코드 저장소 및 파이프라인을 설정하고 적응하는데 약 이개월

 

외주로 모은돈은 집에 앉아 공부만 하느라 까먹고, 또 한번 용역을 해야하나 고민하면서 서비스 기획을 시작합니다.

  • 확장성있는 서비스를 위해 모놀리틱 아키텍쳐를 벗어나려 API 서버와 웹 엔드포인트를 분리
    • SPA에는 친구가 많은 React 선택
    • 백엔드는 nginx 로드밸런서 뒤에 REST 아키텍쳐로의 PHP/Laravel 어플리케이션을 컨테이너로 띄우고 스케일링 할 수 있도록
  • 1인 개발자로서 가장 절실한 UI프레임워크는 semantic-ui로 선택
  • docker-compose로 통합 로컬 개발 환경 구성
  • kubernetes에 스테이징 및 프로덕션 배포 파이프라인 구성 완료

 

자! 시작하자!

<만들다가 다 갖다 버림 (시맨틱 ui 참 이쁨)>

 

이후 서비스 와이어프레임을 잡고 왠만치의 코드를 작성해갑니다… 10여년전 개발을 시작한 이후로 제 서비스(프로토타입이나 공부용 말고)를 진지하게 온전히 작성하는 것은 처음이라 정말 최선을 다하는 마음으로 작성해 나갑니다.

2016년 이후로 대형 SPA+API 프로젝트를 Angular/Vue로 두차례 완료했습니다만 정작 제 서비스를 만드려니 왠지 계속 마음이 답답해집니다.

제가 알고있는 SPA+API(REST)의 최선의 구조는

  • OOP를 최대한 활용하는 DB 설계 및  persistent 레이어
  • 비지니스 로직에는 repository, service, controller 등 레이어별로 최선을 다해 재사용성을 높히자는 그렇고 그런..
  • 프론트엔 유동적인 앱 라이프사이클과 data와 view가 완전히 분리된 재사용 가능한 컴포넌트들
  • 여기에 SPA의 단점을 극복하기 위한 SSR, 및 각종 상태의 rehydration, 및 SPA의 장점을 극대화하기 위한 여러 병목에서의 캐싱 및 service worker를 이용한 offline support

아주 열심히 구성하여 본격적으로 비지니스 로직 개발에 들어간 한참.. 못난 디자인과는 별개로 마음이 자꾸 답답해집니다.

물론 모든 이유는 DRY 원칙에서 벗어나는 노가다성 코드에 있습니다. 저는 코딩에 큰 자부심이 있습니다만 모델이 수십개가되고, API 엔드포인트가 백여개에 다달해갈쯤에 제 코드가 보기 싫어지고 점점 슬퍼집니다.

  • REST가 최선인가? 엔드포인트가 늘때마다 쓸데 없는 코드가 산만큼 생긴다.

위의 문제가 머릿속을 꽉채우고.. 나만 이런문제로 고민할리가 없다는 생각에 결국 약 한달간 작업한 코드를 놔버렸습니다. 수십번의 마이그레이션도, 혼을 바친 컴포넌트들도 다 버렸습니다. 그리고 spa caching too many endpoint flexible rest api.. 갖가지 키워드로 검색.

  • GraphQL by Facebook
  • Apollo

저는 곧 결국 구세주를 찾았습니다. 누가 미리 좀 알려줬으면 좋았을 걸.. 빈틈 가득하게 손수 구현했던 api call 캐싱, reactive한 컴포넌트를 위해 범람하던 전역 상태 (redux와 그 친구들은 react 생태계에서 최악의 라이브러리라고 생각..), 서버사이드렌더링시 api 콜의 결과를 rehydration하는 어려움.. 등등 모든 잡스런 고민이 Facebook이라는 멋진 대기업의 프로젝트 하나로, Apollo라는 멋진 친구들의 라이브러리로 한방에 해결되었습니다.

GraphQL에 대한 소감은 생략. http 프로토콜의 혁명입니다. 전 참 좋은 시대에 태어난 것 같네요.

약 한달간 공부하고 새로운 스택을 구성하여(결국 프론트/백엔드 모두 node로..), 본격적으로 비지니스 로직을 작성 중에 있습니다. REST는 아마도 rest in peace, 이후 웹 백엔드-프론트 생태계의 발전은 결국 GraphQL로 귀결될것이라고 감히 단언해봅니다.

계속 산으로 가는 이 리뉴얼은 언제 끝날 수 있을까요?

 

가구제작 중개 플랫폼

REST API: PHP/Laravel + Dingo + Mysql + document oriented ORM
PWA(Progressive Web App): Vue.js + Element.io

개발기간: 8주

웹 브라우저의 Service Worker API를 통해서 (혹은 다른 방법으로) 로컬 script 및 애샛을 로드하는 등 오프라인 기능을 통해 SPA를 로컬 앱에 가깝게 만든 웹 서비스를 (구글에서 부르기를) PWA라고 합니다.
일반적인 SPA와 재접속시 로딩 속도에 있어서 엄청난 차이를 보입니다. SPA의 핵심적인 강점으로 보입니다.

 

Vuejs 깔끔하고, 생산성 높습니다. 좋습니다. 중국인 개발자들이 벤더라서인지. 좀 폐쇄적인 느낌으로 왠지 모르게 react 등에 밀리는 느낌이 있는데요. 경험해보니 성능이나 문서, 생태계 등 모두 전혀 뒤지진 않아보입니다.

react-native에 비교될만한 weex라는 스마트폰앱 하이브리드 플랫폼이 vuejs를 서포트해주어 하이브리드한 접근도 가능합니다. weex라는 플랫폼은 무려 아파치 재단에서 인큐베이팅하고 있습니다.  vuejs는 충분히 메인으로 올라설 수 있을 것 같습니다~ 다음 제 개인 프로젝트를 react-native로 진행할 예정이니 진득하게 비교를 한번 해봐야겠습니다.

 

외주 프로젝트 결과물을 Docker로 배포해보았습니다.  (클라이언트 요구사항..)

설치 및 이전에 있어서 예상치 못한 오류가 생길 수 없으니 공급자 입장에서 참 편리합니다.

끝~

고객 피드백 분석 AI 서비스

개발 기간: 9주
프론트: angular2, redux
백엔드: loopback(2), node-git

loopback으로 REST backend를 angular2로 frontend를 구성하고,

NLP, STT,DNN 등 AI 처리를 제공하는 고객사 engine에 grpc 프로토콜을 통해 연결하였음.

구체적인 내용은 비밀유지계약으로 인해 생략.

특이 사항:

– loopback은 여전히 편하기도 한 것 같긴 한데, 툭툭 튀어나오는 이슈 때문에 아직 꺼려지는 오픈소스

– node-git을 이용한 훈련 데이터 버전관리 및 diff 처리, 웹서비스 만들면서 잘 모르던 git 내부 공부를 하게 됐네요. 웹 서비스 만드는데.. 높은 레이어에서 레이스 컨디션을 다루는 일도 생기네요. ( git lock 파일 때문에 큐처리함)

– redux를 이용한 front-end 상태관리, redux나 flux, 최근 얘기가 많은 아키텍쳐들…. 글쎄요. redux를 도입하니 전역 상태 관리가 깔끔해지는 것 같기도하고, 오히려 유연하지 못하게 갇혀버리는 것 같기도 하고, 아직은 잘 모르겠네요. 다른 프로젝트에 한번 더 도입해볼까 합니다.

수산물 수출입 업체 ERP

프로그램 개발 환경

Apache, MySQL, PHP / Laravel framework, Eloquent ORM

Angular JS /?Bootstrap

개발 기간 4개월

프로그램 기능

  • 관리자 기능: 사업장, 인장 / 직원 관리 / 계정 설정
  • 코드 관리: 거래처 / 품목 / 창고 / 은행 설정
  • 파일공유
  • 모바일 지원 (responsive 레이아웃)
  • 데이터를 PDF 및 CSV 출력
  • 매출: ?매출 및 반품 / 출고증 발급(PDF) / 자 사업장간 매출 연계(매입알림)
  • 매입: 매입 및 반품 / 매입후판매
  • 수입: T/T, L/C at sight, L/C usance 방식 지원
  • 재고: 입출고 관리, 재고장
  • 담보: 담보 설정 및 상환, 잔액 조회
  • 회계: 입출금 장부 / 대체거래 장부(전표 등록) / 외상매출금, 외상매입금 결제 장부 / ?분개장(자동분개 및 전표 조회) / 전거래처 잔액표 / 손익계산서 / 재무상태표