Node Express로 간단히 라우팅 구현해보기

백나라·2023년 12월 8일
expressnode.js

express

목록 보기
1/1
post-thumbnail

Node Express

Node Express는 Node.js 환경에서 동작하는 웹 애플리케이션 프레임워크이며, Node.js 기반 웹 및 모바일 앱 개발을 지원하는 편리한 기능을 지원합니다.

편리하게 Express 프로젝트 환경 구성하기

  1. npm i -g express-generator

    express-generator는 쉽게 노드 프로젝트를 생성하는데 유용한 패키지입니다. 프로젝트에 필요한 기본적인 pakage.json과 폴더 및 파일 구조 등을 잡아줍니다.

    • -g : 글로벌 위치

  2. express 프로젝트명 --view=ejs

    새로운 express 프로젝트를 생성하고, 해당 프로젝트에서 템플릿 엔진으로 ejs를 사용하하여 mvc 패턴의 개발환경을 구성합니다.

  3. cd 프로젝트명 , npm i , npm start

    생성된 프로젝트 폴더로 이동해서 package.json에 명시된 모듈을 설치해주고, 설치가 완료되면 현재 프로젝트를 실행해줍니다.

    • npm start명령어를 입력하면, package.json의 script 중 start 속성값으로 입력된 명령어가 실행됩니다.
      // packge.json
"scripts": {
    "start": "node ./bin/www"
  }
    • node 명령어와 함께 bin폴더의 www파일이 실행되면서 웹서버 환경이 구성됩니다.

  4. nodemon 설치 및 명령어 수정

    npm i -g nodemon 명령으로 nodemon을 설치하고, package.json의 start명령어 부분의 node 부분을 nodemon으로 수정해줍니다.

    • nodemon을 사용하면 변경사항을 저장하면 서버를 재실행시켜줘서 바로 변경사항이 반영됩니다.

Express 프로젝트 구성

noderoutingapp 이름으로 만들어진 express 프로젝트입니다.

  • bin
    • www: 개발 환경에서의 백엔드 앱을 서비스하기 위한 로컬 웹서버 환경을 구성해주고 노드 백엔드 앱 서비스 서버 환경을 제공
  • node_modules
    • package.json의 dependencies에 추가된 패키지와 설치된 버전이 추가됨.
  • public
    • 정적인 웹 리소스 파일이 담기는 폴더(브라우저에서 호출될 소스)
  • routes
    • mvc 패턴의 컨트롤러
    • 사용자 요청을 인식해서 주소체계를 통해 응답을 처리
  • views
    • 템플릿 엔진을 사용하여 동적인 HTML 페이지를 생성
    • ejs 파일이 들어감

정적 페이지 렌더해보기

  1. public 폴더에 sample.html 파일을 추가해서 간단히 내용을 입력한다.
  2. http://localhost:3000/sample.html로 접속해본다.

라우팅 구현

기본적인 라우팅 정의입니다.

var express = require('express');
var app = express();

app.get('/', function(req, res) {
  res.send('hello world');
});
  • 루트(’ / ’) 위치로 get 요청이 오는 것에 대한 라우팅 처리 입니다.
  • 라우트 메소드는 get, post, delete, put 등의 HTTP 메소드 중 하나를 사용합니다.
  • 첫 번째 매개변수는 라우팅할 주소를,
    두 번째 매개변수에는 해당 주소체계로 라우팅 메소드와 일치하는 요청을 했을 때 어떻게 응답할지에 대한 함수를 넣어줍니다.

컨트롤러 분리해서 라우팅 구현해보기

⛳️ http://localhost:3000/sample 주소에 접속하면 views/sample/nara.ejs 파일이 렌더되도록 하기.

1. routes 폴더에 sample 라우터 파일 만들기

// routes/sample.js
var express = require('express');
var router = express.Router();

router.get('/', function (req, res, next) {
  res.render('sample/nara.ejs', { nara: '백나라' });
});

module.exports = router;
  • 주소 문자열은 ‘/’ 으로 설정했지만 app.js파일에 주소체계에 대한 라우팅 설정을 따로 해줄 것 입니다.
  • res.render
    • 첫 번째 매개변수: 렌더링할 ejs의 템플릿의 경로(views위치를 기준으로 작성할 것)
    • 두 번째 매개변수: 템플릿에서 사용할 변수와 값을 객체형태로 넣어줌

