MEAN stack architecture

SPA(Single Page Application)

 

 

rest api 역할은

sap에서 데이터를 요청을 하면 json 형태로 보내준다.

 

REST Api란?

 

 

보통 이런식으로 api를 사용합니다.

 

왜 굳이 REST라고 붙혔을까?

이유를 알아봅시다.

 

우리가 만들고자 하는건 web app입니다.

 

web app은 어떻게 동작할까요? hosting을 해야합니다.

즉, 클라우드 플렛폼에 올려놔야 동작을 합니다.

 

마찬가지로 DB도 클라우드에 올라가있어야 합니다.

우리가 써야한 MongoDB는 로컬 DB를 쉽게 클라우드DB로 올리는 방법이 MongoDB Atlas 라는 것이 있습니다.

 

 

결국 REST API가 웹상(HTTP)에서 주고 받을 수 있게 해야 합니다.

 

REST(REpresentational State Transfer)가 의미하는 바는 웹 상에서 정보(리소스)들을 주고 받을 때 지켜야할 아키택쳐(룰)

 

리소스들을 주고 받을 때  HTTP 메소드로 주고 받습니다.

ex) GET, POST, PUT, DELETE

 

즉 HTTP 메소드들로 REST API 메소드들을 사용할 수 있습니다.

 

 

 

MEAN 구조 디자인

일단 3가지 기술을 가지고 MEAN 구조를 설계해 봅시다.

 

 

 

예시로 블로그 엔진을 만들어 봅시다.

엔진은 Public-facing side: 보여지는 것

Admininistrator interface: 관리자 인터페이스 

블로그 특성 부분을 파악해봅시다.

확연하게 특성이 다른 2가지가 있습니다.

 

블로그 엔진 구조

한가지 방법으로 해결방법을 찾을 수 없다.

 

2개의 서로다른 애플리케이션을 해결책으로 보고 만들어 봅시다.

 

 

관리자 구조: Angular SAP

 

REST API를 만들어서 Admin interface를 만듭니다.

 

서로 json으로 요청, 응답을 합니다.

 

블로그 구성

 

 

결국 블로그 엔진은 하나의 솔루션으로 나와야 합니다

2개의 웹이 REST API를 사용하는 형태로 됩니다.

 

왼쪽은 애플리케이션이 직접 DB에 연결하는 방식입니다.

오른쪽은 api를 두고 통신하는 방식입니다.

 

통합 방식인 경우

Angular 애플리케이션이 있었다. 통합 레이어를 만듭니다.

다음 Node.js 애플리케이션은 또 통합 레이어 만들어야 하고

모바일 앱에서 접근하려면 또 통합 레이어만들어야 합니다.

 

api접근 방식은

어떤 경우든 api와 통신하면 됩니다.

단점은 초기 작업량이 많습니다.

 

 

우리가 한학기 동안 구축할 애플리케이션을 봐봅시다.

 

어떤 애플리케이션인가?

- WiFi가 있는 인근 장소를 나열합니다

- 시설, 영업시간, 평점, 지도를 표시합니다.

- 사용자들은 로그인하여 그 지역에 대한 등급과 리뷰를 적습니다.

 

 

첫 번째 단계

 

어떤 화면들이 필요할까?

 

 

스크린들을 분류해봅시다

컬랙션으로 나눠봅시다.

 

컬랙션이란? 관계형 DB에서 테이블에 해당됩니다.

 

스크린 도출에서 1,2,3은 모두 장소를 보여줍니다.

하지만 'about us'는 others에 넣을 수 있습니다.

 

그림으로 나타내 봅시다

제일 먼저 파악할 수 있는게 기본 페이지는 몇개인가? 3개로 알 수 있습니다.

list를 보고 details를 보고 다 보면 review를 다는 순서도 알 수 있습니다.

 

구조화를 시켜봅시다

 

 

API를 이용해서 DB에 접근 부터 시작해봅시다

그림으로 봐봅시다

3가지다 API를 이용합니다.

 

우리는 2개를 선택할 것입니다.

Angular SPA와

Express, Node.js, Angular를 사용합니다.

 

그리고 이 2개를 하나로 묶는 방식으로 프로젝트를 구축하겠습니다.

 

개발단계를 여러개로 나눠봅시다

 

 

’Rapid Prototype Development’의 다섯 단계를살펴봅시다

 

 

단계 1: static site 구축

 

 

단계2: 데이터 모델 디자인, DB 구축

 

단계3: API 구축

 

단계4: DB와 API연동

 

 

단계5: 에플리케이션을 보강

 

 

위와 같은 이론을 가지고 Loc8r을 구축해봅시다.

 

단계1:사이트 구축

 

단계2: 데이터 모델 디자인, DB 생성

 

 

단계3: REST API 만들기

 

단계4: 에플리케이션 에서 API를 이용할 수 있도록 연결

 

 

단계5: 에플리케이션 보강

우리는 Express 에플리케이션 에다가 Angular 컴포넌트들을 프론트 엔드로 가져옵니다.

 

 

단계6: 코드 전체를 Angular SPA로 전체를 바꿔버린다.

 

 

단계7: 인증 단계를 에플리케이션에다가 추가시켜줍니다.