[Q-Admin] 프로젝트 생성 (Express + AngularJS) (2)

[Q-Admin] 프로젝트 생성 (Express + AngularJS) (2)

  먼저 앞으로 이어질 글들은 Express + AngularJS 프로젝트를 만들때 중요했던 흐름 위주로 작성할 예정이다. 따라서 하나하나 세세하게 순서를 설명하지는 않을 것이다.

※ 참고 사이트

프로젝트를 만들며 참고했던 사이트들 이다. 정말 상세하게 잘 나와있으니 처음 시작하시는 분들이 참고하시면 좋을 것 같다.

(1) https://coderwall.com/p/ww38iq/angular-and-express-setup

(2) http://blog.jeonghwan.net/lectures/todomvc-angular/1/

(3) http://corpus.hubwiz.com/2/node.js/17451834.html

(4) http://blog.thedigitalgroup.com/ujwalap/2015/06/12/angularjs-in-node-js-and-expressjs-framework/

(5) http://alexband.tistory.com/31

(6) https://github.com/btford/angular-express-seed

1. Express generate

npm install -g express  #install globally to add express binary to PATH

mkdir myapp

cd myapp

express           # initialise an express skeleton app

npm install   # install all the site dependencies

 

2. Static Files

 Angular 의 template (html, jade) 및 프론트엔드 코드들이 브라우저로 다운로드 되어야 하는데 이러한 파일들을 정적파일(Static Files)이라고 부르고 요청에 따라 Express가 이를 제공해 주어야한다. 이를 위해 static file 을 설정해야 한다.

app.use(express.static('폴더명')); 

위 코드로 인해 브라우저가 요청하는 파일은 설정한 폴더에서 제공할 수 있다. 저 폴더에 우리가 Angular로 만든 프론트엔드 부분이 있어야 한다.

예를들어 프론트 엔드 부분의 코드가 들어있는 폴더를 'client'라고 한다면 서버 코드에 app.use(express.static('../client'));를 추가하면 된다.

그러나 경로를 계산하는데 조금 까다로울 수 있다. 따라서 서버의 절대 경로를 계산해서 설정하는 것이 확실하다. 그래서 path 모듈과 __dirname 글로벌 변수를 사용하여 절대 경로를 계산하여 코드를 작성한다.

app.use('/', express.static(path.join(__dirname, '../client')));

3. Partials

 

 Partials의 정확한 의미는 단정할 수 없지만... '일부분, 부분 이라는 뜻을 갖고 있으며, 구글링을 통해 유추해본 결과 클라이언트 코드 부분에서 template에 해당되는 jame, html 파일 같은 부분을 말하는것 같다.

 angular의 template에 사용되는 jade, html 파일을 사용자로부터의 요청에 응답하기 위해서 app.js 에서 라우팅 처리를 해주어야 한다.

먼저 app.js 에서는 아래와 같은 코드를 추가하고,

app.get('/partials/:name', routes.partials);

그리고 routes/partials.js 에서는 아래 코드를 추가한다.

exports.partials = function(req, res) {

res.render('partials/' + req.params.name);

};

4. Catch-All Route

 

 프론트엔드를 위해 작성된 angular에서는 css, js 및 image파일들을 요청할 것이다. 그렇다면 서버에서 이를 제공해 주기 위해서는 라우팅 처리를 해주어야 한다.

app.get('*', routes.index);

* 를 사용함으로 써 모든 요청은 index.j에서 처리될 것이고, 우리는 index.js 에서 Static Files를 위해 설정했던 경로를 이용하여 파일을 제공해 주어야 한다.

5. Configure Angular

 우리가 angular 로 작성할 또는 작성한 프론트엔드에는 index.html 가 필요하다. express를 생성하며 만들어졌던 views 폴더 아래에 있는 index.jade 또는 index.html파일을 angular에서 사용하는 index파일의 내용으로 변경한다. 그 외에 프론트엔드에서 사용되는 css, js와 같은 정적 파일들은 client 폴더안에서 작성하면된다.