MeanStack (deprecated)
-
22장 Angular.js(앵귤러.js) MVC 모듈 만들기 완성MeanStack (deprecated) 2016. 7. 25. 23:04
이번엔 저번장에 이어서 Angular.js 로 MVC 모듈을 만들어 보겠다. 이 모듈은 $resource 팩토리를 사용해 익스프레스 API와 통신하는 Angular.js 서비스, 클라이언트 쪽 모듈논리를 포함하는 Angular.js 컨트롤러, CRUD 연산을 수행하는 인터페이스를 사용자에게 제공하는 뷰 집합을 포함한다. 먼저 모듈의 초기 구조를 잡아보자. static/ 폴더로 가서 articles 이라는 폴더를 새로 생성한다. 이 새 폴더에 articles.client.module.js 라는 모듈 초기화 파일을 생성하고 다음 코드를 넣자. angular.module('articles',[]); 위 코드는 모듈 초기화를 다루지만, 주 애플리케이션 모듈의 의존성으로 새로운 모듈을 추가 할 필요가 있다. 이를..
-
21장 Angular.js , Express (앵귤러js, 익스프레스) CRUD 모듈 만들기MeanStack (deprecated) 2016. 7. 20. 22:39
이전 장에 이어서 이번엔 RESTful API 아키텍처 설계를 간단하게 만들자. RESTful API는 애플리케이션 자원에서 수행할 수 있는 행동 집합을 표현하게 일관성 있는 서비스 구조를 제공한다. RESTful API는 몇가지 단순한 규칙을 따른다. - 자원별 기초 URI : 여기서는 http://localhost:3000/articles - 자료 구조 : 일반적으로 JSON이며, 요청내용으로 전달 된다.- 표준 HTTP 메소드 사용 : 예로 GET , POST, PUT , DELETE 이런 세가지 규칙을 사용해, 올바른 컨트롤러 메소드를 사용하게 HTTP 요청을 적절히 라우트 할 수 있다.따라서 articles API 는 다음의 라우트를 포함 할 것이다. - GET http://localhost:3..
-
20장 Node.js express 를 이용한 CRUD 모듈MeanStack (deprecated) 2016. 7. 13. 21:47
이제 Meanstack 으로 CRUD 모듈 (CREATE , READ , UPDATE , DELETE) 을 만들어 보기로 한다. 각 CRUD 모듈은 익스프레스와 angular.js 기능을 지원하는 두 MVC 구조를 포함한다. 익스프레스 쪽은 몽구스 모델, 익스프레스 컨트롤러, 익스프레스 라우트 파일로 구축된다. Angular.js 쪽은 조금 더 복잡하며, 뷰 집합, angular.js 컨트롤러 , 서비스, 라우팅 구성을 포함한다. 이제는 이 들을 결합하여 Article CRUD 모듈을 구축 할 것 이다. (한마디로 글을 입력, 수정, 삭제 하는 기능) 먼저 익스프레스 부분부터 시작하자. 글을 저장하고 검증하기 위해 사용 될 몽구스 모델을 생성한다. 다음으로 모듈의 비즈니스 논리를 다루는 익스프레스 컨트롤..
-
19장 Angular.js (앵귤러js) 의 인증관리MeanStack (deprecated) 2016. 7. 12. 22:17
이번 장에서는 angular.js 를 이용한 인증관리에 대해 알아보겠다. angular.js 인증 관리는 angular.js 공동체에서 가장 많이 논의도니 사안 중 하나이다. 서버가 인증된 사용자에 대한 정보를 들고 있는 동안 angular.js 애플리케이션이 해당 정보를 인지하지 못한다는 문제가 있다. 이를 해결하기 위 해서 익스프레스 애플리케이션이 user 객체를 직접 EJS 뷰에 출력하고 angular.js 서비스를 사용해 해당 객체를 감싸게 만드는 해법이 있다. 인증된 user 객체를 출력하려면 , 여러 곳을 변경해야 한다. 먼저 app/controllers 폴더의 index.server.controller.js 파일을 변경하자. exports.render = function(req,res) { ..
-
18장 Angular.js 를 이용한 라우팅 처리MeanStack (deprecated) 2016. 7. 7. 23:57
이번 장 에서는 Angular.js 를 이용한 라우팅 처리를 해볼 것 이다. Angular.js 가 몇가지 라우팅 기능을 제공하기 위해서는 ng-include 지시자를 지렛대로 활용할 수 있지만, 여러 뷰에서 사용하려면 지저분하다. 라우팅 문제를 해결하기 위해, Angular.js 팀은 사용자가 해당 경로로 탐색할 때 마다 표시될 템플릿과 이에 대응하는 URL 경로를 정의하게 만드는 ngRoute 모듈을 개발했다. Angular.js 가 단일 페이지 프레임워크이므로, ngRoute는 브라우저에서 전적으로 라우팅을 관리할 것 이다. 이는 서버에서 웹 페이지를 가져오는 대신, Angular.js 가 정의된 템플릿을 읽어, 컴파일하고, 특정 DOM 엘리먼트 내부에 결과를 위치시킬 것임을 의미한다. 서버는 정적..
-
17장 Angular.js 를 이용한 MVC 엔티티MeanStack (deprecated) 2016. 7. 5. 01:12
이번 장에서는 Angular.js 를 이용한 MVC 패턴을 를 구성해보겠다. MVC 패턴을 구현하기 위해 먼저 , static 폴더에 example 이라는 폴더를 생성하고 , 하위폴더로 controllers 와 views 라는 폴더를 만들자. 그리고 static/example 폴더 안에 example.client.module.js 라는 파일을 만들자. 이 파일에 angular.module() 메소드를 사용하여 새로운 angular.js 모듈을 생성할 것 이다. 여기에 다음 코드를 넣자. angular.module('example', []); 위 코드는 angular.js 모듈을 생성할 것 이다. 하지만 여전히 애플리케이션 페이지에서 모듈 파일과 주 애플리케이션 모듈의 의존성으로 모듈을 포함 할 필요가 있..
-
16장 Angular.js 설치 , bower 를 이용한 의존성 관리MeanStack (deprecated) 2016. 6. 30. 23:09
드디어 Mean stack 의 마지막 조각 Angular.js 를 설치 할 때가 되었다. 현재 Angular.js 2 가 나왔으나 Typescript 를 베이스로 하고 기존 angular.js 와 바뀐점이 많기에 여기서는 기존 Angular.js 로 설치하고 만들어 보겠다. Angular.js 2로 만드는 Web application 은 따로 준비해 뒀으니 이번 Meanstack 이 끝나면 적어 볼 생각이다. 그리고 설치 전 Angular.js 작동원리 를 보고오면 이해가 더 쉬울 것 이다. Angular.js 는 기본적으로 Front-end 프레임 워크 이기 때문에 설치하려면 애플리케이션의 주 페이지에 Angular.js 의 자바스크립트 파일을 포함해야 한다. Angular.js 의 자바스크립트 파일을..
-
15장 passport 모듈을 이용한 사용자 인증 (2)MeanStack (deprecated) 2016. 6. 26. 01:18
저번 장에 이어서 이제는 실제로 passport 모듈을 사용할 인증페이지 즉, 가입화면과 로그인페이지를 만들 것 이다. 먼저 app/views 폴더로 가서 signup.ejs 라는 가입화면을 만들어보자. Username : Email : UserID : Password : signup.ejs 뷰는 단순히 title 변수를 출력하는 ejs 태그와 messages 리스트 변수를 출력하는 EJS 루프를 포함한다. 그리고 바로 로그인 화면을 이어서 만들어보자. app/views 폴더로 가서 signin.ejs 라는 파일을 만들자 . UserID : Password : Signin 은 더욱 단순하다. Signup 과 같이 타이틀과 메시지를 출력하는 부분과 아이디, 패스워드를 받는 부분이 끝이다. 이제 모델과 뷰과..