Section 20: Advanced Server-Side Code: Dynamic Routes, Error Handling, Patterns - Building a More Dynamic & Realistic Backend

The goals

💪🏻Dynamic Routes

✌🏻Custom Middleware & Error Handling

👍🏻Optimizing Our Code

 

Why we need Dynamic Routes

we can't make routes with speculation that how many data would be generated.

In this case, we use dynamic routes so it can generate itself while user adding data

 

res.render()

If we pass two parameters in render, it means that we can use the second item in the first file and usually we call it as a key

relativa path vs absolute path

when we use link, if we don't use '/' then it's a relative path. But if we use '/' in front of the path, then it's absolute path.

To prevent some errors in the future after modifying sturucture, it is recommended that we use abolute path with '/'.

Especially when we separate 'head' itself as an another file and share or connect to other file so we don't have to repeat, in this case we should write the path absolutely not to make an error.

req.params

It takes keys or properties form the path we define.

So, it should be the same as we set on our path. Here, we set id, so it should be params.id

 

UUId (Uniform Unique ID)

 

When URL has a specific 'id' of item and we want to show the detail of that specific item

app.get('/restaurants/:id', function (req, res) {
  const restaurantId = req.params.id
  const filePath = path.join(__dirname, 'data', 'restaurants.json');

  const fileData = fs.readFileSync(filePath);
  const storedRestaurants = JSON.parse(fileData);
  res.render('restaurant-detail', {rid: restaurantId})
});

firstly, bring the data from json file and jsonify

app.get('/restaurants/:id', function (req, res) {
  const restaurantId = req.params.id
  const filePath = path.join(__dirname, 'data', 'restaurants.json');

  const fileData = fs.readFileSync(filePath);
  const storedRestaurants = JSON.parse(fileData);

  for (const restaurant of storedRestaurants) {
    if (restaurant.id === restaurantId) {
      res.render('restaurant-detail', {rid: restaurantId})
    }
  }
});

and use for loop to check if the id of the data is the same to the data we wanna show.

And we used 'for of' loop since it's an array.

app.get('/restaurants/:id', function (req, res) {
  const restaurantId = req.params.id
  const filePath = path.join(__dirname, 'data', 'restaurants.json');

  const fileData = fs.readFileSync(filePath);
  const storedRestaurants = JSON.parse(fileData);

  for (const restaurant of storedRestaurants) {
    if (restaurant.id === restaurantId) {
      return res.render('restaurant-detail', {rid: restaurantId})
    }
  }
});

After we found the data, we should finish this funtion. So we return the value to end the execution of this code.

But, here when we render we set restaurant as a key and give the data from array, const restaurant.

Then where this key restaurant from?

This is from 'restaurant-detail' file. If this key is changed, then we need to change this for loop key also.

 

We should put render out of for loop, since we need to render '404' after checking all the item in storedRestaurant

app.get('/restaurants/:id', function (req, res) {
  const restaurantId = req.params.id
  const filePath = path.join(__dirname, 'data', 'restaurants.json');

  const fileData = fs.readFileSync(filePath);
  const storedRestaurants = JSON.parse(fileData);

  for (const restaurant of storedRestaurants) {
    if (restaurant.id === restaurantId) {
      return res.render('restaurant-detail', {
        restaurant: restaurant
      })
    }
  }
  res.render('404');
});

 

How we show error page when user input the wrong path?

It's impossible to make every possible cases as paths.

So we need to write code for all the general cases.

In this case, we can just write code for the general case and put it at the last.

So our computer will read our code from the head and when sithe the cases by the code we wrote, and left over which is not in any cases we wrote, will use this error code.

And there's no filter so it will apply for all the left over.

 

 

How to show error page for server error page

500 error code means that something went wrong on the server.

But we already put error handling code for general case, so we need more something special.

So here, we will give 4 parameters to the function and it's telling to express that it's special code and it will work everywhere if there are some cases.

 

Error Handling

Error Handling refers to how Express catches and processes errors that occur both synchronously and asynchronously. Express comes with a default error handler so you don’t need to write your own to get started.

Catching Errors

It’s important to ensure that Express catches all errors that occur while running route handlers and middleware.

Errors that occur in synchronous code inside route handlers and middleware require no extra work. If synchronous code throws an error, then Express will catch and process it. For example:

app.get('/', (req, res) => {
  throw new Error('BROKEN') // Express will catch this on its own.
})

For errors returned from asynchronous functions invoked by route handlers and middleware, you must pass them to the next() function, where Express will catch and process them. For example:

app.get('/', (req, res, next) => {
  fs.readFile('/file-does-not-exist', (err, data) => {
    if (err) {
      next(err) // Pass errors to Express.
    } else {
      res.send(data)
    }
  })
})

