유데미 보면서 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());
추가app.use('/favicon.ico', express.static('images/favicon.ico'));
이런식으로 파일을 참조해준다.var favicon = require('serve-favicon');
app.use(favicon(__dirname + '/public/images/favicon.ico'));
이러한 방법도 사용 가능위의 이슈는 app.get("/favicon.ico", (req, res) => res.status(204).end());
를 추가하여 간단하게 해결했다. 그러고 나니 갑자기 눈에 들어온 react를 돌렸을 때 default favicon...
이런 모양을 가진 파비콘.
나는 로컬에서 돌렸고 express만 돌렸는데 favicon이 왜 생겼을까 생각하면서 브라우저를 네이버 웨일로도 접속해봤는데 웨일로 접속 했을때는 favicon이 생기지 않았고 크롬으로 접속 했을때만 생겼다.
조금 찾아보니 이 내용도 위의 링크와 다른 스택오버플로우 질문 내용이 있었다.
그냥 단순히 브라우저 캐시에 해당 favicon이 저장 되어 있어 그런 것이라고 한다. ㅋ
예전에 리액트 앱을 로컬에서 돌린 적이 있기 때문에 리액트 default favicon이 캐시에 저장된 것이다.
주소창에 localhost:3000을 입력했을때 아래 나오는 자동완성 주소에 favicon이 리액트 아이콘인 주소들을 지워주고 캐시도 삭제해주니 원래대로 돌아왔다
틀린 내용이 있다면 댓글로 알려주심 감사하겠습니다~~