평균 스택 애플리케이션 계획에 대한 실제 가이드

이 기사는 Manning Press의 "Mastering Mean : Mongo, Express, Angular 및 Node, Sec 두 번째 판은 Angular 2, Node 6 및 최신 주류 JavaScript 버전 ES2015 (ES6)를 다루기 위해 완전히 수정 및 업데이트되었습니다. 이 버전은 업데이트 된 평균 스택을 사용하여 웹 응용 프로그램을 개발하는 방법을 배우는 것을 안내합니다.

키 포인트

평균 스택 애플리케이션을 계획 할 때는 먼저 각 페이지의 내용을 깊이 파고 들지 않고 원하는 화면을 임신해야합니다. 이 단계에서 스케치하면 전체 응용 프로그램을 시각화하고 화면을 수집 및 프로세스로 구성하는 데 도움이됩니다. 화면을 논리적 세트로 나눕니다. 예를 들어, 모든 처리 위치의 화면을 함께 결합 할 수 있으며 "About Us"와 같은 독립 페이지는 기타 컬렉션에 결합 될 수 있습니다. 응용 프로그램의 아키텍처를 고려하고 API로 시작하십시오. 데이터와 상호 작용하는 API를 구축하는 것은 아키텍처의 기초입니다. 서버에서 직접 HTML을 제공할지 여부를 결정하거나 응용 프로그램의 특정 요구 사항에 따라 단일 페이지 응용 프로그램 (SPA)을 선택하십시오.

아키텍처는 Express 프로젝트에 캡슐화되어 관리 및 배포가 더 쉽습니다. 그러나 응용 프로그램의 다른 부분을 서로 분리하여 코드를 올바르게 구성하여 향후 필요할 때 별도의 프로젝트로 분할하는 것이 중요합니다.

실용 응용 프로그램 계획 : loc8r
• 예시가 용이 해지려면 평균 스택에서 loc8r이라는 작업 응용 프로그램을 작성한다고 가정 해 봅시다. LOC8R은 사람들이 일할 수있는 WiFi와 함께 인근 장소를 나열합니다. 또한 각 장소의 시설, 개장 시간, 등급 및 위치도 표시됩니다.
• 고급 평균 스택 애플리케이션 계획
첫 번째 단계는 응용 프로그램에 필요한 화면을 고려하는 것입니다. 우리는 별도의 페이지보기와 사용자 여행에 중점을 둘 것입니다. 각 페이지의 세부 사항에주의를 기울이지 않고도 높은 수준 에서이 작업을 수행 할 수 있습니다. 전체 응용 프로그램을 시각화하는 데 도움이 되므로이 단계에서 종이 또는 화이트 보드에서 스케치하는 것이 가장 좋습니다. 또한 구축시 좋은 참조 지점으로 화면을 수집 및 프로세스로 구성하는 데 도움이됩니다. 페이지 또는 응용 프로그램 논리 뒤에 첨부 된 데이터가 없으므로 부품을 추가 및 삭제하기 쉽고 표시된 컨텐츠 및 위치를 변경하며 필요한 페이지 수를 변경합니다. 우리는 처음으로 그것을 올바르게하지 않을 가능성이 높습니다. 열쇠는 개별 페이지와 전체 사용자 프로세스에 만족할 때까지 반복 및 개선을 시작하는 것입니다.
• 화면 계획
현대식 자바 스크립트 읽기 끊임없이 진화하는 JavaScript 세계를 따르십시오! 이 책을 읽으십시오.이 책을 읽으십시오 loc8r을 고려해 봅시다. 우리의 목표는 다음과 같습니다.

loc8r에는 사람들이 일할 수있는 Wi -Fi가있는 근처의 장소를 나열합니다. 각 장소의 시설, 개장 시간, 등급 및 위치지도를 보여줍니다. 방문객들은 등급과 의견을 제출할 수 있습니다.

이것으로부터 우리는 필요한 일부 화면을 배울 수 있습니다.

스크린 목록 근처 단일 장소의 세부 사항을 보여주는 화면 장소에 대한 주석을 추가하기위한 스크린

우리는 또한 방문자들에게 LOC8R이 무엇인지, 왜 목록에 다른 화면을 추가 해야하는지 알려줄 수도 있습니다.

"About Us"정보를 화면

