espress 기초 다지기 - 미들웨어편

import express, { Request, Response, NextFunction } from "express";


const app = express();

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

app.get('/welcome', (req: Request, res: Response, next: NextFunction)=>{
    res.send('welcome!');
});

app.listen(app.get('port'), () => {
    console.log(`server listening on port : `);
})

 

[ 코드 설명 ] 

app.set 으로 port 라는 변수에 심는 역할을 한다.

지금은 process.env 에 설정해둔 PORT 가 없으므로 3000 이 실행

 

app.listen 으로 port 변수인 localhost:3000 이 실행되고 (웹사이트 보이는 표면엔 can't not GET 뭐시기 뜸)

여기서 localhost:3000/welcome 까지 들어가야 웹사이트에 'welcome!' 이 뜬다. (can't not GET 대신 welcome! 뜸)

 

 

 

 

 

 

 

---

import express, { Request, Response, NextFunction } from "express";


const app = express();

app.use((req:Request, res:Response, next: NextFunction)=>{
    console.log('모든 곳에 실행하고 싶어요!');
})

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

app.get('/welcome', (req: Request, res: Response, next: NextFunction)=>{
    res.send('welcome!');
});

app.listen(app.get('port'), () => {
    console.log(`server listening on port : `);
})

 

[ 코드 설명 ] 

다음은 app.use 를 추가해보았다.

localhost:3002/welcome 들어갔을 때 계속 로딩이 되어서 잘못 친 줄 알았다.

 

 

 

실행 순서

1. app.listen (터미널에서 콘솔 server listening on port.. 문구 실행)

2. app.use 실행으로 console.log('모든 곳에 실행하고 싶어요') 가 터미널에 찍힌다.

3. /welcome 라우터가 되지 않는다.

 

 

 

 

이 이유는 app.use 때문에 그렇다.

next 함수가 없기 때문에 app.use 만 실행할 뿐 다른 라우터들은 실행되지 않는다.

next 인자를 추가하고 next() 사용해줄 시 -> 미들웨어 사용 후 next 에 의해 해당 라우터에 맞는 라우터를 실행시켜준다.

 

↓

 

app.use((req:Request, res:Response, next: NextFunction)=>{
    console.log('모든 곳에 실행하고 싶어요!');
    next();
})

 

 

 

 

 

 

---

app.use((req:Request, res:Response, next: NextFunction)=>{
    console.log('모든 곳에 실행하고 싶어요!');
    next();
})

app.get('/category/:name', (req:Request, res:Response)=>{
    res.send(`hello wildcard`);
})

app.get('/category/javascript', (req:Request, res:Response)=>{
    res.send(`hello ~`);
})

 

/category/javascript 했음에도 불구하고

'hello wildcard' 가 뜬다.

이 이유는 express 는 순차적으로 라우터를 실행하기 때문이다.

와일드카드에 의해 위에 걸려버리게 되므로 아래는 실행하지 않게 된다.

 

 

 

 

 

---

미들웨어

무조건 app.use 가 미들웨어냐?.. 그렇지 않다.

나도 당황스럽다

 

 

 

미들웨어라는 것은 바로 함수 부분이다.

(req, res, next) => { }

 

이 부분임... 

 

 

 

 

 

이 미들웨어를 app.use 에 장착한 것일 뿐이다.

 

 

 

 

app.use('/about', (req:Request, res:Response, next: NextFunction)=>{
    console.log('모든 곳에 실행하고 싶어요!');
    next();
})


app.get('/about', (req: Request, res:Response)=>{
    res.send('미들웨어 실행 후 이동')
})

 

미들웨어는 app.get 에서도 사용가능하다. 

위의 코드를 보면 app.get 은 미들웨어를 사용한 것이다.(함수가 들어있으니까!!!! next 가 꼭 포함되어 있지 않아도 됨)

 

 

그리고 app.use 는 url 을 작성해줄 수도 있다.

/about 이라고 썼는데 /about 라는 url 이용시 이 미들웨어를 거치게 된다.

 

 

 

 

---

app.use((req:Request, res:Response, next: NextFunction)=>{
    console.log('1: 모든 곳에 실행하고 싶어요!');
    next();
}, (req: Request, res:Response, next:NextFunction)=>{
    console.log('2: 모든 곳에 실행하고 싶어요!');
    next();
}, (req:Request, res:Response, next:NextFunction)=>{
    console.log('3: 모든 곳에 실행하고 싶어요!');
    next();
})

 

여러 미들웨어를 써줄 수도 있다..!!

일단 localhost:3003 에 접속하면 터미널에 콘솔이 1, 2, 3 이 찍히게 된다.

 

 

 

 

 

노드는 싱글 스레드이다.

그래서 에러 처리를 잘 해주지 않으면 서버가 죽어버린다. 

 

 

 

 

app.use((req:Request, res:Response, next: NextFunction)=>{
    console.log('1: 모든 곳에 실행하고 싶어요!');
    next();
}, (req: Request, res:Response, next:NextFunction)=>{
    throw new Error('에러가 났어요!!!!!!!!!');
})

 

 

노드는 친절하게 에러가 발생한 부분을 알려준다.

index.ts 에서 14번째 줄에서 애러 발생

 

 

 

 

 

 

 

미친듯이 에러가 상세하게 표시가 되기 때문에 우리는 보안적인 측면에서

다른 해결방법을 취해줄 필요가 있다.

 

 

이 에러처리하는 방법조차 미들웨어인 것이다.

 

 

 

 

 

---

에러 미들웨어는 무조건 4가지 인자를 써주어야 한다.

 

실행순서

1. app.set 으로 포트 변수에 3003 심기

2. 공통 미들웨어 실행(app.use)

3. 각각의 라우터들을 실행(app.get, app.post, ....)

4. 에러 미들웨어 처리

 

 

app.use((req:Request, res:Response, next: NextFunction)=>{
    console.log('1: 모든 곳에 실행하고 싶어요!');
    throw new Error('에러가 낫어여ㅛ')
})

app.get('/category/:name', (req:Request, res:Response)=>{
    res.send(`hello wildcard`);
})

app.get('/category/javascript', (req:Request, res:Response)=>{
    res.send(`hello ~`);
})


app.get('/welcome', (req: Request, res: Response, next: NextFunction)=>{
    res.send('welcome!');
});


app.use((err:Error, req: Request, res: Response, next: NextFunction)=>{
    console.error(err);
    res.send('에러났지롱. 근데 안알려주지롱');
})

 

클라이언트들에게는 '에러났지롱. 근데 안알려주지롱' 이 뜨지만

나의 터미널에서는 상세히 어디가 에러가 났는지 보여준다.

 

 

 

 

 

 

이렇게 보안을 지킬 수 있는 것이다.

 

 

 

---

app.use((req:Request, res:Response, next:NextFunction)=>{
    res.send('404지롱');
})

app.use((err:Error, req: Request, res: Response, next: NextFunction)=>{
    console.error(err);
    res.send('에러났지롱. 근데 안알려주지롱');
})

 

 

localhost:3000/abc 라는 없는 주소를 쳐보자.

웹사이트에는 '404지롱' 이 뜨지만 네트워크탭을 보면 404에러가 발생하지 않고 있다.

 

이렇게 에러 미들웨어 위에 써주면 더 보안적인 측면이 강해질 수 있다.

왜냐하면 200 ok 가 전달되기 때문

 

200은 생략될 수 있다.

원래는 res.status(200).send('404지롱') 이다.

 

 

 

 

---

app.get('/welcome', (req: Request, res: Response, next: NextFunction)=>{
    res.send('welcome!');
    res.sendFile();
    res.json({ hello: 'zerocho'})
});

 

한 라우터 안에 여러 응답을 하면 에러가 난다.

위 코드는 3번이나 응답하고 있다.

 

마지막은 json 으로 응답하고 있다는 뜻

 

 

 

기억해두자.

요청 한 번에 응답은 한 번 보내줘야 한다. 

 

 

 

 

---

app.get('/welcome', (req: Request, res: Response, next: NextFunction)=>{
    res.writeHead(200, {'Content-Type': 'text/plan'});
    res.end('안녕하세요');


    res.send('안녕하세요');   // 위의 두 줄은 express 는 이 한 줄로 간단히 처리한다.
});

 

 

 

 

 

 

 

express

나중에 setHeader 에 대해서 배울 것임..

 

app.get('/welcome', (req: Request, res: Response, next: NextFunction)=>{
    res.setHeader('Content-Type', 'text/plain')
    res.send('안녕하세요');
});