노드 JS CSS 가 불러와지지 않을때 솔루션

처음 로컬에서 프론트를 짜고 노드JS 를 이용해 웹 페이지를 볼때 웹 페이지의 CSS , img 등이 표시가 안되는 문제가 발생합니다. 처음보는 오류라 당황스러웠지만 간단하게 해결할 수 있는 문제였습니다.

원인?

노드 JS 에서 png ,css 등의 파일은 정적, 공용파일로 지정됩니다. 로컬에서는 정상적으로 실행됐겠지만 밑의 이런류의 간단한 코드에서는 index.html 만을 불러오므로 이외의 파일을 볼 수 없습니다. 

app.get('/',(req,res)=>{
	res.sendFile(__dirname,"index.html")
})

해결방법

node express 에는 이를 해결해주는 간단한 방법이 있습니다. directory 를 지정해주는 하나의 미들웨어만 추가 해주면 됩니다. 

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

 

public 폴더를 생성해 주시고 적용되지 않는 css , png 파일들을 옮겨 주시면 됩니다. 위 코드 한줄만 추가해주시면 됩니다.
정적인 파일들의 위치를 public 폴더에 있는 것을 이용하겠다고 선언해주는 것입니다.  

주의할 점

<link rel="stylesheet" href="index.css" />

html 에서 기본적으로 이런식이나 ./index.css 의 방식으로 css 파일의 위치를 지정해줍니다. 
만약 public/index.css 로 지정해주면 적용이 되지 않을 수 있습니다.

127.0.0.1:8080/public

의 형식으로 검색하기 때문에 /public/public/index.css 으로 검색하기에 불어오지 못할 수 있습니다. 따라서 ./index.css , index.css 등의 형식으로 적어줘야 합니다.