1. 화면을 컬렉션으로 나눕니다 다음, 우리는 화면 목록을 가져 와서 논리적으로 함께하는 곳으로 구성하려고합니다. 예를 들어, 목록의 처음 세 개는 모두 위치와 관련이 있습니다. About Page는 어디에도 속하지 않으며 기타 "기타"컬렉션에 배치 할 수 있습니다. 스케치를 그리는 것은 그림 1과 비슷합니다.
3. 그림 1 : 응용 프로그램의 별도 화면을 논리 컬렉션으로 구성하십시오.
이러한 빠른 스케치는 계획의 첫 번째 단계이며, 아키텍처에 대해 생각하기 전에이 단계를 완료해야합니다. 이 단계는 기본 페이지를보고 프로세스를 고려할 수있는 기회를 제공합니다. 예를 들어, 그림 1은 위치 컬렉션의 기본 사용자 여정, 목록 페이지에서 세부 사항 페이지에 이르고 주석을 추가하는 양식에 표시됩니다.

아키텍처 설계

loc8r은 몇 개의 화면만으로 단순 해 보입니다. 그러나 우리는 데이터베이스에서 데이터베이스에서 브라우저로 데이터를 전송하여 사용자가 데이터와 상호 작용하고 데이터를 데이터베이스로 다시 전송하도록 허용하기 때문에 아키텍처를 구축하는 방법에 대해 생각해야합니다.

api
1. 로 시작하십시오 응용 프로그램은 데이터베이스를 사용하고 데이터를 전달하기 때문에 필요한 부분에서 아키텍처를 구축하기 시작합니다. 그림 2는 MongoDB 데이터베이스와의 상호 작용을 가능하게하기 위해 Express 및 Node.js를 사용하여 구축 된 REST API 인 출발점을 보여줍니다.

그림 2 표준 평균 REST API부터 MongoDB, Express 및 Node.js를 사용하십시오. 데이터와 상호 작용하는 API 구축은 아키텍처의 기초입니다. 더 흥미롭고 어려운 질문은 다음과 같은 것입니다. 응용 프로그램의 아키텍처를 어떻게 구축합니까?

응용 프로그램 아키텍처 옵션

이 시점에서, 우리는 응용 프로그램의 특정 요구 사항과 평균 스택 부분을 결합하여 최상의 솔루션을 구축하는 방법을 살펴 봐야합니다. 결정을 변경하려면 MongoDB, Express, Angular 또는 Node.js의 특수 기능이 필요합니까? 서버에서 직접 HTML을 서비스하고 싶습니까, 아니면 스파가 더 나은 옵션입니까?

LOC8R의 경우 특별하거나 구체적인 요구 사항이 없으며 검색 엔진에 의해 쉽게 크롤링되어야하는지 여부는 비즈니스 성장 계획에 따라 다릅니다. 목표가 검색 엔진에서 유기 트래픽을 가져 오는 것이라면 예, 크롤링 할 수 있어야합니다. 목표가 응용 프로그램을 애플리케이션으로 홍보하고 이러한 방식으로 사용을 추진하는 것이면 검색 엔진 가시성이 덜 중요해 보입니다.

우리는 그림 3 :

와 같이 3 개의 가능한 응용 프로그램 아키텍처를 즉시 구상 할 수 있습니다.

node.js 및 각도 상호 작용을 가진 Express Applications

앵글 스파
이 세 가지 옵션을 염두에두고 LOC8R에 가장 적합한 옵션은 무엇입니까?
그림 3 서버 측 Express 및 Node.js 응용 프로그램에서 전체 클라이언트 각도 스파에 이르기까지 LOC8R 애플리케이션을 구축하기위한 세 가지 옵션.

애플리케이션 아키텍처를 선택하십시오 우리가 한 아키텍처를 다른 아키텍처보다 선호하는 구체적인 비즈니스 요구 사항은 없습니다. 세 가지 아키텍처를 모두 구축하면 각 접근 방식이 어떻게 작동하는지 탐색하고 각 기술을 차례로보고 층별로 응용 프로그램 계층을 구축 할 수 있습니다.

우리는 node.js 및 Express Applications부터 그림 3에 표시된 순서대로 스키마를 구축 한 다음 각도를 계속 추가하여 각도 스파에 리팩토링합니다. 이것은 일반적으로 웹 사이트를 구축하는 방식이 아니지만 평균 스택의 모든 측면을 배울 수있는 좋은 기회를 제공합니다.