2. 동적으로 응답할 페이지 만들기

// views/sample/nara.ejs

<!doctype html>
<html>
  <head>
    <title><%= nara %></title>
  </head>
  <body>
    <h1><%= nara %></h1>
    <p>HI! <%= nara %></p>
  </body>
</html>
  • <%= 변수명 %> 의 형태로 필요한 위치에 변수를 삽입해줍니다.
  • nara라는 변수에 ‘백나라’ 라는 문자열로 html이 생성돼서 응답이 됩니다.

3. app.js에서 sample라우터를 불러와서 주소체계 정의하기

var sampleRouter = require('./routes/sample');

app.use('/sample', sampleRouter);
  • 도메인주소/sample로 시작하는 모든 요청에 대해 sampleRouter가 실행됩니다.

4. http://localhost:3000/sample 접속해보기

동작 흐름

  1. http://localhost:3000/sample 접속으로 GET 요청
  2. /sample 로 시작하는 요청에 대해서 sampleRouter 실행
  3. sampleRouter내에 주소와 get 메서드에 해당하는 라우터 실행
  4. sample/nara.ejs 파일로 동적으로 html을 만들어서 응답

💡정적 페이지 위치와 라우팅 주소가 겹치면 어떻게 될까?

public 폴더의 루트 위치에 index.html 파일을 만들어보다 문득 궁금증이 생겼습니다.

브라우저에서 도메인의 루트 위치에 접속했을 때 public에 추가한 index.html이 렌더되는 것을 확인했습니다.

“ 왜 views 템플릿의 index.ejs가 렌더되지 않는걸까? “

기본적으로 index.js 파일이 routes폴더에 구성되어있고, 주소체계가 루트로 돼있어서 views의 index.ejs가 렌더되어야 할 것 같은데, 내가 추가해놓은 정적파일이 렌더되는 이유는 무엇인지 알아보았습니다.

해결 과정

우선, 정적파일이 아닌 라우터에 의한 동적파일이 렌더되도록 하려면 어떻게 해야하는지를 찾아보았습니다.

stackoverflow에 나오는 대부분의 대답은 미들웨어 위치를 옮기라는 내용이었습니다.

d아직 미들웨어에 대한 개념이 없기 때문에 미들웨어에 대해 살짝 알아보자면, 미들웨어는 서버가 요청을 받은 후 응답이 클라이언트에 전송되기 전에 작동하는 기능입니다.

express 프로젝트 환경을 구성하면 app.js에 기본적으로 정의되어있는 미들웨어들이 있는데,

app.set('views', path.join(__dirname, 'views')); // 정적 파일 설정에 대한 미들웨어
app.use('/', indexRouter); // 라우터에 대한 미들웨어

순서를 살펴보면 정적파일에 대한 설정이 먼저 정의되어 있고, 라우터에 대한 미들웨어가 나중에 정의되어있는 걸 알 수 있습니다. 미들웨어는 체인으로 배열되어 있으며 순서대로 호출됩니다.

요청이 들어오면 미들웨어가 순서대로 실행되는데, 정적 파일에 대한 미들웨어가 실행되었고 마침 적합한 index.html 정적파일이 존재했기 때문에 index.html파일을 response하면서 응답이 종료가 되어 다음 미들웨어는 실행되지 않는 것 입니다.

동일한 상황에서 정적파일이 아닌 라우팅에 의한 동적파일이 렌더되도록 하려면 정적파일에 대한 미들웨어 정의를 라우터 미들웨어 다음 순서로 옮기면 됩니다.

하지만 정적 파일 미들웨어는 정적 파일 요청에 대한 처리를 담당하므로, 정적 파일이 있는 경우 불필요한 라우팅 로직을 실행하지 않고 빠르게 응답을 생성할 수 있기 때문에 정적파일 미들웨어를 먼저 등록하는것이 권장된다고 합니다.

< 참고한 글 >

Express 앱에서 사용하기 위한 미들웨어 작성

Complete Guide to Express Middleware

profile
백나라

0개의 댓글