Express 프레임워크 사용해보기

Express란 무엇인가?

Express는 웹 및 모바일 어플리케이션을 위하여 여러가지 기능들을 제공하는 Node.js의 웹 어플리케이션 프레임워크이다. Node.js가 JavaScript를 이용하여 서버를 구축하고, 서버에서 JavaScript가 잘 작동되도록 해주는 런타임 환경이라면 Express는 이러한 Node.js를 이용하여 웹 어플리케이션을 만들기 위한 프레임워크이다.


Express 설치하기

원하는 경로에서 아래 코드를 입력하여 express를 설치해보자.

$ npm install express

설치 후 생긴 package.json 파일을 확인해 보면 다음과 같다.

{
  "dependencies": {
    "express": "^4.18.2"
  }
}

위와 같이 express dependency가 추가되면 설치가 잘 완료된 것이다.


Express 서버 생성하기

express를 설치 완료하였으면, 이제는 서버를 만들어 볼 차례이다. app.js 파일을 생성하고 다음 코드를 입력해 보자.

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

app.listen(port, () => {
    console.log(`Example app listening at http://localhost:${port}`)
});

위와 같이 app.js 파일을 생성하고, 실행해 보면 서버가 켜진다.

$ node app.js

3000번 포트로 웹 서버를 열고 http://localhost:3000/에 접속해보면 다음과 같은 에러가 발생한다.

그 이유는 Router를 아직 정의하지 않았기 때문이다.


Express 라우터 (Router) 설정하기

라우터는 클라이언트의 요청 경로를 보고, 이 요청을 처리할 수 있는 곳으로 전달해 주는 역할을 한다. 이러한 과정을 라우팅이라 하는데, 라우팅은 애플리케이션 엔드 포인트(URI)의 정의, 그리고 URI가 클라이언트 요청에 응답하는 방식을 말한다. express에서는 이러한 라우터를 미들웨어(서로 다른 어플리케이션이 서로 통신하는데 사용되는 소프트웨어)로서 제공하고 있다.

app.get('/', (req, res) => {
    res.send('Hello World!')
})

앞서 작성한 app.js 에 위의 코드를 추가하고 서버를 재실행하면, localhost:3000 에 접속하였을 때 오류가 발생하지 않는다. 이러한 라우터를 서버에 너무 많이 연결해버리면 app.get() 이 도배가 되어버려서 코드의 복잡도가 올라간다는 단점이 있다. 이러한 문제를 해결하기 위해서, 익스프레스는 라우터를 분리할 수 있는 방법을 제공한다.

예시를 통해 알아보기 위하여 routes 폴더를 생성하고, 그 안에 index.jsuser.js 를 작성해보자.

// routes/index.js
const express = require('express');
const router = express.Router();

router.get('/index', (req, res) => {
    res.send('index page');
});

module.exports = router;
// routes/user.js
const express = require('express');
const router = express.Router();

router.get('/example', (res,req) => {
    req.send('user page');
})

module.exports = router;

그리고 app.js 에 다음과 같은 코드를 추가해보자.

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

const indexRouter = require('./routes/index');
const userRouter = require('./routes/user');

app.set('port', process.env.PORT || 3000);

// 각각 다른 경로에 미들웨어 장착
app.use('/', indexRouter);
app.use('/user', userRouter);

// 존재하지 않는 경로일 경우 실행되는 코드
app.use((req, res)=>{
    res.status(404).send('Not Found');
})

app.listen(app.get('port'), () => {
    console.log(`implement server port:${app.get('port')}`)
})

index.jsuser.js 모두 app.js 내에서 다른 주소의 라우터 역할을 하고 있다. indexRouter'/' 에 연결했고, userRouter'/user'에 연결했다.

서버를 실행한 뒤 위 두개의 링크로 접속하면 각각에 해당하는 응답을 받을 수 있다.

댓글남기기