The Pursuit of Happyness

이 포스팅은 Manning 출판사에서 나온 Getting MEAN with Mongo, Express, Angular, and Node 라는 책의 내용을 요약한 것입니다.


https://www.manning.com/books/getting-mean-with-mongo-express-angular-and-node


@ 풀스택 개발자의 장점

- 남들 보다 일을 더 많이 하게 된다. 

- 야근도 많이 할 수 있다.

- 서버도 체크해야하므로 퇴근과 주말은 없어진다.

- 개발 프로세스의 모든 과정을 이해함으로써 프로젝트의 흐름을 잘 파악할 수 있으며, 그것을 바탕으로 효율적인 코딩 작업을 할 수 있게 된다.

- 궁극적으로 본인의 가치가 향상 된다.


@ MEAN 이란?

책 제목에 나오는 Mongo DB, Express, AngularJS, Node.js 등의 기술을 바탕으로한 개발을 이야기함

- Mongo DB : NoSQL DB 중에 하나로 Document 형식으로 데이터를 저장하는 DB

- Express : jade 등의 템플릿 엔진을 이용해서 개발하는 백엔드 프레임워크

- AngularJS : 동적인 웹 애플리케이션을 개발할 때 사용하는 프론트엔드 프레임워크

- Node.js : javascript 언어를 이용해서 개발하는 소프트웨어 플랫폼


@ 개발 프로세스

1. Mock-up 사이트 개발

2. 데이터 모델링 및 DB 설계

3. API 개발

4. 애플리케이션에 실제 데이터 적용

5. 애플리케이션 마무리 작업


@ MEAN 설계

1. 블로그 페이지

-  컨텐츠가 풍부하다.

- 사용자가 하는 일이 적다.

- 첫 페이지 로딩이 빨라야 한다.

- 사용자들이 머무는 시간이 짧다.

- 공개적이고 공유가 가능하다.

2. Admin 페이지

- 기능이 풍부하다

- 사용자의 조작이 많다.

- 조작에 대한 반응이 빨라야 한다.

- 사용자들이 머무는 시간이 길다.

- 비공개 작업이다.


@ 웹 개발 설계

1. Express App : 서버에서 웹페이지를 생성해서 보내주는 방식 

2. Express and extras : 서버에서 웹페이지를 생성해서 보내주며, 페이지에 들어가는 내용은 클라이언트에서 데이터를 받아서 웹페이지를 렌더링 하는 방식

3. Angular SPA : 서버에서 정적인 웹페이지를 받아와서, 클라이언트에서 데이터를 받아와서 렌더링을 해주는 방식


@ 기타

- 책에서는 위의 웹 개발 설계에 소개된 방법에 따라서 예제 프로젝트를 작성해 가며 단계적으로 설명을 해줍니다.

- MEAN 각각에 대해서 깊이 있게 다루는 책은 아니지만, 웹 프로젝트를 다루는데 필요한 코드를 통해서 기본적인 사용법을 익히는 데 큰 도움을 줍니다.

- 테스트 서비스를 위한 Heroku 솔루션 사용법을 제공해 줍니다.

- Express 관련해서는 간단한 jade 템플릿 엔진에 사용법 및 라우팅에 대해서 설명합니다.

- Mongo DB 를 사용할 때는 mongoose 를 사용하여 객체 모델링이나 validation 을 하는 방법에 대해서도 소개하고 있습니다.

- REST API를 만드는 방법에 대해서 설명합니다.

- SPA (Single Page Application) 형식으로 앱을 제작하는 방법에 대해서도 설명을 해주고 있습니다.

- Angular JS는 1.x 버전으로 설명하고 있으며, 라우팅이나 데이터 바인딩에 대해서 설명합니다.

- 웹토큰을 이용한 로그인 인증 처리 예제를 제공합니다.


또한 무료로 배포하는 부록에는 Javascript 코딩 습관에 대한 저자의 노하우를 공개하고 있습니다. 


이미 각 스택에 대해서 잘 알고 계신 분이 보기에는 조금 아쉬운 감이 있겠지만, MEAN을 이용한 웹개발 입문자에게는 상당히 도움이 될 만한 책이라고 생각됩니다.






Comment +0

html2canvas 를 이용하면 현재 화면에 보여지는 html 페이지를 canvas 혹은 이미지로 만들수 있는데,

Open UI5 등의 bootstrap 을 이용하면 렌더링 영역이 화면에 보여지는 윈도우 영역으로 한정되기 때문에 현재 브라우져 창의 사이즈를 넘어가는 영역은 제대로 렌더링이 되지 않는 이슈가 있습니다.


위의 이슈를 해결하기 위해서 화면사이즈보다 작은 영역을 캡쳐해서 합치는 방법을 이용한 코드 예제 입니다.


https://github.com/shineum/div2img


사용법은 아래와 같이 캡쳐할 영역의 innerHTML, 캡쳐할 영역 크기, 콜백을 지정하면 됩니다.


div2img(document.bodyfunction(pImgData) {


       var tNewDiv = document.createElement('div'); 


       document.body.appendChild(tNewDiv);

       tNewDiv.innerHTML = "<img src='" + pImgData + "'>";

}, 12002400, 0, 0);


Comment +0

Comment +0