Node.js로 라우팅 실습하기

이번 글에서는 Node.js와 express 라는 것을 통해 간단한 라우팅을 해보겠습니다.

코딩이라고해서 모든 필요한 코드들을 처음부터 끝까지 직접짜는것은 굉장히 비효율적이고 실제로 그렇게 이루어지지 않습니다. 

Node.js를 사용하여 코딩할때도 마찬가지입니다. Node.js를 지원하는 express라는 라이브러리를 이용해서 서버코드를 작성할 것 입니다.

Express라이브러리 설치는 터미널을 통해 이루어지게됩니다. npm을 통해 터미널에 명령어를 입력해 다운받아보겠습니다.

터미널에 아래와 같은 명령어를 입력합니다.

npm init

entry point 입력만 잘해주고 나머지는 공란으로 두고 엔터치기

 

이 명령어를 입력하면 사용한 라이브러를 기록해주는 package.json과 같은 필요한 파일들이 자동으로 설치되게 됩니다.

 

이제 다음으로 아래와 같은 명령어를 입력합니다.

npm install express

 

Mac 환경에서는 권한 문제가 생길 수 있는데 그럴때는 아래와 같은 명령어를 입력해 줍니다.

sudo npm install express

 

이후 node_modules에 필요한 파일들이 생성된 것을 확인할 수 있습니다.

본격적으로 코드를 작성하기 전에 파일을 수정할때마다 서버를 껏다 켰다 하는것은 귀찮은 작업이므로 nodemon이라는 JavaScript라이브러리를 설치해 서버 재실행을 자동화 시켜보겠습니다.

아래와 같이 터미널에 입력해줍니다.

npm install -g nodemon

그 후 서버를 실행할때 아래와같이 입력하면 되겠습니다.

nodemon server.js

이제 본격적으로 js 코드를 작성해 보겠습니다.

상위폴더에 server.js라는 파일을 생성하고, 서버를 생성하기 위한 기본적인 코드를 작성해 줍니다.

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

app.listen(8080, function(){
    console.log('listening 8080')
});

서버를 로컬상에 8080번 포트에 띄우고, 콘솔에 listening 8080라는 메세지를 띄우도록해서 서버가 잘 연결됬는지 여부를 콘솔창을 통해 알 수 있도록 했습니다.

 

이제 서버에게 Get 요청을 하는 코드를 작성해 보겠습니다. get요청이란 Url을 통해서 정보를 전달한다고 간단하게 이해할 수 있겠습니다.

node.js에서 get요청을 구현하는 함수의 기본틀은 아래와 같습니다.

app.get('경로',function(req,res){
     get 요청시 실행할 동작
 });

req는 동작, res는 응답을 나타내는 파라메터입니다. 홈 디렉토리로 이동할시 간단한 메세지를 띄우는 코드는 아래와 같습니다.

app.get('/',function(req,res){
    res.send('Hello World');
 });

 

저는 이번포스트에서 간단한 자기소개 페이지를 나타낸 html파일들을 Node.js를 이용해서 서버에 전송해보겠습니다.

필요한 html파일들을 만들어서 res.sendFile(__dirname+'/index.html')과같이 작성하면 메세지대신 파일을 전송하는 것이 가능합니다.

아래는 전체 코드입니다.

const express = require('express');
const app = express();
const path = require('path');

app.use(express.static(path.join(__dirname, 'public')));




app.listen(8080, function(){
    console.log('listening 8080')
});

app.get('/',function(req,res){
    res.sendFile(__dirname+ '/index.html');
});

app.get('/about',function(req,res){
    res.sendFile(__dirname+ '/about.html');
});

app.get('/bangwoolz',function(req,res){
    res.sendFile(__dirname+'/bangwoolz.html')
});

app.get('/write',function(req,res){
    res.sendFile(__dirname+'/write.html')
});

하지만 위와같은 정적 라우팅 방식은 동적 라우팅 방식에비해 유지 보수면에서 단점을 갖고 있습니다.

따라서 아래와 같이 /루트 디렉토리 뒤에오는 값에 따라 다른 응답을 하는 API를 만들어보겠습니다.

파라메터 값에 따라 다른 html파일을 응답하도록 코드를 구성해 보았습니다.

const express = require('express');
const app = express();
const path = require('path');
var cors = require('cors')

app.use(express.static(path.join(__dirname, 'public')));

app.listen(8080, function(){
    console.log('listening 8080')
});

app.get('/:page',function(req,res){
    const {page}=req.params

    if(page=="about"){
        res.sendFile(__dirname+ '/about.html');

    }else if(page=="bangwoolz"){
        res.sendFile(__dirname+'/bangwoolz.html')
    }else if(page=="write"){
        res.sendFile(__dirname+'/write.html')
    }else if(page==""){
        res.sendFile(__dirname+'/index.html')
    }else{
        res.send("<h2>Not Found404</h2>")
    }
})

 

지금까지 아주 간단한 node.js예제를 만들어보았습니다. 다음으로는 좀더 심화적인 내용을 다뤄보도록 하겠습니다.