[Node.js] 외부에서 css 적용하기

외부에서 css를 적용하는, 정적으로 파일 서비스하는 방법에 대해 알아보자

 

 

 

내가 관리하고 있는 node.js 폴더가 이런 구성을 갖고 있다고 해보자. 

 

일반적으로 css를 html 파일에 외부에서 연결시킬 때는 

 

 

경로를 따라가서 적용시킨다.

 

하지만 node.js에서 이 방식을 사용하면

 

 

다음과 같이 적용이 되지 않는다. 

 

모든 스타일링이 적용이 되지 않는데 개발자 도구에서 볼 수 있듯이 파일 시스템에 엑세스 하지 못해 main.css 파일을 찾지 못한다.

 

이를 구현하려면 Express.js가 제공하는 기능이 필요하다. 

 

바로, 파일을 정적으로 서비스하는 기능이다. 정적이란 의미는 express.Router이나 다른 미들웨어 소프트에서 처리되지 않고 파일 시스템으로 직접 포워딩된다는 것을 뜻한다.

 

이를 위해 app.use로 새로운 미들웨어를 등록해야하는데 Express.js에 기본적으로 포함되어 있다. 따라서 express 객체 자체를 사용하면 된다. 

 

 

status 메서드는 기본적으로 express에서 제공하며 내장된 미들웨어이다.  path.join으로 경로를 구축하고 __dirname(루트 폴더)와 public 폴더를 설정해 주면 된다. 이렇게 하면 public 경로에 액세스 할 수 있다.

 

 

여기서 주의해야 할 점이 있는데 

 

 

express.static을 사용해도 위의 사진처럼 경로 설정을 하면 여전히 작동하지 않는다. 

 

왜냐하면 public으로 시작하는 경로가 올바르지 않기 때문이다. Express에서는 내가 설정한 (여기서는 public) 경로를 생략해야 하는데 Express가 그렇게 작동하기 때문이다. 

 

어떤 파일을 찾으려는 요청이 있을 때 확장자를 살펴보고 .css나 .javascript 파일을 찾는 요청이라면 자동으로 public 폴더로 포워딩해주기 때문에 나머지 경로에는 public이 포함되어 있지 않아야 한다.

 

따라서 이 경로에서 public를 지우고 이미 public 폴더라고 간주되어 있는 셈이다. 

 

 

 

 

404 Error 페이지에 올바르게 적용된 css