하나의 Express 프로젝트에서 모든 것을 캡슐화하십시오 우리가보고있는 아키텍처 다이어그램은 API 및 응용 프로그램 논리에 대한 별도의 Express 응용 프로그램이 있음을 시사합니다. 이것은 전적으로 가능하며 대규모 프로젝트에도 적합한 선택입니다. 많은 트래픽이 예상되면 기본 응용 프로그램과 API가 다른 서버에 있기를 원할 수도 있습니다. 이에 추가 된 이점은 각 서버에 대해보다 구체적인 설정을 설정하고 각각의 요구에 가장 적합한 응용 프로그램을 설정할 수 있다는 것입니다.

또 다른 방법은 간단하고 간결하게 유지하고 모든 것을 단일 특급 프로젝트에 넣는 것입니다. 이 접근 방식을 사용하면 응용 프로그램 호스팅 및 배포에 대해 걱정하고 소스 코드 세트를 관리하면됩니다. 이것이 우리가 LOC8R로 할 일이며, 일부 서브 애플과 함께 Express 프로젝트를 제공합니다. 그림 4는이 접근법을 보여줍니다.

그림 4 동일한 Express 프로젝트에서 API 및 응용 프로그램 논리를 캡슐화하는 응용 프로그램 아키텍처. 이러한 방식으로 응용 프로그램을 결합 할 때 응용 프로그램의 다른 부분을 분리 할 수 ​​있도록 코드를 올바르게 구성해야합니다. 코드를보다 쉽게 ​​유지할 수있게하는 것 외에도 올바른 경로를 선택할 때 나중에 별도의 프로젝트로 분할 할 수 있습니다. 이것은 우리 가이 책에서 계속 논의 할 주요 주제입니다.

최종 제품

보시다시피, 우리는 평균 스택의 모든 레이어를 사용하여 loc8r을 생성합니다. 또한 응답 형 레이아웃을 만드는 데 도움이되는 Twitter 부트 스트랩도 포함합니다. 그림 5는 구축 할 수있는 일부 컨텐츠의 스크린 샷을 보여줍니다.

그림 5 loc8r은 샘플 응용 프로그램입니다. 다른 장치마다 다른 표시를 표시하고 각 장소의 장소 및 세부 사항 목록을 표시하며 방문자가 로그인하여 주석을 남길 수 있습니다.

결론

이것은이 기사에 관한 것입니다. 이러한 단계를 실습을 시작하려면 Manning의 웹 사이트를 방문하여 Mongo, Express, Angular 및 Node, Sec 그렇지 않으면,이 기사에서 다룬 내용에 대해 궁금한 점이 있으면 아래 의견에 게시하십시오.

계획에 대한 FAQS 평균 스택 애플리케이션 (FAQ)

에 대한 FAQ 평균 스택은 무엇이며 애플리케이션 개발에서 중요한 이유는 무엇입니까? 평균 스택은 웹 애플리케이션을 개발하는 데 사용되는 JavaScript 기반 기술 모음입니다. 평균은 mongodb, expressjs, angularjs 및 node.js의 약어입니다. MongoDB는 NOSQL 데이터베이스이며 ExpressJS는 웹 애플리케이션 프레임 워크이며 AngularJS는 JavaScript 프레임 워크이며 Node.js는 서버 플랫폼입니다. 응용 프로그램 개발에서 평균 스택의 중요성은 효율성과 유연성에 있습니다. 이를 통해 개발자는 JavaScript를 사용하여 서버 및 클라이언트 모두에 대한 코드를 작성하여 원활한 통합 및 효율적인 데이터 처리를 가능하게합니다. 평균 스택 애플리케이션의 아키텍처는 어떻게 작동합니까?

평균 스택 애플리케이션의 아키텍처는 유연하고 효율적입니다. MongoDB (NOSQL 데이터베이스)는 응용 프로그램 데이터를 저장합니다. Node.js에서 실행되는 ExpressJS 서버는 서버 측 기능을 처리합니다. AngularJS는 클라이언트 (사용자 지향) 기능을 관리합니다. 전체 애플리케이션은 JavaScript로 작성되어 사용자 상호 작용에서 서버 및 데이터베이스로의 데이터가 원활하게 흐를 수 있습니다.