Starting with Express 5, route handlers and middleware that return a Promise will call next(value) automatically when they reject or throw an error. For example:

app.get('/user/:id', async (req, res, next) => {
  const user = await getUserById(req.params.id)
  res.send(user)
})

If getUserById throws an error or rejects, next will be called with either the thrown error or the rejected value. If no rejected value is provided, next will be called with a default Error object provided by the Express router.

If you pass anything to the next() function (except the string 'route'), Express regards the current request as being an error and will skip any remaining non-error handling routing and middleware functions.

 

How to use 'next' method?

 

Status codes

We can set our code specifically what status codes we wanna give, but sometimes

We are showing the error page but status code says it's okay so we need to fix this status code.

 

app.get('/restaurants/:id', function (req, res) {
  const restaurantId = req.params.id
  const filePath = path.join(__dirname, 'data', 'restaurants.json');

  const fileData = fs.readFileSync(filePath);
  const storedRestaurants = JSON.parse(fileData);

  for (const restaurant of storedRestaurants) {
    if (restaurant.id === restaurantId) {
      return res.render('restaurant-detail', {
        restaurant: restaurant
      })
    }
  }
  res.status(404).render('404');
});

 

 

Method chaining

app.use(function (req, res) {
  res.status.render('404');
})

connect the methods and use together

Status simply returns an updated response object.

So, here, technically we are still calling render on our response object, but on a slightly updated one.

 

Code refactoring

Refactoring means that "rewriting parts of the code" / "restructuring code" - always with the intention of keeping the individual code snippets short, concise and maintainable.

 

How can we use module we made in other page

module.exports = {
  getStoredRestaurants: getStoredRestaurants
}

left side is the key name we wanna use in other files, and right side is the module we wanna export. So we can't change this left sife name.

 

 

How to change the path to parent path

const filePath = path.join(__dirname, '..' ,'data', 'restaurants.json');

we put ".." it means that we will move to the parent directory from where we are now.

 

Express Router

If we wanna separate the basic code in app file and move some common code to other files, then how should we do?

 

const express = require('express');

app.get('/', function (req, res) {
  res.render('index');
});

app.get('/about', function (req, res) {
  res.render('about')
});

We brought some codes from our 'app' file cause it's basic code.

But it's based on 'app' but we can't declare here again. Because it's only for our real 'app' file.

So, in this case, we can use Express Router method.

 

const express = require('express');

const router = express.Router();

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

router.get('/about', function (req, res) {
  res.render('about')
});

module.exports = router;

 

So, we changed 'app' to 'router'.

 

And we should import it to use in app file then we can use like this:

 

const resData = require('./util/restaurant-data');
const defaultRoutes = require('./routes/default');

const app = express();

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

app.use(express.static('public'));
app.use(express.urlencoded({
  extended: false
}));

app.use('/', defaultRoutes);

 

