What is MEAN?

뭘 뜻하는데요? 이 과정에서 배울 구성 요소는 무엇일까요? 4가지 기술로 구성되어 있는데 바로 이런 걸 의미합니다 M은 MongoDB를 의미하고 데이터베이스가 이 과정에서 사용할 겁니다 네 애플리케이션 사용자가 생성하는 데이터를 지속적으로 유지할 수 있는 부분입니다 사용자 데이터 자체뿐 아니라 그들이 보내는 포스트나 메시지 같은 것도 지속할 수 있죠 E는 초고속이고 초고속 j는 n이 없으면 이해하기 힘들어요 빨리 감아보죠 A와 A는 Angular을 뜻해요 네 다시 n으로 돌아가죠 E와 관련돼 있어요 Angular은 클라이언트 쪽 기술이죠 JavaScript 프레임워크예요 결국 우리가 사용자에게 동적 UI 사용자 인터페이스를 렌더링하는 데 사용할 겁니다 브라우저에서 완전히 실행되죠 서버가 아니라요 따라서 할 일은 하나예요 멋지고 유쾌하며 상호작용적이고 반응적인 사용자 인터페이스를 제공하는 거죠 그럼 n은 뭐죠? 뭔가 빠진 건 이미 보셨겠죠 네 네 하지만 서버에서 논리 실행도 해야 합니다 네, 맞아요 예를 들어 사용자 인증 같은 거요 브라우저에서 할 수 있는 게 아니죠 브라우저 코드는 쉽게 해킹당하거나 변경될 수 있고 너무 복잡하거든요 상당한 양의 리소스를 소모하고 프런트 엔드와 사용자 인터페이스는 느려질 겁니다 n은 node.js를 의미해요 JavaScript 런타임이죠 이 과정에선 서버 측 언어가 서버 측 코드에서 사용될 거예요 네 서버에서 실행되는 핵심 비즈니스 로직에서 이제 E가 관련됐어요 왜냐하면 node js는 서버에서 사용할 언어지만 Express는 node js를 위한 프레임워크로 그걸로 작업하는 게 더 쉽거든요 네 JS 자체는 익스프레스가 필요 없지만 훨씬 작업하기 쉽죠 브라우저 내 JavaScript를 위한 프레임워크처럼요 필요 없겠지만 일이 쉬워지잖아요 하지만 이 모든 걸 좀 더 자세히 살펴보죠 Angular부터 보죠 앞서 말씀드렸듯이 Angular은 브라우저의 클라이언트 쪽에서 실행됩니다 네 JavaScript에 구축된 프레임워크예요 JavaScript를 사용해서요 소위 단일 페이지 응용 프로그램을 만드는 데 사용되죠 본질적으로 프런트 엔드 로직 전체를 처리한다는 의미죠 네 사용자가 보게 될 건 Angular이 책임집니다 잠시 후 다시 얘기할게요 Angulars의 작업은 동적 데이터로 사용자 인터페이스를 렌더링하는 겁니다 동적 데이터는 중요합니다 물론 그것의 역할은 고정된 html과 css만 렌더링하는 게 아니죠 그건 JavaScript가 필요 없어요 Ui를 업데이트하는 게 일이죠 네 새 정보가 있을 때마다 가령, 새 게시물을 만들 경우 그 게시물을 보여주기 위해 즉시 ui를 업데이트하고 싶다고 하죠 , 네 사용자 입력도 처리합니다 사용자 입력 유효성을 검사하고 서버로 보내는 거죠 그게 세 번째 부분이니까요 우리 백 엔드와 소통하죠 노드 익스프레스 몽고 조합은 그 책임인 것 같습니다 네 Angular은 사용자 경험 같은 모바일 앱을 제공합니다 왜냐하면 왜냐하면 페이지를 다시 로드할 필요가 없거든요 ? 네 JavaScript로 네 , 아주 즉각적으로요 그게 모바일 앱에서 우리가 아는 느낌이죠 네 이제 그건 여전히 프런트 엔드죠 하지만 말씀드렸듯이 node.js는 백 엔드에 사용할 언어입니다 네 서버 측면에선 이 과정에서 모두 구축하죠 node JS는 서버 측 라이브러리예요 JavaScript 런타임이죠 JavaScript는 브라우저에서도 실행돼요 node js가 서버에 유용한 걸 추가하는 동안에요 파일과 작업한다든가 http 요청과 작업한다든가 이제 서버에서도 JavaScript를 사용할 수 있어요 ? nodejs는 수신 요청을 듣고 응답을 보낼 수 있어요 예를 들어 Angular 앱은 요청을 보내 모든 포스트와 노드가 그걸 처리할 수 있는 목록을 가져올 수 있습니다 뭐든 하세요 데이터베이스에 접근해 이 모든 포스트로 응답을 보내는 겁니다 Node js는 일반적으로 서버 측 로직을 실행합니다 네 인증이란 브라우저에서 실행할 수 없는 거죠 보안이나 성능 때문에요 node.js는 데이터베이스 및 파일과 상호 작용할 수 있죠 각도가 안 맞아요 어떤 파일 시스템에도 엑세스 권한이 없어요 특히 서버의 원격 컴퓨터 파일 시스템에는요 네 이론적으로는 Angular에서 데이터베이스에 연결할 수 있죠 클라이언트 쪽의 JavaScript 코드는 사용자에게 보이니까요 브라우저 개발자 도구에서 볼 수 있습니다 네 데이터베이스에 연결하면 불안할 거예요 모든 자격 증명이 노출될 테니까요 그러지 마세요 node js는 PHP의 대안이죠 Rails의 Ruby나 asp요 네트 같은 거요 독립 실행형으로 사용되는 경우는 드물죠 이 언어들과 마찬가지로요 일반적으로 프레임워크를 함께 사용하는데 그 프레임워크는 Express죠 Express는 node.js 프레임워크예요 그래서 node.js를 사용하죠 언어는 같지만 유틸리티 기능을 많이 추가했어요 추가적인 기능을 제공하거나 일반적으로 일을 쉽게 만듭니다 Express JS는 미들웨어 기반이죠 이게 무슨 뜻인지 코드로 들어가면 알게 될 겁니다 기본적으로 수신 요청을 일련의 미들웨어로 보내죠 요청에 뭔가 할 수 있는 단계예요 데이터를 읽고 조작하고 사용자가 인증됐는지 확인하거나 즉시 응답을 보내는 단계요 네 이 연결 덕분에 구조화된 코드를 쓸 수 있어요 이 과정에서 그에 관해 모두 배우게 될 겁니다 마지막, 하지만 적어도 라우팅은 포함하죠 보기를 렌더링할 수 있다는 의미입니다 Html 페이지도 함께요 네 이 과정에선 안 할 거예요 Angular이 프런트 엔드 전체를 감당해야 하니까요 이것도 다 보게 될 거예요 네 하지만 더 중요한 건 다양한 끝점으로 다양한 요청을 처리할 수 있다는 거죠 Angular을 백엔드에 연결하는 데 중요할 거예요 게시물 목록을 가져오려면 요청을 보내야죠 네 도메인/포스트 새로운 게시물을 만들려면 도메인/포스트에 다른 요청을 보내야죠 예를 들어 , c# Express JS는 라우팅 로직을 구현하게 해줍니다 다른 URL에 대한 다른 요청이 올바르게 처리되도록요 이 모든 건 코스 내내 단계별로 구현될 겁니다 요약하자면 익스프레스 JS는 없는 js를 단순화합니다 꼭 써보고 싶은 도구예요 네 만약 php 배경이 있다면 예를 들어 php의 라라벨과 비교할 수 있죠 일이 쉬워져요 한 가지 빠진 게 있는데 몽고드비예요 물론, 말씀드렸듯이 몽고db는 데이터베이스입니다 정확히는 noSQL 데이터베이스죠 소위 문서들을 소위 컬렉션에 저장해요 네 아마 SQL 데이터베이스에 대해 들어보셨을 거예요 제 SQL이나 Microsoft SQL 같은 거요 레코드가 있고 행이 있고 테이블에 저장하는 거죠 noSQL은 SQL 데이터베이스와는 다른 로직을 갖고 있지만 대체로 여전히 데이터베이스죠 네 네 사용자가 여러분 페이지를 떠나도 마찬가지입니다 그런 거죠 일시적인 데이터가 아닌 데이터는 데이터베이스에 저장돼야 합니다 noSQL은 이런 데이터베이스가 스키마를 시행하지 않는다는 걸 의미합니다 그래서 같은 테이블에 다른 조각의 정보를 가진 다른 문서를 가질 수 있어요 여기선 컬렉션이라고 부르죠 관계와도 잘 안 맞고요 이 과정에선 서로 다른 문서들을 서로 관련시킬 수 있는 걸 보시게 될 겁니다 하지만 일반적으로 관계와 관련해서는 sql 데이터베이스보다 훨씬 덜 엄격하고 유연하죠 nsql 데이터베이스는 비구조적인 문서를 저장하는 것에 더 가깝죠 거기에 구조를 추가할 순 있지만요 실제로 이 과정에서 해보겠습니다 MongoDB가 무엇인지, 각 섹션에서 어떻게 동작하는지를 다시 보도록 하죠 괜찮아요 마지막으로 노드에 쉽게 연결됩니다 멋지네요 node 익스프레스를 정확하게 통합하는 게 아주 쉽죠 Angular에 연결하지 않아도 돼요 이미 말했잖아요 이론적으론 방법을 찾을 수 있지만 그렇게 하고 싶진 않죠 사용자가 쉽게 볼 수 있는 브라우저 사이트 코드의 데이터베이스 자격 증명을 노출하고 싶지 않으니까요 브라우저의 개발자 도구에서 접근 가능합니다 네 쉽게 통합될 수 있습니다 요즘 인기 있는 이유는 융통성이 뛰어나고 확장성이 높기 때문이죠 많은 양의 처리량을 처리할 수 있어요 네 초당 요청이나 동작 작성 읽기 등을요 이 부분에 더 깊이 들어가 작업을 시작할 겁니다 이론적으로는 다른 데이터베이스로 대체할 수 있습니다 노드 익스프레싱 Angular 앱에서도 SQL 데이터베이스를 쓸 수 있어요 몽고디에 국한되지 않고 이걸 강조하고 싶은 거죠 네 제가 MongoDB를 쓰는 이유는 인기가 있고 스택도 있고 장점도 있기 때문입니다 하지만 앱과 저장하는 데이터 유형에 따라 관련이 많은 데이터라면 SQL 데이터베이스가 더 나을 겁니다 담론에서 몽고드비를 인용하겠지만 이건 필수가 아니란 걸 강조하고 싶어요 어떤 데이터베이스든 쓸 수 있어요 각도와 결절의 현실적인 연결에 핵심 논리가 적용될 겁니다 자, 이제 단일 페이지 응용 프로그램이 정확히 뭘 의미했는지 이 못된 앱의 큰 그림은 어떤 것인지 살펴보고 코스의 셋업으로 들어가 못된 앱을 제작하기 전에 말이에요