[MEAN스택] MEAN스택 프로젝트 기본구조

최근 MEAN  스택 공부를 하고 있다.

웹 개발은 프런트는 HTML, CSS, JavaScript, 백엔드는 PHP, JavaScript, Python, Java 데이터베이스 MySQL, MariaDB, MongoDB 종류도 정말 많고, 서버는 무슨 서버를 쓸 거냐, 통신 방식은 어떻게 할거냐 등등 고려해야 할 것들이 정말 많은 것 같다.

MEAN 스택은 MongoDB + Express + Angular.js + Node.js를 합쳐서 부르는 풀스택 개발 방법중 하나이다.

이 외에도 WAMP, LAMP 같이 다양한 설계/구현 방법은 많이 있지만 MEAN 스택은 풀스택을 HTML, CSS, JavaScript로만 구현 가능하다는 점이 매력적이다. 그렇다보니 사실 초반에는 어디가 서버부분이고 어디가 클라이언트인지 헷갈리는 역효과(?)가 있었다. (배우는 과정에서이지 MEAN스택의 단점이 아니다...)

하지만 각각이 어떤 역할을 하는지 알고 나면 풀스택 개발자가 될 수도 있겠다는 부푼 꿈을 꾸게 될 것이라고 생각한다(???)

MEAN스택 프로젝트를 생성하면 기본 구조는 다음과 같다. 크게 묶은 논리적 구역은 말그대로 논리적인 구역이지 사실 모든 폴더는 하나의 프로젝트 폴더 안에 있을 수 있다. 예를 들어 MEANProject라는 프로젝트를 만든다고하면 그 폴더 안에 다음과 같은 디렉토리와 파일이 있다고 보면 된다.

1. Mongoose 모듈을 이용해서 Mongo DB 데이터베이스에 저장할 데이터 스키마를 설정한다.

2. 클라이언트에서 요청을 받는 인터페이스가 app_routes.js이며 여기서 비즈니스 로직을 처리하는 실제 코드를 controller.js에 분리해 놓음

3. ui_app.js는 html에서 클라이언트->서버 또는 서버->클라이언트로의 동적인 처리를 곧바로 연결해주는 역할

4. 3번에서 말했듯이 ui_app.js에서 받거나 보내는 작업은 서버의 app_routes와 상호작용함

5. Mongo DB에서 사용할 DB 콜렉션을 초기화하고 (1번에서 설정한 데이터 모델에 맞게) 필요한 기본 정보를 데이터베이스에 저장하는 역할

일반적으로 MEAN 스택으로 개발을 한다고 하면 강제는 아니지만 다음과 같이 디렉토리 구조를 가지면 기본은 갖춘 것이라고 할 수 있을 것 같다. MVC 패턴을 따라

views

controllers

models

세 가지 폴더 가 있는데 views는 HTML이나 템플릿 파일이, controllers는 기능적인 메소드를 포함하는 모듈들이, models은 몽구스 모델 정의를 포함한다.

또 다른 분류 방식은 클라이언트와 서버 부분을 명시적으로 나누는 방식이 있을 수 있다.

위의 구성 방식에서 js로 묶었던 AngularJS의 기능들 (컨트롤러, 서비스, 지시자, 필터)을 여기서는 따로 분류해 놓은 것을 볼 수 있다. 클라이언트와 서버 부분의 환경과 애플리케이션 구성 파일 및 초기화를 담당하는 부분을 config 폴더에 분류하였고, 서버쪽에서는 route와 view 폴더를 생성해 관리를 하고 있다.

이런 점으로 보아 위의 방식이 간단한 MEAN 스택 애플리케이션에 좀 더 적합하고 아래 방식은 큰 프로젝트에서 사용하는 데 더 적합할 것 같다. 프로젝트가 더 커진다면 비즈니스적 기능을 feature 단위로 나눈 뒤 client, server 폴더의 상위 폴더를 core, feature로 계층을 한 단계 더 늘리는 방식을 사용할 수도 있다.

이렇게 두 가지 대표적인 MEAN 스택을 구성하는 방법이 있을 수 있다. 물론 비즈니스적인 제약이나 서비스 성격에 따라 여러 가지 방법일 나올 수 있을 거라 생각한다.

참고 자료

브래드 데일리 저/테크 트랜스 그룹 T4 역, Node.js, MongoDB와 AngularJS를 이용한 웹 개발, 에이콘, 2014

이모스 하비브 저/박재호 역, 중급 개발자를 위한 MEAN 스택 공략, 에이콘, 2015