This will be EVERY request. Every request starts with "/" since every request is at least targeting <your-domain>/something (even if it's just <your-domain>/).

 

When we use this, if we set it as 'app.use('/restaurants', defaultRoutes), then in this case, in default file all the routes work as '/restaurants/~' so we don't use like this.

 

Query Parameters

Array.prototype.sort()

The sort() method sorts the elements of an array in place and returns the reference to the same array, now sorted. The default sort order is ascending, built upon converting the elements into strings, then comparing their sequences of UTF-16 code units values.

The time and space complexity of the sort cannot be guaranteed as it depends on the implementation.

Syntax

// Functionless
sort()

// Arrow function
sort((a, b) => { /* … */ } )

// Compare function
sort(compareFn)

// Inline compare function
sort(function compareFn(a, b) { /* … */ })

Parameters

compareFn Optional

Specifies a function that defines the sort order. If omitted, the array elements are converted to strings, then sorted according to each character's Unicode code point value.

a
The first element for comparison.

b

 

The second element for comparison.

 

 

In JavaScript, we can use the ">" and "<" operators not just on numbers but also on strings!

E.g. "Tornado" > "Weather" yield "true"

 

router.get('/restaurants', function (req, res) {
  const storedRestaurants = resData.getStoredRestaurants();

  storedRestaurants.sort(function(resA, resB) {
    if (resA.name > resB.name) {
      return 1
    } 
      return -1
    }
  );

 

If we define button in <form> but there's no other items then?

It will automatically submit the data

 

    <form action="/restaurants" method="GET">
      <input type="hidden" value="asc" name="order">
      <button class="btn">Change Order</button>
    </form>

But if we just submit this form, there would be no data. So we put 'input' tag there and set type as 'hidden'.

So, user would not be able to input some data but we can set as developers.

So here we set 'value' as 'asc' which means ascending.

So we will reload this page with some slight change.

 

 

In the Server-side code, we can access to the query parameter value, and change the sorting based on the query parameter value

 

router.get('/restaurants', function (req, res) {
  let order = req.query.order
  
  if (order !== 'asc' & order !== 'desc') {
    order = 'asc';
  }

 

We can use this code to change our sorting code.

 

 <form action="/restaurants" method="GET">
      <input type="hidden" value="<%= nextOrder %>" name="order">
      <button class="btn">Change Order</button>
 </form>

Since we fix our code like this, every time when we click the button, it changes the data would be submitted by the form.

 

Query parameter vs Route parameter in Dynamic routes

"동적 라우트"의 라우트 매개변수

이 섹션에서는 라우트 매개변수를 활용하여 URL 경로에서 동적 값을 추출하는 "동적 라우트"에 대해 배웠습니다.

예를 들어:

router.get('/restaurants/:id', ...)

이 예에서 id는 이 URL/경로를 방문할 때 다른 값을 유지하는 라우트 매개변수입니다. 예를 들어, 사용자가 /restaurants/r1을 입력하면 id는 r1과 같습니다.

라우트 매개변수는 하나의 단일 경로를 사용하여 구체적인 라우트 매개변수 값에 따라 다른 데이터를 로드할 수 있으므로 매우 유용합니다.

라우트 매개변수(위의 예에서:id)가 URL 경로의 핵심 부분임을 이해하는 것이 중요합니다. 예를 들어 위의 경로에서는 /restaurants만 처리되지 않습니다. 라우트 매개변수에 대한 값이 없기 때문입니다.

 

쿼리 매개변수

또한 이 섹션에서 "쿼리 매개변수"라는 개념에 대해서도 배웠습니다.

"쿼리 매개변수"와 "라우트 매개변수"를 혼동하기 쉽지만 이들은 서로 다른 문제를 해결하는 근본적으로 다른 개념입니다.

"라우트 매개변수"(위 참조)가 선택 사항이 아니고 라우트 정의의 핵심 부분인 경우(즉, 라우트 매개변수에 값이 제공되지 않으면 로드가 활성화되지 않음) "쿼리 매개변수"는 완전히 선택 사항입니다!

"쿼리 매개변수"는 일반적으로 URL 경로에 추가 정보를 추가하는 데 사용됩니다.

예를 들어:

/restaurants?order=asc

여기서 "order" 쿼리 매개변수는 "asc" 값으로 추가됩니다(쿼리 매개변수는 항상 ?기호를 통해 "주 경로"와 분리됨).

기본적으로 쿼리 매개변수는 아무 작업도 수행하지 않습니다!

웹사이트 방문자는 원하는 만큼 추가할 수 있습니다. 링크를 통해 추가하거나 이전 강의에서와 같이 GET 요청을 통해 양식을 제출하여 추가할 수 있습니다(참고: GET 양식 대신 이전 강의에서 쿼리 매개변수로 링크를 구성할 수도 있었습니다. - 하지만 숨겨진 입력 필드에 대한 아이디어를 소개하고 싶었어요.)

서버 측에서 추가 작업을 수행하기 위해 이러한 선택적 쿼리 매개변수를 처리할 수 있는 코드를 추가하는 것은 개발자에게 달려 있습니다. 예를 들어, 배열의 항목 순서를 변경할 수 있습니다(마지막 강의) 항목을 필터링하거나 다른 작업을 수행할 수 있습니다.

라우트 매개변수와 쿼리 매개변수

위에서 설명한 것처럼 쿼리 매개변수는 선택 사항이며 경로 라우트의 핵심 부분이 아니지만 라우트 매개변수는 필수사항입니다!

라우트 매개변수는 활성화되어야 하는 경로를 결정하는 데 사용되며 라우트 매개변수에 대한 구체적인 값(예: 식당 ID)을 얻기 위해 라우트 내부에서 구문 분석될 수 있습니다.

반면에 쿼리 매개변수는 선택 사항이고 일반적으로 실행할 라우트를 결정하는 데 사용하지 않습니다. 대신 로드된 라우트/URL에 추가 정보를 첨부하는 데 사용할 수 있습니다.

 

 

 

 

 

 

 

 

 

Sources

https://yohanpro.com/posts/nodejs/error-handling

(NodeJS) Express 에러 핸들링하기 - Yohan's Developer Diary

https://jeonghwan-kim.github.io/node/2017/08/17/express-error-handling.html

에러 처리를 위한 익스프레스 가이드

http://expressjs.com/en/guide/error-handling.html

Express error handling

https://stackoverflow.com/questions/13133071/express-next-function-what-is-it-really-for

Express next function, what is it really for?

https://velog.io/@yjs_177076/next%EC%9D%98-%EC%82%AC%EC%9A%A9%EB%B2%95

next의 사용법

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

Array.prototype.sort() - JavaScript | MDN