[node.js] express-generator에 관하여

안녕하세요, 초짜입니다.

이번에는 express-generator에 대하여 포스팅하겠습니다.

 

express-generator를 간단히 해석하자면

express : express

generator : 생성기? 발생기?

express 생성기 정도로 해석할 수 있겠군요.

여기서 express는 node.js에서 동작하는 웹 프레임워크입니다.

이 express를 사용해서 웹 개발을 간편하게 할 수 있습니다.

이러한 express의 구조를 쉽게 만들어주는 것이 express-generator입니다.

 

그니까 node.js 웹 개발을 쉽게 해주는 express를 쉽게 만들어주는..??

그런 역할로 보면 되겠습니다.

저는 굉장히 애용하고 있습니다.

 

express-generator 설치

설치 방법은 간단합니다.

npm install express-generator -g

여기서 -g는 -global의 약자로 붙이면 전역 설치가 됩니다.

 

express-generator 사용 방법

express가 설치되었다는 가정 하에 사용을 하자면

1. express --view=pug
2. express --view=ejs

1. pug를 기반으로 express 구조화

2. ejs를 기반으로 express 구조화

 

이렇게 사용할 수 있습니다.

pug와 ejs는 템플릿 엔진입니다.

문법은 HTML과 비슷해 보이며 특정한 장소에 동적인 부분을 넣기 위해 사용됩니다.

 

저는 ejs를 주로 쓰므로 ejs를 기준으로 구조를 살펴보겠습니다.

app
    - app.js
    - bin
    	- www
    - public
    	- images
        - javascripts
        - stylesheets
    - routes
    	- index.js
        - users.js
    - views
    	- error.ejs
        - index.ejs
    - package.json

구조는 이런 식입니다.

app.js나 index.js를 살펴보면 ES6 문법이 적용이 안 된 것을 볼 수 있습니다.

그런 부분만 조금씩 바꾸면 될 것 같습니다.

하나씩 살펴보겠습니다.

 

express 구조

app.js

app.js는 가장 메인이 되는 파일이며 설정 부분과 같은 것이 담겨 있습니다.

var createError = require('http-errors');
. . .
var app = express();
. . .
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
. . .
app.use('/', indexRouter);

미들웨어에 관한 것도 있고

템플릿 엔진 설정도 있고

라우팅 설정 등 다양한 설정 코드가 존재합니다.

 

bin

bin 디렉토리에는 www 파일 하나만 존재합니다.

코드를 보시면 포트 설정과 같이

서버를 구동하는 코드가 있습니다.

app.js와 노드의 HTTP를 연동하는 작업이 이루어집니다.

 

public

안에는 images, javascripts, stylesheets 디렉토리가 있는데

그 말대로 이미지, 자바스크립트, CSS와 같은 정적 파일을 보관합니다.

 

routes

index.js와 같이 라우팅을 다루는 디렉토리입니다.

router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
 });

기본적으로 이렇게 되어 있을텐데 간단히 해석하자면

GET 방식으로 URL "/"가 호출되었을 경우

"index"를 렌더링한다는 의미입니다.

또한 렌더링하면서 title에는 "Express"라는 값을 전달한다는 것입니다.

 

views

템플릿 엔진 파일이 들어있습니다.

위에 routes에서 "index"를 렌더링한다고 되어있는데

이 때 렌더링되는 "index"가 바로 이 디렉토리에 있는 index.ejs입니다.

말 그대로 보여주는 부분입니다.

 

package.json

이 파일을 열어 보시면 앱의 이름, 버전 등이 기록되어 있습니다.

사용되는 모듈도 담겨 있는 버전 관리를 담당하는 파일입니다.

npm은 package.json을 참고하여 모듈을 업데이트 할 수 있습니다.

 

 

이렇게 express-generator와 express의 구조에 대해 알아봤습니다.

express-generator를 사용하는 것도 좋지만

직접 일일히 짜는 것도 좋은 방법이라고 생각합니다.

부족한 내용이지만 봐주셔서 감사합니다.

 

이번 포스팅은 여기까지입니다. 감사합니다.

초짜, 웹, web, 웹개발, 웹프로그래밍, 프로그래밍, program, programming, HTML, ejs, jade, pug, 템플릿 엔진, 템플릿, 엔진, templete, engine, express, express-generator, generator, 익스프레스, 제너레이터, 익스프레스제너레이터, js, javascript, style, node, node.js, npm, module