Express generator (Express 프레임워크 구조화 및 관리)

Express Generator

Node.js 에서 Express 프레임워크를 사용하면서 지금까지는 단순하게 npm init으로 package.json을 만들고 dependency를 설정하고, npm install로 모듈 설치하고, app.js파일 만들고, 라우트할꺼 라우트하고, 뷰 엔진은 뭐를 쓸 것이며 그 뷰 파일들은 어디에 있고 기타등등... 의 일을 해왔다.

일종의 설정이었다.

프로젝트 디렉토리가 어떤 구조를 가지며 Express에서 어떤 미들웨어, 모듈들을 사용할 것인지 등에 대한 설정.

이러한 설정을 편리하게 일반적인 구조로 만들어주는 것이 바로 Express Generator다.

이용 방법은 굉장히 간단하다.

1. 명령프롬프트에 "npm install express-generator -g" 한 줄을 입력한다.

2. 프로젝트를 만들 경로에서 "express [프로젝트디렉토리명]"을 실행한다.

* ex) "express myapp" 이라고 입력하면 myapp이라는 디렉토리가 생성되면서 그 안에 많은 폴더와 파일이 생김.

3. 프로젝트 디렉토리에서 "npm install" 을 입력해서 package.json의 모듈들을 설치한다.

4. 윈도우는 "set DEBUG=myapp:* & npm start" 를, 맥&리눅스는 "DEBUG=myapp:* & npm start"를 입력한다.

* 4의 명령을 입력하는 이유는 설치된 애플리케이션의 환경변수에 추가하기 위함이다.

"express myapp" 말고도 옵션을 추가해서 생성할 수 있다. (누구나 환경이 똑같지 않으니까)

위 사진처럼 "express -h" 를 입력해보면 옵션이 나온다.

"express myapp -c less" 이렇게 하면 css엔진을 less로 설정해서 express generator가 실행되고

"express myapp --pug" 이렇게 하면 뷰엔진을 pug로 설정해서 express generator가 실행된다.

---

구조

Express generator의 명령을 통해 생성한 디렉토리 구조는 위 사진과 같다.

그러면 우리가 개발이전에 필요한 라우트, 뷰엔진, 서버설정등이 되어있다.

app.js , bin/www 등에 코드가 작성되어있는데 배운 것을 토대로 분석하는 것도 공부다.

아주 간단히 살펴보면

bin/www 는 자바스크립트 파일인데 서버 설정에 관련되어있고 사실상 노드가 실행될때 이 파일을 실행시킨다.

"node ./bin/www"

이 파일에서 app.js를 요청해서 실행시키는 구조다. 서버에 대한 설정만하게 분리했다.

app.js에서는 모듈들을 요청하고 설정하며 라우트, 엔진등도 설정한다.

layout.pug파일로 뷰들의 중복 코드같은 것을 처리하고, routes디렉토리의 js파일들이 개발하는 애플리케이션에서 필요한 각각의 일을 수행하게 구성하면 된다.

public 폴더에서는 보다시피 애플리케이션에서 사용하는 이미지, javascript, css파일들을 따로 빼두고 .pug파일에서 링크해서 사용한다.

필요에 따라서 다르게 구성할 수도 있으니 어떤 식으로 구성하는 것은 자유다.

다만 아직 나같은 초보 개발자는 이렇게 일반적으로 구조화된 상태에서 MVC모델처럼 개발하는 것이 좋다.