NEMBV 새로운 솔루션 공개 예고

이 강좌는 종료되었습니다.
새로운 강좌로 시작하세요~
모던웹(NEMV) 제작 강좌

새로운 솔루션으로 개발을 시작한지 3개월이 다되어간다.

개발중 처음 시작하는 솔루션이라 구글링을 많이 했는데 조각난 자료는 많지만 실제 상용서비스를 쓸만큼 응용적인 자료는 찾기 어려웠다…

개발을 하며 조금씩 포스팅해보려 했는데 역시 뭔가 열중하면 에너지 분산이 어려웠다..

그리하여 이제 마무리 작업을 정리하는 김에 개발된 내용을 풀패키지로 소스까지 공개해보려한다.

새로운 솔루션?

사실 새롭게 하려던 건 프론트엔드 프레임웤인 vue.js 이었고 기존 솔루션에 얹힐려고만 했던 것인데

막상 해보니 vue를 셋업하면서 기존 백엔드나 디비쪽도 개혁이 필요하다는 것을 깨달았다..

구성 요소

Node.js / Express.js / MongoDB / Bootstrap / vue.js

기존 NEMV로 칭했던 부분에서 css 프레임웤인 부트스트랩만 추가한 것인데

그 이유는 bootstrap4가 드디어 베타딱지를 때면서 vue와 손을 잡은 BV(BootstrapVue) 가 나왔기 때문에 설계에 중요한 부분이 되었다..

키워드 나열

개발을하며 중요하게 변경된 부분들을 아래 나열해보았다..

ES-Lint : 개발 품질 강화

BootstrapVue를 설치하면서 같이 딸려온 문법 체크 기능을 airbnb style에 맞게 충실히 사용하였다..

node.js V9

node.js V4에서 시작했는데 벌써 9가 stable로 나온다…

뭐 특별히 많이 바뀐 것은 없는데 몇 군데 디프리케이트 된 것 처리와 es2017을 최대한 사용하였다.

Express.js V4

라우팅 처리를 완전히 개선하였다.

미들웨어를 이용해 덕지덕지 붙어있던 원파일을 라우트 패스마다 폴더로 정리하였다.

MongoDB V3.6

수평확장을 위해 샤딩과 관련 매니징 기술을 많이 배웠는데 에너지가 너무 많이 소비되었다..

현재도 디비 백업과 안정성, 주기 백업등 골머리가 아픈데..

생산성 향상을 위해 클라우드 매니징을 해주는 https://www.mongodb.com/cloud/atlas 로 이전을 기획중에 있다..

auth 관련

기존 세션을 통한 처리를 과감히 버리고 jwt(json web token)를 이용한 토큰 인증으로 바꾸었다..

관련 기능은 https://velopert.com 덕분에 많은 도움이 되었다..

ES6(2015~7) : promise 문법

기존 콜백지옥을 다양한 수로 헤쳐오긴 했으나 가장 보편적인 방법인 프라미스로 백/프론트 대부분 변경하였다..

async await를 통한 동기적 코드를 적극 이용해보았다..

mongoose V5

몽구스가 5버전이 되면서 모든 리턴을 promise로 줄 수 있기 때문에 대부분의 경우 프라미스패턴으로 api부분을 전면 수정하였다.

조금 복잡했던 aggregate/lookup 방식중 부하가 적은 것들은 populate를 통해 간단히 데이터를 얻게 하였다..

vue.js

https://kr.vuejs.org 에서 자료를 보며 가볍고 재밌다고 생각하고 시작한건데..

막상 실전에서는 진입장벽이 제법 높았다.. 하지만 간단한 코드로 양방향 데이터 바인딩을 통해 화면이 전환되는 것은 마법 같았다..

vue-router

사실 뷰 자체를 몇 몇 페이지에 따로 독립적으로 쓰는 경우는 드물 것이다..

결국 페이지 리로드 없이 뷰라우터를 통해 원페이지로 /#/?? 식의 라우팅을 기대할 것인데.. 역시 진입장벽이 좀 있다..

webpack 사용

Webpack을 사용하게되면서 ES5 코드는 작성할 필요가 없었고 es-lint를 사용하기 때문에 var 같은 선언은 아예 사용 조차 안된다..

문제는 라이브러리 적용 문제였는데 당연히 쓰는 moment 같은 것도 전역으로 쓰는 것은 에로사항이 있었다.

미칠드시 많은 라이브러리를 압축해서 정리해놓고 필요할때만 로드해서 쓰는 방식은 정말 모던한 웹에 꼭 필요한 요소인 듯하다..

vue-cli

보통 웹 개발을 할 때 코드 수정하고 리프레쉬하는 정도였는데

글자를 수정하면 웹에서 그냥 바뀌어 버린다. 상당히 개발시간을 줄여준 것 같다..

Bootstrap V4

bootstrap V4가 알파로 몇년을 보낸 것 같은데 최근에 정식 릴리즈가 되었다.

bootstrap V3버전보다 훨씬 개선되서 돌아왔다.. 기존 panel 은 card 이런식으로 바뀌었기 때문에

기존 소스는 재사용이 거의 불가능하다.

BV : BootstrapVue

bootstrap과 vue가 만났다..

https://bootstrap-vue.js.org

그것도 둘다 최신 버전으로…

bootstrap이 모든 컴포넌트를 vue형 component로 만들어 놨다.

vue와 함께일때 tag도 너무 이쁘다

<b-btn v-for="(v, i) in vs" :variant="v.status"></b-btn>

결론

유지관리 3개월 개발과 새플랫폼 3개월 개발은 희노애락의 폭이 심각하게 크다..

새플랫폼을 진행하면서 중도에 때려치고 쉽게 갈까? 라는 생각을 백번도 더한 것 같다..

하지만 꾹 참고 더 어려운 길을 걸었다..

더이상 새 플랫폼은 만들지 않겠다는…

이유는

• 웹솔루션중 가장 핫한 쪽에 속함 : 그러므로 비슷하게 핫한 파이썬장고, 루비온레일즈, 앵글러, 리액트등은 더 안하겠다는 것

• 웹개발 팀플레이를 원함 : 후임을 양성하고 싶기 때문..

• 다른 것을 하고 싶음 : 본업? 인 임베디드 장비나 앱개발

홍익인간 정신으로 리뷰해보겠음…