개발자의 오르막

(Node.JS) CSS status cancled -> URL 앞에 / 붙임? 본문

Trouble Shouting

(Node.JS) CSS status cancled -> URL 앞에 / 붙임?

계단 2019. 10. 4. 19:31

나에게 왜 이런 시련이.. 이미 잘 되던것도, 갑자기 css를 사용하지 못하고 있다.

경로가 잘못 되어있다면 같은 트리 위치의 js파일은 load되고, css 파일만 canceled 되는 걸까

그리고, 생각해보면 render 함수로 view 폴더의 .ejs 파일이 어떻게 public 폴더 안의 css, js를

load 할 수 있는지 모르겠다. 경로를 바꿔준 적이 없는데 말이다.. ㅠㅠ

 

그리고 sublime3 에서는 열었을 때는 잘만 됨...

 

- Chrome 개발자도구

 

생각할 수 있는 결론은, node 에서 위의 css파일들을 연결하지 못했다는 걸 의미한다.

근데 404 가 아니라 cancel이라 .. 

 

app.use(express.static('public'));

- 일단 나는 public 폴더 안의 파일을 전체 정적 파일로 등록한 상황이다.

 

router.get('/', function(req, res){
    console.log('admin/main.js')
    res.sendFile(path.join(__dirname, "../../public/admin.html"));
});

router.get('/addProduct', function(req, res){
    console.log('add.js')
    res.sendFile(path.join(__dirname, "../../public/productAdd.html"));
});

router.get('/listProduct', function(req, res){
    console.log('list.js')
    res.sendFile(path.join(__dirname, "../../public/productList.html"));
});

 

- 근데 이상한게,, 위의 경로대로 addProduct, listProduct 로 페이지 이동은 되는데, 콘솔로그는 계속해서

  admin/main.js 만 찍힌다. /admin 을 포함해서 그런걸까, 근데 안그럼 페이지마다 일일이 모듈화를 해줘야하는데?

  근데 또 껐다 키니까 됨.. css는 여전히 canceled 상태이고,

 

app.use(express.static(path.join(__dirname, 'public')));

- 이것도 한번 해보자..

  안되네ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 재부팅 하고 옴

  그러던 와중에 발견한 공통점.. 안되는 애들은 url 뒤에 /가 붙음.. 

 


그래서 결국 /가 붙는 admin 이나 join url 은 다 버리고, 새로 url을 만들었다.

 

- 원래 내가 만든 admin.js 라우터 모듈

var express = require('express');
var app = express();
var router = express.Router();
var path = require('path')

// routing

router.get('/', function(req, res){
    res.sendFile(path.join(__dirname, "../../public/admin.html"));
});

router.get('/add', function(req, res){
    res.sendFile(path.join(__dirname, "../../public/admin.html"));
});

router.get('/list', function(req, res){
    res.sendFile(path.join(__dirname, "../../public/admin.html"));
});

module.exports = router;

 

인데, 새로 따로 하나씩 다 만들어줬더니 됐다.

하나의 모듈에서 get 함수를 여러번 못쓰는거 아닐까? 그리고 에러 생기면 흔적이 남아서 못쓰는걸까..

일단 css cancel 되는 부분들은 다 고치긴 했다..

 


와 드디어 원인을 알았다....................................

왜 css파일은 cancel 되고, js파일은 잘 돼었는지,,,,

저기 앞의 /를 왜 못찾아갖고,, 어제 그렇게 멘붕때렸는지 모르겠다...

저거 앞에 /가 없으니까 res.render 나 href 로 움직일 때 cancel 당하는 거였다.

 

근데 왜 notfound 가 아니고 cancel일까,  경로 문제였으면 ~~~stylesheets 이런식으로 돼서 notfount라고

오류 뜨면 경로 집중적으로 봤을 텐데..

어쨌든 해결 됐다..

Comments