node JS 프레임워크 express-generator 사용해보기

이번엔 node js 프레임워크인 express-generator로 페이지 구축을 한번 시작해 보겠습니다.

 

처음으로 express-generator라이브러리를 설치해야 합니다.

 

npm install -g express-generator

설치된것을 확인합니다. 

 

저기 WARN은 일단 무시하고

 

이제 first 라는 이름의 프로젝트를 하나 만들어볼게요

express first --view=ejs

이런식으로 뜨고 

 

이 곳에 생긴걸 볼 수 있습니다.

 

-e 옵션은 ejs라는 View 엔진을 사용하겠다고 선언한 것입니다.

 

• ejs

- 태그를 통하여 html문서를 작성합니다.

- <% %> 와 <%= %>를 이용하여 서버가 전달해준 값을 사용할 수 있습니다.

• jade

- 들여쓰기 방식으로 html 문서를 작성합니다.

 

 

 

 

다음 우리는 만든 프로젝트에 들어가서 모듈을 설치해야 합니다.

 

근데 모듈이 정의가 안되어있는데 어떻게 설치하냐구요?

 

바로 우리가 만든 프로젝트안에 

package.json에 모듈에 대한 내용이 선언이 되어있습니다. 이미!!!

 

그래서 우리는 이걸 설치만 해주면 되는 것이지요 ~

 

모듈 설치하는 방법은 npm install

cd first 
npm install

 

 

자 그 다음 우리는 서버를 실행해서 페이지가 잘 뜨는지 확인을 해봐야합니다.

 

npm start

bin > www  를 보시면 3000번의 포트로 지정되어있는걸 보실수 있습니다.

 

또한 

 

localhost:3000번으로 접속하시면 서버가 잘 실행된다는것을 알 수 있습니다.

 

이 문구는 views > index.ejs를 들어가보시면 확인 할 수 있고 

 

<%= title %> 이부분을 가져오는 부분은 

 

routes > index.js 입니다.

 

var express = require('express');
var router = express.Router();

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

module.exports = router;

 자 여기 index.js 부분에서 제일 먼저 router.get부분을 살펴봅시다

 

처음 '/' 이 것은 경로를 나타냅니다. 저희가 localhost:3000 + '/' 이거와 같은 의미인 것이지요

 

그리고 req ( request -요청 ) , res ( response - 응답 ) , next -다음 부분으로 나눠져있고

 

안에는 title = Express다 라는 의미 입니다

 

그리고 저희는 index라는 거만 적고 render를 시켰는데 어떻게 index.ejs에 반영이 되었을가요?

 

답은 app.js에 있습니다.

 

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.js 12번째에

 

이 부분이 있기때문에 우리는 해당 이름을 찾아서 ejs에 반영이 된 것 입니다.

 

또한 우리는 / 만 사용했는데 어떻게 index.ejs만 사용이 되었을까요?

 

그 부분은 app.js 부분에서

 

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');


...


app.use('/', indexRouter);
app.use('/users', usersRouter);

 

이쪽 부분을 확인해 보시면

 

해당 경로에 따른 서버 실행에 대한 경로를 지정해 주는 곳이 있습니다.

 

처음 실행을 localhost:3000으로 하면 index.ejs 부분이 보일것이고

 

localhost:3000/users 로 실행을 하면  users.ejs 부분이 확인이 될 것입니다.

 

그리고 users.js부분을 확인해보면 

 

var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.send('respond with a resource');
});

module.exports = router;

이렇게 되어있는데 만약 router.get('/test',.... 을 입력해서 실행을 시켰다면

 

url 주소는 localhost:3000/users/test 가 될 것입니다.

 

미들웨어

router  함수의 콜백 함수를 보면 매개변수로 req, res, next가 있는데, 여기는 미들웨어의 개념이 있습니다.

 

미들웨어란, 자기가 수행할 부분을 수행하고 다음 과정으로 진행을 넘기는 것을 의미합니다.

 

app.js 파일에 app.use() 메서드가 작성된 부분이 있습니다.

 

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

이게 바로 미들웨어 인 것입니다.

 

형태는 다르지만 index.js 파일에서 router 함수도 미들웨어 입니다.

 

 

형태는 조금 다르지만, routes/index.js 파일에서 사용하는 router 함수 역시 미들웨어 입니다.

요점은 router 미들웨어를 사용할 때 콜백함수에

• 요청 객체인 req
• 응답 객체인 res
• 다음 미들웨어로 진행하라는 next

객체들을 인자로 넘겨줘야 한다는 것입니다.

이로 인해서, res.render() 메서드를 사용할 수 있었던 것입니다.

 

 

미들웨어를 사용하는 이유는 어떤 미들웨어에서 req, res 객체에 속성 또는 메서드를 추가했을 때,

다른 미들웨어서도 이전 미들웨어에서 추가한 req, res 객체의 속성 또는 메서드를 사용할 수 있기 때문입니다.

 

따라서 npm start로 서버가 실행되면 app.js에서 등록된 미들웨어들이 수행이 되고,

/routes/index.js 파일의 router 미들웨어에서는 app.js에서 req, res 객체에 추가했던 프로퍼티, 메서드들을 사용할 수 있게 됩니다.

 

다시 말하면, app.js 파일에서 어떤 미들웨어가 요청 객체( req )에 A라는 함수를 사용할 수 있도록 추가했다고 가정하겠습니다.

그러면, /routes/index.js 파일의 router 미들웨어에서도 요청 객체( req )에 A라는 함수를 사용할 수 있게 됩니다.

 

 

 

 

5. 미들웨어 종류

다음으로 미들웨어에는 어떤 것들이 존재하는지 살펴보겠습니다.

아래의 미들웨어 외에도 무수히 많은 미들웨어가 있으며, 단지 어떤 미들웨이들이 있는지 대충 감을 잡기 위한 용도로 정리해봤습니다.

• router
• static
• cookieParser
• bodyParser
• connect-multipart

 

 

 

 

6. req, res 객체

마지막으로 express-generator로 생성한 미들웨어의 req, res 객체에는 어떤 메서드가 존재하는지 살펴보겠습니다.

 

1) res객체 메서드

• send( [body] )
• status( [상태코드] ).send( [body] )
• json( [body] )
• redirect([ body] )

 

2) req객체 메서드

• params()
• query()
• headers()
• header()
• accepts( type )
• is( type )

이상으로 express-generator와 미들웨어에 대해서 알아보았습니다.

 

참조 https://victorydntmd.tistory.com/23?category=677306