Node.js_Express 웹서버 만들기_1

(본 포스팅은 길벗의 'Node.js 교과서' 책을 공부하면서 작성되었습니다_내돈내산) 

 

1. Express 기본 셋팅
- app.js 파일 생성하기

- npm init 명령어로 package.json 파일 생성하기

- npm i express 로 express 설치하기

- npm i nodemon -g --save 명령어로 nodemon 패키지를 전역설치하면서 package.json 에 dependencies 추가

const express = require('express');

const app = express();

app.set('port', process.env.PORT || 3000);
// express를 사용할경우 app 에 호출 method를 붙여주는 방식으로 사용이 가능하다.
app.get('/', (req, res) => {
    res.send('hello express');
})
app.listen(app.get('port'), () =>{
    console.log('익스프레스 서버 실행');
})

- 위와같이 require로 express를 import 시키고 express를 객체화시켜 각 router를 구조화 할 수 있도록 함.

- app.set 과 같은 명령어로 app 에 속성을 지정하고 app.get을 이용해 불러올 수 있음.

- 서버 실행은 node app.js 명령어나 nodemon app.js 등으로 시작할 수 있음.

 

2. Express를 이용해 html 서빙하기

const express = require('express');
const path = require('path'); // path 를 설정하기 위한 모듈
const app = express();

app.set('port', process.env.PORT || 3000);
// express를 사용할경우 app 에 호출 method를 붙여주는 방식으로 사용이 가능하다.
app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname,'./index.html')); // 현재 경로를 절대경로로 표기해주기 위한 방법
})
app.listen(app.get('port'), () =>{
    console.log('익스프레스 서버 실행');
})

- res.sendFile 메서드를 이용해 html 파일을 표시해주도록 함.

- res.send 또는 sendFile등 응답을 보내는 코드는 하나의 라우터가 실행될때 한번만 사용해야 한다(1요청 1응답) 

- path 모듈을 사용해 html 의 경로를 표기해주도록 한다. 

3. 미들웨어
- 공통적으로 실행하고 싶은 경우 미들웨어로 등록해 실행 후 다음 라우터로 넘어가도록 설계한다.

- 사용할때 인자에 next를 추가해주고, 원하는 이벤트 후 next( ) 메서드를 명시해주어야만 원하는 라우터로 찾아 넘어감 

- 상단에 와일드카드라우터(/:xxx) 또는 ' * '(asterisk) 가 있을 경우 자바스크립트는 위에서 아래로 실행되기 때문에 다른 라우터가 실행되지 않을 수 있기 때문에 와일드카드가 있는 라우터는 다른 라우터들보다 아래에 위치하도록 한다.

- 에러발생시 공통적으로 접근할 수 있는 미들웨어 설정이 가능하며, 이때는 반드시 인자에 err, req, res, next 4가지가 모두 들어가야만 에러 미들웨어로 작용할 수 있다.

const express = require('express');
const path = require('path'); // path 를 설정하기 위한 모듈
const app = express();

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

// 미들웨어 설정 >> 모든 라우터에 공통적으로 발생하게 하고싶은 이벤트를 넣는다.
// 한번에 여러개의 미들웨어를 넣어도 next()에 의해 다음으로 넘어가게 된다.
app.use((req,res, next)=>{
    console.log('모든 요청에 실행하고 싶어요');
    next(); // 미들웨어를 실행하고 다음 함수(일치하는)를 찾아가도록 넘겨준다.(인자도 꼭 next를 포함시켜준다)
},(req,res, next)=>{
    console.log('모든 요청에 실행하고 싶어요');
    next();
},(req,res, next)=>{
    console.log('모든 요청에 실행하고 싶어요');
    next();
},(req,res, next)=>{
    console.log('모든 요청에 실행하고 싶어요');
    next();
})

// express를 사용할경우 app 에 호출 method를 붙여주는 방식으로 사용이 가능하다.
app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname,'./index.html')); // 현재 경로를 절대경로로 표기해주기 위한 방법
    throw new Error('에러') // 강제로 에러발생
})

// 와일드카드 라우터 (:name 이 와일드카드)
// 라우터 path 가 /node/로 시작하는 모든라우터가 이쪽으로 접근하게 됨. 
// 와일드카드 라우터는 코드의 아랫부분에 써주어야함.
app.get('/node/:name', (req,res) => {
    let name = req.params.name
    res.send(`hello ${name}`);
})
// 와일드카드가 상단에 있기 때문에 javascript를 넣어도 위의 라우터를 따라 들어가게 됨.
app.get('node/javascript', (req,res) => {
    res.send('hello javascript')
})

// path에 (*)asterisk가 있는 라우터도 맨 아래에 넣어주어야 함 : 해당 method의 모든 요청을 처리하겠다는 뜻
app.get('*', (req,res) => {
    res.send('hello asterisk')
})

// 에러 미들웨어
app.use((err,req,res,next) => {
    console.error(err)
    res.send("에러발생!!");
})

app.listen(app.get('port'), () =>{
    console.log('익스프레스 서버 실행');
})

 

4. next 활용법

- next()에 인수가 들어있을 경우는 바로 에러처리 미들웨어로 넘어가게 된다.

app.use((req,res, next)=>{
    try {
        console.log('모든 요청에 실행하고 싶어요');
        next();
    }catch(error) {
        next(error); // next인수에 값이 있을 경우는 반드시 에러처리 라우터로 넘어가게 됨.
    }
})

- next('route') 를 입력할 경우 한 라우터안에 있는 나머지 코드를 뛰어넘고 동일한 다음 라우터로 넘어가게 된다.

app.get('/', (req, res, next) => {
  res.send('test');
  next('route');
}, (req, res) => { // next('route')에 의해 이 다음부터 뛰어넘어서
  console.log('실행되나요?');
});

// 동일한 이름인 이쪽 라우터로 가서 실행시킴
app.get('/', (req, res) => {
  console.log('실행된다~')
});