[Node.js] 미들웨어 두 번씩 호출(feat. favicon)

9_miin·2022년 11월 30일

Node.js

목록 보기

1/2

미들웨어 호출 시 두 번씩 호출

유데미 보면서 nodejs 공부하던 중 미들웨어 호출하고 console.log를 찍어봤는데 두 번씩 찍히는 것을 확인했다 ~~강사님은 한번만 찍히는데 나만 두번~~

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

app.use("/add-product", (req, res, next) => {
  console.log("in another middleware!");
  res.send('<h1>The "Add Product" Page</h1>');
});

app.use("/", (req, res, next) => {
  console.log("in another middleware!");
  res.send("<h1>Hello from express</h1>");
});

app.listen(3000);

위의 코드를 실행하고 /와 /add-product에 접속하면 둘 다 in another middleware!라는 내용이 콘솔에 한번만 찍힐거라고 생각했는데 예상과 다르게 두 번 찍혔다.

관련 내용을 찾아보니 나와 같은 상황을 겪은 사람이 많았고 스택오버플로우에도 관련 내용이 있었다.

express에서는 /favicon.ico 경로로 파비콘을 자동으로 요청한다고 한다. 이 문제를 해결하려면

app.get("/favicon.ico", (req, res) => res.status(204).end()); 추가
-> favicon.ico가 없어 에러 처리를 위한 재요청을 막기 위해서 No content 상태를 보낸다.
favicon.ico 파일을 서버의 루트에서 사용할 수 있게 추가해준다.
그 후
app.use('/favicon.ico', express.static('images/favicon.ico'));이런식으로 파일을 참조해준다.
favicon 미들웨어를 설치 한 후 var favicon = require('serve-favicon');
app.use(favicon(__dirname + '/public/images/favicon.ico')); 이러한 방법도 사용 가능

서버만 돌렸는데 로컬 호스트 default favicon이 react인 건에 대하여

위의 이슈는 app.get("/favicon.ico", (req, res) => res.status(204).end());를 추가하여 간단하게 해결했다. 그러고 나니 갑자기 눈에 들어온 react를 돌렸을 때 default favicon...

이런 모양을 가진 파비콘.
나는 로컬에서 돌렸고 express만 돌렸는데 favicon이 왜 생겼을까 생각하면서 브라우저를 네이버 웨일로도 접속해봤는데 웨일로 접속 했을때는 favicon이 생기지 않았고 크롬으로 접속 했을때만 생겼다.

조금 찾아보니 이 내용도 위의 링크와 다른 스택오버플로우 질문 내용이 있었다.
그냥 단순히 브라우저 캐시에 해당 favicon이 저장 되어 있어 그런 것이라고 한다. ㅋ
예전에 리액트 앱을 로컬에서 돌린 적이 있기 때문에 리액트 default favicon이 캐시에 저장된 것이다.
주소창에 localhost:3000을 입력했을때 아래 나오는 자동완성 주소에 favicon이 리액트 아이콘인 주소들을 지워주고 캐시도 삭제해주니 원래대로 돌아왔다

틀린 내용이 있다면 댓글로 알려주심 감사하겠습니다~~

참고자료

9_miin

다음 포스트

[Node.js] 미들웨어 두 번씩 호출(feat. favicon)

Node.js

미들웨어 호출 시 두 번씩 호출

서버만 돌렸는데 로컬 호스트 default favicon이 react인 건에 대하여

참고자료

[Node.js] httpOnly, secure 등 cookie 속성

0개의 댓글