Help me choose
Archive until 15 Jul 2021/Learning new stuffs

Setting up routing through express

by hajinny 2021. 1. 3.

One thing I really struggled with back then was the concept of 'route', 'routing'. What the hell are they? Are they some sort of way to make ways for something? If so, from where to where, and moving what to what? Such struggles were resolved when I played around with Rest API (see optimizemarginality.tistory.com/4, optimizemarginality.tistory.com/5). 

 

Let's try to parse through these lines of codes:

const express = require('express');
express().listen(3000, ()=>console.log('example app listening on port 3000'))

Firstly, we need to understand the structure of urls. Observe a url, www.AAA.com/. www.AAA.com is an ip address of someone's website, and '/' indicates that we are accessing the root folder of that website. 

 

What express allows us to do is to set up an equivalent of a website www.AAA.com in our own computer, that is not accessible by others but ourselves.

const express = require('express');

is the express framework or library, and 

express().listen(3000, ()=>console.log('example app listening on port 3000'))

express() is an object that has method 'listen()' that makes the website called localhost:3000 run. Wait a minute, there's no .com or www.? Nah, there's no need for that. After all, things like www.naver.com or www.google.com are what masks a reference to a website, just like localhost:8080 masks a reference to a website.

 

Now, the second argument is a callback function that gets called when the website has successfully started running.

Let's refactor things a little bit:

const express = require('express');
const app = express();
const port = 3000;

app.listen(port, ()=>console.log(`example app listening on port ${port}`))

And that should make sense.

 

Now, website has different pages, and they are called 'routes'. The root route of a website www.AAA.com would be "www.AAA.com/", and another route (sub-route of "www.AAA.com/") could be "www.AAA.com/about", "www.AAA.com/register", "www.AAA.com/login" and so on.

 

Each route can take in a request, and send back a response. Type of request can vary, but request and response always exist in pairs. The type of request you do by typing a url like "www.AAA.com/login" is a GET type request. We only really care about GET and POST types of request, so you are already familiar with half the type of requests! The thing you see on the screen as a result is a response of that route. Easy!

 

But request is not as simple as that. Request is actually an object that has a field called 'body' (and this field can contain a json formatted object). Let's see how this concept integrates with codes:

const express = require('express')
const app = express();
const port = 3000;

//way to define what happens when GET request is made on localhost:3000/about route 
app.get('/about', (request, response)=>{
	response.send('hello world! my man this is so cool');
});


app.listen(port, ()=>{//});

When you type localhost:3000/about into the url, you will see 'hello world! my man this is so cool' printed out on the website. You can infer that you can response.send(// an html file) so that an html file renders on the screen when GET request is made to that route.

 

POST request cannot be done by simply putting a url into the website. POST is a type of request that attempts to pass a json object that contains certain data, so that the route will process that data and (usually) create an object as instructed by that json file in the database.

const express = require('express')
const app = express();
const port = 3000;

//way to define what happens when GET request is made on localhost:3000/about route 
app.get('/about', (request, response)=>{
	response.send('hello world! my man this is so cool');
});

app.post('/register', (req, res)=>{
	const user = new User(req.body)
    
    user.save((err, userInfo)=>{
    	if(err) return res.json({success: false, err})
        return res.status(200).json({
        	success: true
            })
    });

}


app.listen(port, ()=>{//});

ah can't be bothered continuing this

'Archive until 15 Jul 2021 > Learning new stuffs' 카테고리의 다른 글

How to use <Prettier> code formatter on VS code, on save  (0) 2021.01.09
Promise pattern  (0) 2021.01.02
Call back function  (0) 2021.01.02
Asynchronous  (0) 2021.01.02