2021-02-19(수)
콘솔 로그가 왜 두번이나 찍혔을까??
콘솔로그가 두번 찍힌 발생 상황
const express = require('express');
const app = express();
app.use(function (req, res, next) {
console.log('첫번째 미들웨어');
next();
});
app.use(function (req, res, next) {
console.log('두번째 미들웨어');
next();
});
app.use(function (req, res) {
console.log('세번째 미들웨어');
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end('<h1>express</h1>');
});
app.listen(3000, function () {
console.log('실행');
});위와 같이 입력하면
실행
첫번째 미들웨어
두번째 미들웨어
세번째 미들웨어이렇게 나오는 것이 당연하다고 상상했을 것이다.
하지만 두번 반복해서 나오게 되었다..
실행
첫번째 미들웨어
두번째 미들웨어
세번째 미들웨어
첫번째 미들웨어
두번째 미들웨어
세번째 미들웨어이런.. 내가 원하는 결과는 이게 아니라구!! (멘붕) 그런데 또 이게 불특정하게 발생한다는 것이다.
.. 그래서 열심히 찾아본 결과
favicon.ico 요너석 딱 걸렸다!!
결국 파비콘이라는 녀석이 범인이었다. 간단하게 파비콘을 설명하자면, 웹 브라우저의 타이틀을 대표하는 아주 조그만 아이콘이다. 상단 탭에 보여지는 아이콘!
요녀석을 뜻하는데.. 그래서 왜 뜬금 없이 이녀석이 문제가 발생한다는 건가
원인
모든 요청에서 내 서버는 html 파일을 포함하지 않는 REST API인 경우에도/favicon.ico에 대한 GET 요청을받는다.
브라우저는 기본적으로 브라우저 탭에 아이콘을 표시하기 위해 호스트 이름의 루트에서 /favicon.ico를 요청한다.
해결책
- 사이트의 루트에서 사용할 수있는 favicon.ico 파일을 제공하면 된다.
- serve-favicon와 같은 모듈을 사용하여 특정 파일에 대한 요청을 가리키면 된다.
- favicon.ico 요청을 잡아서 204 No Content 상태를 보내는 것으로 해결이 가능하다.
app.get('/favicon.ico', (req, res) => res.status(204));
app.get('/favicon.ico', (req, res) => res.status(204)); 한줄 추가해서 해결!
favicon.ico의 또다른 문제
favicon.ico가 존재하지 않다면 에러 처리를 위해서 서버에 재요청을 하면서 요청이 2번이 발생한다.
쉽게 설명하자면 html에서 설정한 파비콘의 이미지 경로가 맞지 않거나 파일이 없는 경우 서버에 재요청을 해서 두번이나 요청이 발생하여 또 다른 문제가 발생할 수 있다는 것!
(엑박이나 조회수 등 원하지 않던 것들이 2번 호출이 될 수 있다)
참고 자료 및 사이트(감사합니다)
https://java2020.com/q/dhfrkfjr
https://okky.kr/article/609153
https://yceffort.kr/2020/05/difference-between-function-and-arrow
https://lts0606.tistory.com/339
https://velog.io/@jinsunee/javascript-%EC%9D%BC%EB%B0%98%ED%95%A8%EC%88%98regular-function%EC%99%80-%ED%99%94%EC%82%B4%ED%91%9C%ED%95%A8%EC%88%98arrow-function%EC%9D%98-%EC%B0%A8%EC%9D%B4
