웹 구축 NodeJS express 웹 서버 만들기 (Back-end) (2)

지난번 글에서 프런트엔드의 기본적인 틀을 Quasar를 사용하여 만들어 봤다.

(아래글 참조)

Quasar 시작하기 (Front-End)

글을 시작하기 앞서 원래 나는 Web에 W 자도 모르는 상태였으며, 학부생 때 사용한 C++과 JAVA의 아주 얕은 지식이 전부였다... 현재 회사에 입사하여 받은 교육을 시작으로 첫 웹 페이지를 생성해

sympoit.tistory.com

다음은 서버 사이드단을 간단하게 만들어볼건데 가장 널리 쓰이고 접근하기 쉬운 NodeJS + express 를이용하여 웹 서버를 구축할 것이다.

가장 먼저 해야할 것은 당연 NodeJS 설치이다.

(아래 경로에서 설치 파일을 받아서 설치하자)

다운로드 | Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

버전은 글을 쓴 날짜를 기준으로 공식 Node 사이트의 LTS 버전인 16.15.0 버전을 다운 받아서 설치하였다.

(만약 앞에 Quasar 시작 글에서 이미 Node 설치를 완료했다면 건너띄기)

설치 후 커멘드 창에 node -v 를 이용하여 설치된 버전을 확인할 수 있다.

Quasar 를 만들어둔 폴더 위치에 아래와 같이 폴더를 만들자

해당 폴더를 VSCode 로 오픈 후 커멘드 창을 열고 express를 전역으로 설치하자

npm install express-generator -g

설치가 완료되면 express 기본 틀을 생성해보자

express server-express

정상적으로 생성이 완료되면 아래와 같이 서버를 실행시키고 브라우저에서 localhost:3000 으로 접근하여 정상적으로 express 서버가 동작하는지 확인해보자

npm start

접속하면 welcome 문장과 VSCode에서 GET 로그를 확인할 수 있다.

만들어진 폴더의 app.js 파일을 보면 아래와 같이 routes 기능이 되어있는 것을 확인할 수 있다. (주석 참조)

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index'); // 라우트될 경로 설정
var usersRouter = require('./routes/users');

var app = express();

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

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); // 각 path에 응답할 라우트 설정
app.use('/users', usersRouter);

// catch 404 and forward to error handler 존재하지 않는 path로 접근 시 404 페이지 retrun
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;

그렇다면 users라는 path로 이동하면 어떤 페이지가 나올까?