1. 미들웨어 사용하기
- 미들웨어 : 다른 라우터 또는 미들웨어로 이동하기 위한 중간 다리 역할을 한다.
위와 같이 분리 해 놓으면 보기 좋다는 장점이 있지만 단점 또한 존재한다.
예를 들어 공통된 코드를 적고 싶으면 모든 요청에 대해서 다 적어줘야 하는 단점이 존재한다. (중복 발생) -> 이런 것을 제거하기 위해 미들웨어 라는 개념이 나온다.
(app.use 를 사용하여 모든 요청에 대해 아래와 같이 실행된다.)
(문제는 use만 실행되고 나머지 경로 설정한 라우터는 실행이 안됨
이유는 app.use가 실행되었다고 해서 그 다음부터 알아서 실행되는 것이 아니라 아래와 같이 next를 넣어줘야한다.
next에 의해서 다음 코드가 실행되는 것임)
-> 위와 같이 미들웨어들은 next를 해줘야만 다음으로 넘어간다. (중요)
-> express 는 위에서 아래로 실행된다는 것을 명심하자.
- 라우트 매개변수 (와일드 카드)
(위와 같이 한카테고리 안의 요소들을 하나하나 작업하는 것은 쉽지 않다.
이럴 때 와일드 카드를 넣는다.)
(:name을 이용하며 그 변수를 내부에서 사용하려면 위와 같이 사용한다.
req, res 매개변수는 내가 마음대로 이름 지정 가능, 약속이라고 보자 )
(이런식으로 실행 결과를 얻을 수 있다.)
(위와 같은 경우 똑같이 주소창에 /category/Javascript를 입력하면 express는 위에서 아래로 코드를 진행하기 때문에 위의 결과인 'hello wildcard' 가 나온다.)
(위 코드에서 라우트 매개변수 다음에 next를 이용하여 다음 코드를 실행 할 수는 있지만 다음 미들웨어로 넘어가면 에러나는 경우가 많다.
따라서 와일드 카드는 다른 미들웨어, 다른 라우터 보다 아래에 위치해야한다.)
(범위가 넓거나 와일드 카드를 쓰면 맨 아래 위치가 좋다. 안그러면 그 라우터만 실행되고 나머지 아래 라우터에 대한 요청은 실행되지 않는다.)
2. 미들웨어 특성 이용하기
또한 라우터도 미들웨어를 장착할 수 있는 공간이다. 함수가 미들웨어 이고, app.get, app.post 에 장착하는 개념이다.
(app.use 함수의 경로를 /about으로 설정하고 next()를 사용하면 /about 경로를 지정하는 다음 코드가 실행된다. 우이ㅘ 같이 'Hello Express' 실행)
(위 처럼 하나의 app.use 안에 여러개의 미들웨어를 next()를 통해 연결하여 실행하고 있다.)
- 에러 처리
(에러 발생시에는 에러가 났고, 어디서 났는지를 알려준다. 위와 같은 브라우저 화면을 만들어 줌. 하지만 이러한 정보가 에러 발생시 일반 사용자에게 보여주면 보안의 문제가 발생한다.
-> 그래서 보통 express 제공이 아닌 직접 에러처리를 구현한다. ( 그 에러 처리가 바로 미들웨어 이다.)
(위와 같이 에러 처리를 직접 함수로 지정함, 매개변수 4개는 꼭 들어가야 함)
- 404 에러 처리 (커스터 마이징)
(Before)
(위와 같이 에러 처리 보다는 위 그리고 모든 코드 보다 아래 지정하여 만약 아무런 라우터로도 이동하지 않았을 경우 404 에러 메시지를 위와 같이 출력 가능) but 에러는 아니다.
(원래는 status(200)이 생략됨, 기본적으로 200 이기 때문.
(위와 같이 404로 바꾸면 아래 처럼 404 에러 발생시킨다.)
=> 서버에서 404 라도 브라우저에 200이라고 거짓말을 할 수 있다.
(이 부분에서 에러를 일부로 발생시킴)
(원래 여기서 500 에러가 나야하지만
에러는 발생하지 않는 모습, 거짓말임)
(에러 처리 미들웨어를 status 500으로 바꿔 아래와 같이 에러발생하도록 함)
-> 이렇게 오히려 에러 코드를 바꿈으로서 해커들로 부터 보호 가능
실무에서는 200번대를 많이 씀
- 기타 주의 사항
(위처럼 한 라우터에 sendFile, send, json 과 같은 것을 두번 이상 쓰면
이런 에러가 발생한다. 요청 한번에 응답을 한번 보내야하는데 위의 경우 응답을 세번 보냈다.
또한 res.writeHead()를 쓰면 이미 응답을 보냈는데 head는 왜 쓰냐면서 에러가 발생한다.)
(위 처럼 express 에서도 http 에서와 같이
이렇게 쓸수도 있지만 express에서 두 코드를 합친것이 아래 코드이다.
http의 req,res를 상속받아서 사용하는 것이다. )
(http 에서의 header 설정을 express 에서는 위와 같이 편하게 할 수 있다. express 에서 http에서의 코드를 사용하지 않도록 하자.)