애플리케이션 개발에 평균 스택을 사용하면 어떤 이점이 있습니까? 평균 스택은 애플리케이션 개발에 많은 이점을 제공합니다. Node.js 덕분에 코드 재사용 및 고속이 가능합니다. MongoDB는 복잡한 데이터를 저장하는 유연성을 제공하는 반면 AngularJS는 대화식 기능을 추가하는 깨끗한 방법을 제공합니다. ExpressJS는 서버 라우팅을 작성하고 관리하는 프로세스를 단순화합니다. 또한 모든 것이 JavaScript로 작성되었으므로 개발 프로세스를 단순화하고 속도를 높입니다. MongoDB는 평균 스택 애플리케이션의 효율을 어떻게 개선합니까?

MongoDB는 고성능, 고 가용성 및 확장 성의 용이성을 제공하는 NOSQL 데이터베이스입니다. 테이블과 행을 사용하는 전통적인 관계형 데이터베이스가 아닌 컬렉션 및 문서의 개념을 기반으로합니다. 이로 인해 MongoDB는 특히 많은 양의 데이터 및 복잡한 계층 적 데이터 구조를 처리하는 데 특히 적합하여 평균 스택 애플리케이션의 효율성을 향상시킵니다.

평균 스택 애플리케이션에서 Angularjs는 어떤 역할을합니까?

AngularJS는 평균 스택에 응용 프로그램을 구축하기위한 강력한 JavaScript 프레임 워크입니다. 이를 통해 개발자는 HTML 어휘를 확장하여보다 표현적이고 읽기 쉬운 및 빠른 개발 환경을 만들 수 있습니다. AngularJS는 또한 HTML에 대한 데이터 바인딩 기능을 제공하여 모델과 뷰 구성 요소 간의 데이터의 자동 동기화를 가능하게합니다.

expressjs 평균 스택 애플리케이션에서 서버 측 작업을 단순화하는 방법은 무엇입니까?

expressjs는 웹 및 모바일 애플리케이션 모두에 강력한 기능 세트를 제공하는 최소화되고 유연한 Node.js 웹 애플리케이션 프레임 워크입니다. 단일 페이지, 멀티 페이지 및 하이브리드 웹 응용 프로그램을 구축하기위한 간단한 인터페이스를 제공하여 서버 측 작업을 단순화합니다. 또한 라우팅, 요청 및보기를 관리하고 미들웨어 작업을 수행하는 데 도움이됩니다.

node.js는 평균 스택 애플리케이션의 성능을 어떻게 향상 시킵니까?

평균 스택 애플리케이션을 개발하기위한 전제 조건은 무엇입니까?

평균 스택 애플리케이션을 개발하려면 JavaScript 및 HTML에 대한 기본 이해가 필요합니다. 또한 클라이언트 및 서버 측 스크립트를 이해할뿐만 아니라 NOSQL 데이터베이스 (특히 MongoDB)에 대해 알아야합니다. Angularjs, ExpressJS 및 Node.js에 익숙해지는 것이 중요합니다. 또한 JSON 및 AJAX 기술을 이해하는 것이 큰 도움이 될 것입니다.

스택은 다른 전체 스택 옵션과 어떻게 비교 되는가?

평균 스택은 전적으로 JavaScript를 기반으로하며 동일한 언어를 클라이언트 및 서버 측에서 사용할 수 있기 때문에 원활한 개발 프로세스를 제공합니다. 이것은 여러 언어의 숙련이 필요한 다른 풀 스택 옵션의 주요 장점입니다. 또한 Node.js의 비 블로킹 아키텍처는 평균 스택 애플리케이션을 빠르고 확장 가능하게하여 실시간 응용 프로그램의 첫 번째 선택입니다.

평균 스택에서 다른 데이터베이스를 사용할 수 있습니까?

MongoDB는 JavaScript와 호환되므로 MongoDB는 평균 스택의 기본 데이터베이스이지만 다른 데이터베이스를 사용할 수 있습니다. 그러나 추가 구성 및 코드 조정이 필요할 수 있으며 평균 스택에 알려진 원활한 데이터 흐름이 영향을받을 수 있습니다. 따라서 다른 데이터베이스를 사용해야 할 필요가 없다면 MongoDB를 사용하는 것이 좋습니다.

위 내용은 평균 스택 애플리케이션 계획에 대한 실제 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!